EPolle_TensingInternational

Aan de slag met ArcGIS JavaScript - DKK Geocoder

Blog Post created by EPolle_TensingInternational on Oct 17, 2019

Aan de slag met ArcGIS JavaScript - Inhoudsopgave

 

DKK Geocoder

 

In oktober 2019 heeft Esri Nederland een nieuwe service gelanceerd voor het zoeken naar kadastrale percelen: de DKK Geocoder. DKK staat voor Digitale Kadastrale Kaart.

 

In deze oefening gebruiken we deze nieuwe Locator in de ArcGIS API for JavaScript, versie 4.13 (die ook nu in oktober 2019 is vrijgegeven).

 

Dus als je de zoekfunctie in deze web mapping applicatie gebruikt, dan kun je niet alleen op adressen zoeken, maar ook op kadastrale percelen in Nederland: 

Aan de slag met ArcGIS JavaScript - DKK Geocoder 

 

Meer informatie over deze nieuwe dienst van Esri Nederland is te vinden in deze blog “Douze points voor perceel RTD06 S 4403!” – onze nieuwe DKK Geocoder van Jeske van der Velden

 

Andere oefeningen in deze reeks met de Search Widget:

 

De broncode van deze app staat hieronder:

<!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 - DKK Geocoder</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/css/main.css">
  <script src="https://js.arcgis.com/4.13/"></script>
  <style>
    html, body {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      font-family: sans-serif;
    }
    #header {     
         width: 100%;
        height: 70px;
        background-color: #113395;
        color:#FFFFFF;
        margin: 0;
    }
    #headertext {
        float: left;
        font-size: 35px;
        color: white;
        line-height: 70px;
        padding-left: 15px;
    }
    #viewDiv {
        position: absolute;
        top: 70px;
        bottom: 0;
        right: 0;
        left: 0;
        padding: 0;
        margin: 0;
    }
    td {
      padding: 15px;
    }
    .dialogDiv {
      background-color: white;
      width: 480px;
    }
    .dialogHeader {
      color: white;
      font-weight: bolder;
      width: auto;
      background-color: #113395;
      padding: 5px;
    }
    .esri-basemap-gallery__item-thumbnail {
      width: auto;
    }
  </style>

  <script> 
      require([
        "esri/Map",
        "esri/widgets/Zoom",
        "esri/widgets/Home",
        "esri/widgets/Compass",
        "esri/geometry/Point",
        "esri/views/MapView",
        "esri/layers/WMTSLayer",
        "esri/widgets/Search",
        "esri/tasks/Locator",
          "esri/Basemap",
          "esri/widgets/BasemapGallery",
          "esri/widgets/BasemapGallery/support/LocalBasemapsSource",
          "esri/widgets/Expand",
        "esri/widgets/LayerList",
        "esri/layers/MapImageLayer",
        "dojo/domReady!"
      ], function(Map, Zoom, Home, Compass, Point, MapView, WMTSLayer, Search, Locator, Basemap, BasemapGallery, LocalBasemapsSource, Expand, LayerList, MapImageLayer) {

      document.getElementById("aboutDiv").style.display = "block";

      // BRT Achtergrondkaart van PDOK als achtergrondkaart
      let brtachtergrondkaart = new Basemap({
        baseLayers: [
           new WMTSLayer({
            url: "https://geodata.nationaalgeoregister.nl/tiles/service/wmts?request=GetCapabilities&service=WMTS",
            copyright:
              "<a target='_top' href='https://www.pdok.nl/introductie/-/article/basisregistratie-topografie-achtergrondkaarten-brt-a-'>BRT Achtergrondkaart</a> van <a target='_top' href='https://www.pdok.nl/'>PDOK</a>",
            activeLayer: {
              id: "brtachtergrondkaart"
            }
          })
        ],
        title: "BRT Achtergrondkaart (PDOK)",
        id: "brtachtergrondkaart_pdok",
        thumbnailUrl: "images/map.jpg"
      });

      // Basiskaarten Esr Nederland
      let lightGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "9ff6521e85d24df1aa9cd4aebfef748b"}}); //Lichtgrijze Canvas RD
      let darkGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "62a3befb579e4d9f9c5c51576c8a7c25"}}); //Donkergrijze Canvas RD
      let topo_RD_EsriNL = new Basemap({portalItem: {id: "7aea6fa913a94176a1074edb40690318"}}); //Topo RD
      let open_Topo_RD_EsriNL = new Basemap({portalItem: {id: "0698b71eb7cf47898086d072e574ac32"}}); //Open Topo RD
      let stratenkaart_RD_EsriNL = new Basemap({portalItem: {id: "9fe1a753955f418fa1cbaf1c47610a47"}}); //Stratenkaart RD
      let luchtfoto_RD_EsriNL = new Basemap({portalItem: {id: "38e1a1c6ee2c421290622400d22ecf57"}}); //Luchtfoto RD
     
      let dutchBasemaps  = new LocalBasemapsSource({
        basemaps : [brtachtergrondkaart, topo_RD_EsriNL, open_Topo_RD_EsriNL, stratenkaart_RD_EsriNL, luchtfoto_RD_EsriNL, lightGrayCanvas_RD_EsriNL, darkGrayCanvas_RD_EsriNL]
      });

      let map = new Map({
        basemap: topo_RD_EsriNL
      });
     
      let parcels = new MapImageLayer({
        url: "https://basisregistraties.arcgisonline.nl/arcgis/rest/services/DKK/DKK/MapServer",
        title: "Digitale Kadastrale Kaart",
        sublayers: [{
          id: 5,
          title: "Perceel",
          popupTemplate: {
            title: "Perceel {kadastraleaanduiding}",
            <!-- content: "Perceelnummer: {perceelnummer}<br>Sectie: {sectie}<br>Kadastrale gemeente: {kadastralegemeente}<br>Kaastrale oppervlakte: {oppervlak} m2" -->
            content:[
              {
                type: "fields",
                fieldInfos: [
                  {
                    fieldName: "kadastralegemeente",
                    label: "Kadastrale gemeente"
                  },
                  {
                    fieldName: "sectie",
                    label: "Sectie"
                  },
                  {
                    fieldName: "perceelnummer",
                    label: "Perceelnummer",
                    format: {
                      digitSeparator: false
                    }
                  },
                  {
                    fieldName: "oppervlak",
                    label: "Kadastrale oppervlakte (in m2)",
                    format: {
                      digitSeparator: true,
                      places: 0
                    }
                  }
                ]
              }
            ]
          }},
          {
          id: 0, title: "Perceelnummer"
          }
        ]
      });
     
      map.add(parcels);

       let view = new MapView({
         spatialReference: 28992,
         container: "viewDiv",
         map: map,
         center: new Point({x: 155000, y: 463000, spatialReference: 28992}),
         zoom: 3
       });

      view.ui.components = [ "attribution" ];

      let aboutDlg = document.getElementById("aboutDiv");

      let aboutExpand = new Expand({
        expandIconClass: "esri-icon-lightbulb",
        expandTooltip: "Over deze applicatie",
        view: view,
        expanded: true,
        content: aboutDlg,
        group: "top-left"
      });

      let searchWidget = new Search({
        view: view,
        allPlaceholder: "Adres of Kadastraal perceel",
        includeDefaultSources: false
      });

      searchWidget.sources = [{
        locator: new Locator({ url: "https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer"}), // BAG GeocodeServer van Esri Nederland
        singleLineFieldName: "SingleLine", // Deze optie zorgt er voor dat je kunt zoeken op postcode/huisnummer combinatie, bijvoorbeeld: 4181 AE 38
        name: "Adres in Nederland",
        placeholder: "Zoek adres"
      },{
        locator: new Locator({ url: "https://geocoder.arcgisonline.nl/arcgis/rest/services/Geocoder_DKK/GeocodeServer"}), // DKK GeocodeServer van Esri Nederland
        singleLineFieldName: "SingleLine",
        name: "Kadastrale percelen in Nederland",
        placeholder: "Zoek kadastraal perceel (bijvoorbeeld RTD06 S 4403)"
      }]
      
      searchWidgetExpand = new Expand({
        expandIconClass: "esri-icon-search",
        expandTooltip: searchWidget.label,
        view: view,
        content: searchWidget,
        group: "top-left"
      });

      let basemapGallery = new BasemapGallery({view: view, source: dutchBasemaps});

      basemapGalleryExpand = new Expand({
        expandIconClass: "esri-icon-basemap", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
        expandTooltip: basemapGallery.label,
        view: view,
        content: basemapGallery,
        group: "top-left"
      });

      let layerList = new LayerList({
        view: view,
        listItemCreatedFunction: function(event){
            const item = event.item;
            item.actionsSections = [
               [
                    {
                    title: item.layer.title,
                    className: "esri-icon-description",
                    id: "information"
                    }
               ]
               ];
          }
      });

      layerList.on("trigger-action", function(event) {
        if (event.action.id === "information") {
          // If the information action is triggered, then open the item details page of the service layer.
          window.open(event.item.layer.url);
        }
      });

      layerListExpand = new Expand({
        expandIconClass: "esri-icon-layers",
        expandTooltip: layerList.label,
        view: view,
        content: layerList,
        group: "top-left"
      });

      let zoom = new Zoom({view: view});
      let homeWidget = new Home({view: view});
      let compass = new Compass({view: view});

      view.ui.add([aboutExpand, searchWidgetExpand, zoom, homeWidget, compass, basemapGalleryExpand, layerListExpand], "top-left");

      // Make sure the clicked parcel is highlighted -  code sample provided by Robert Scheitlin, GISP on GeoNet
      view.popup.watch('selectedFeature', function(gra){
        if(gra){
          view.graphics.removeAll();
          let h = view.highlightOptions;
          gra.symbol = {
            type: "simple-fill", // autocasts as new SimpleFillSymbol()
            color: [h.color.r,h.color.g, h.color.b, h.fillOpacity],
            outline: {
              // autocasts as new SimpleLineSymbol()
              color: [h.color.r,h.color.g, h.color.b, h.color.a],
              width: 1
            }
          };
          view.graphics.add(gra);
        }else{
          view.graphics.removeAll();
        }
      });
     
      view.popup.watch('visible', function(vis){
        if(!vis){
          view.graphics.removeAll();
        }
      });

    });
  </script>
</head>
<body>
  <div id="header">
      <div id="headertext" class="stretch">Kadastrale Percelen in Nederland</div>
  </div>
  <div id="viewDiv"></div>

  <div class="dialogDiv" id="aboutDiv" style="display:none">
    <div class="dialogHeader">Percelen Zoeken</div>
    <table>
      <tr>
        <td>
          <h3>DKK Geocoder</h3>
          <p>In oktober 2019 heeft <b>Esri Nederland</b> een nieuwe service gelanceerd voor het zoeken naar kadastrale percelen: de <a href="https://www.arcgis.com/home/item.html?id=6d81906aa15243e19e1bde4cd4bff69d" target="blank">DKK Geocoder</a>.</p>
          <p>Meer informatie over DKK Geocoder is te vinden in <a href="https://community.esri.com/community/arcgis-content-esri-nederland/blog/2019/10/03/douze-points-voor-perceel-rtd06-s-4403-onze-nieuwe-dkk-geocoder" target="blank">deze blog</a>.</p>
          <h3>Uitproberen</h3>
          <p>Hier kun je deze nieuwe zoekservice uitproberen:</p>
          <p><div class="esri-widget--button"><span title="Klik op de zoekbutton hiernaast en zoek naar een perceel, bijvoorbeeld RTD06 S 4403." class="esri-icon-search"></span></div>Klik op de zoekbutton hiernaast en zoek naar een perceel, bijvoorbeeld <b>RTD06 S 4403</b>.</p>
          <p>Deze applicatie is samengesteld door:<br><a href="https://www.tensing.com/" target="blank">Tensing GIS Consultancy B.V.</a></p>
        </td>
      </tr>
    </table>
  </div>
</body>
</html>

Outcomes