In deze serie oefeningen verkennen we de mogelijkheden van de ArcGIS API for JavaScript met behulp van data en diensten die door Esri Nederland via ArcGIS Online aangeboden worden.
Reverse geocoding is het ophalen van een adres aan de hand van een tweetal coördinaten, in dit geval door ergens op de kaart te klikken.
De volleidge broncode van de web applicatie staat hieronder. Deze kun je naar een text editor kopiëren (bijvoorbeeld Notepad++) en naar eigen behoefte aanpassen.
Links naar achtergrondinformatie over de verschillende onderdelen die gebruikt worden in het script:
Als al deze elementen op hun plek staan is er een functie die de muisklikken in de kaart afvangt om het adres op te halen. Hierbij wordt gebruik gemaakt van zogeheten promises, één van de Programming patterns die in de ArcGIS API for JavaScript wordt gebruikt.
Klik hier om de applicatie in actie te zien.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Aan de slag met ArcGIS JavaScript - Reverse geocoding</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#instruction {
padding: 15px;
background: white;
color: black;
border: 5px solid gold;
font-family: sans-serif;
font-size: 1.2em;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/tasks/Locator",
"esri/Map",
"esri/geometry/Point",
"esri/views/MapView"
], function(Locator, Map, Point, MapView) {
// Zet een locator op met de BAG Geocoder van Esri Nederland
var locatorTask = new Locator({
url:
"https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer"
});
var map = new Map({
basemap: {
portalItem: {
id: "7aea6fa913a94176a1074edb40690318" // Basiskaart van Esri Nederland: Topo RD
}
}
});
var rdOrigin = new Point({
x: 155000,
y: 463000,
spatialReference: 28992
});
var view = new MapView({
spatialReference: 28992,
container: "viewDiv",
map: map,
center: rdOrigin,
zoom: 3
});
// Voeg de div met de instructie toe aan het kaartscherm
view.ui.add("instruction", "bottom-left");
/*******************************************************************************
* Door te klikken op de kaart wordt de popup die bij de view hoort ingesteld.
* Het aangeklikte punt wordt gebruikt als input voor de reverse geocoder.
* Het gevonden adres en de gevonden coördinaten worden in de popup getoond.
*******************************************************************************/
view.popup.autoOpenEnabled = false;
view.on("click", function(event) {
// Haal de coördinaten van het aangeklikte punt op
var rdx = Math.round(event.mapPoint.x);
var rdy = Math.round(event.mapPoint.y);
view.popup.open({
// Toon de gevonden RD coördinaten in de titel van de popup. De coördinaten worden
// afgerond op hele meters en er wordt een punt geplaatst tussen de duizendtallen
title: "RD Coördinaten: X = " + rdx.toLocaleString() + " / Y = " + rdy.toLocaleString(),
location: event.mapPoint // Plaats de popup op de aangeklikte locatie
});
// Toon de popup
// Voer reverse geocoding uit voor de aangeklikte locatie
locatorTask
.locationToAddress(event.mapPoint)
.then(function(response) {
// Toon het gevonden adres in de popup
view.popup.content = response.address;
})
.catch(function(error) {
// Toon een foutmelding als er geen adres gevonden wordt
view.popup.content = "Er is geen adres gevonden voor deze locatie";
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="instruction">
Klik ergens op de kaart om een adres op te halen
</div>
</body>
</html>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.