EPolle_TensingInternational

Aan de slag met ArcGIS JavaScript - Reverse geocoding

Blog Post created by EPolle_TensingInternational Champion on May 11, 2019

Reverse Geocoding

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

 

 

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>

Outcomes