Aan de slag met ArcGIS JavaScript - Meerdere zoekbronnen

151
0
06-02-2019 05:51 AM
Egge-JanPollé1
MVP Regular Contributor
0 0 151

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.

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
About the Author
GIS Consultant at Tensing GIS Consultancy B.V.