Aan de slag met ArcGIS JavaScript - Reverse geocoding

Egge-Jan_Pollé · ‎05-11-2019

Inleiding

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.

Data en services van Esri Nederland

Basiskaart: De Topo RD basiskaart is een Web Map van Esri Nederland met als id 7aea6fa913a94176a1074edb40690318. Deze kaart gebruiken we als basemap
Geocoder: De BAG Geocoder is een Locator van Esri Nederland, gebaseerd op de officiële Basisregistratie Adressen en Gebouwen (BAG). In onze web applicatie roepen we deze aan via de volgende url: https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer

Toelichting

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:

het opzetten van de Locator
het aanmaken van de Map
het definiëren van de MapView (en een Point om de coördinaten van het center van de kaart in RD-coördinaten op te kunnen geven)

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.

Broncode

<!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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍