EPolle_TensingInternational

Aan de slag met ArcGIS JavaScript - Meerdere zoekbronnen

Blog Post created by EPolle_TensingInternational Champion on Jun 2, 2019

Search Widget

 

Aan een Search widget kun je één of meerdere zoekbronnen toevoegen. In de web mapping applicatie hieronder combineren we de twee zoekbronnen die we in eerdere oefeningen afzonderlijk hebben behandeld.

 

  • Voor de oefening Adres zoeken hebben we een Locator, namelijk de BAG Geocoder van Esri Nederland, als zoekbron gebruikt;
  • Met de oefening Feature zoeken laten we zien hoe je een laag kunt doorzoeken op één of meerdere kolommen met attribuutwaarden.

 

In de code hieronder zie je hoe we beide bronnen aan één Search widget toevoegen, zodat de eindgebruiker zowel op een adres als op een record uit een FeatureLayer kan zoeken.

 

Klik hier om de gecombineerde zoekbalk 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 - Meerdere zoekbronnen</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </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/Map",
        "esri/geometry/Point",
        "esri/views/MapView",
          "esri/layers/FeatureLayer",
          "esri/widgets/Search",
          "esri/tasks/Locator"
      ], function(Map, Point, MapView, FeatureLayer, Search, Locator) {

      var map = new Map({
        basemap: {
          portalItem: {
            id: "7aea6fa913a94176a1074edb40690318" // 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
       });

      var featureLayerGemeenten = new FeatureLayer({
        url: "https://services.arcgis.com/nSZVuSZjHpEZZbRo/arcgis/rest/services/Bestuurlijke_Grenzen_Gemeenten_2019/FeatureServer/0",
      popupTemplate: {
          // autocasts as new PopupTemplate()
          title: "Gemeente {Gemeentenaam} </br>CBS Code: {GM_Code}",
          overwriteActions: true
        }
      });

      var searchWidget = new Search({
        view: view,
          allPlaceholder: "Gemeente of Adres",
        sources: [
          {
          layer: featureLayerGemeenten,
          searchFields: ["Gemeentenaam", "GM_Code"],
          suggestionTemplate: "{Gemeentenaam} ({GM_Code})",
          exactMatch: false,
          outFields: ["Gemeentenaam", "GM_Code"],
          name: "Gemeente in Nederland (2019)",
          placeholder: "bijvoorbeeld: Vijfheerenlanden"
          },
            {
            locator: new Locator({ url: "https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer"}), // GeocodeServer van Esri Nederland
           singleLineFieldName: "SingleLine", // Deze optie zorgt er voor dat je kunt zoeken op postcode/huisnummer combinatie, bijvoorbeeld: 4181 AE 38
           placeholder: "Adres zoeken", // "Find address or place" voor de English locale, "Adres of plaats zoeken" voor de Nederlandse locale
           name: "Adres in Nederland"
            }
          ],
        includeDefaultSources: false
      });
      
       view.ui.add([searchWidget], "top-right");
    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

Outcomes