Aan de slag met ArcGIS JavaScript - Meerdere zoekbronnen

Egge-Jan_Pollé · ‎06-02-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 https://community.esri.com/people/EPolle_TensingInternational/blog/2019/05/13/aan-de-slag-met-arcgis... hebben we een Locator, namelijk de BAG Geocoder van Esri Nederland, als zoekbron gebruikt;
Met de oefening https://community.esri.com/people/EPolle_TensingInternational/blog/2019/05/31/aan-de-slag-met-arcgis... 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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍