Aan de slag met ArcGIS JavaScript - Adres zoeken

Egge-Jan_Pollé · ‎05-13-2019

https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/02/aan-de-slag-met-arcgis...

Search Widget

In deze oefening voegen we een zoekbalk toe aan de Nederlandse basiskaart die we eerder gemaakt hebben.

Hiervoor voegen we een Search widget toe aan onze applicatie. Maar let op: in onze app zit alleen een kaart van Nederland terwijl de zoekbalk standaard gebruik maakt van de Esri World Geocoding Service.

Om alleen Nederlandse adressen te kunnen zoeken en vinden:

zetten we de standaard zoekbron uit (includeDefaultSources: false)
voegen we een nieuwe Locator toe: De BAG Geocoder, een Locator van Esri Nederland, gebaseerd op de officiële Nederlandse BAG (url: https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer)

De broncode staat hieronder. Klik hier om de applicatie in actie te zien.

Vervolgoefening:

https://community.esri.com/people/EPolle_TensingInternational/blog/2019/05/22/aan-de-slag-met-arcgis...

<!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 - Adres zoeken</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/widgets/Search",
		"esri/tasks/Locator"
      ], function(Map, Point, MapView, 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 searchWidget = new Search({
        view: view,
        includeDefaultSources: false
      });

      searchWidget.sources = [{
          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: searchWidget.allPlaceholder // "Find address or place" voor de English locale, "Adres of plaats zoeken" voor de Nederlandse locale
      }]
	  
	  view.ui.add([searchWidget], "top-right");
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

SergeDe_Backer · ‎06-06-2019

Hoi Egge-Jan,

Ik heb een kaart waar ik de GRB basiskaart van Vlaanderen op plaats waar de percelen zichtbaar zijn. Mijn bedoeling is ook om wanneer ik een adres ingeef bv:Kerkstraat 8, 2970, Schilde, 's-Gravenwezel, BEL dat ik dan ook op het perceel terecht kom...echter lukt me dit niet. De aanduiding gebeurt niet op het perceel, maar op de straat terwijl in jouw voorbeeld het wel degelijk op het perceel terecht komt. Enig idee waar ik moet zoeken om dit op te lossen? Ligt dit aan de kaart of aan de geocoder?

EDIT

Ik zou deze locator url moeten gebruiken: http://loc.api.geopunt.be/geolocation/location?c=5&q=kerkstr

De c is voor het aantal suggesties en de q voor de zoekterm. Ben alleen nog aan het zoeken hoe deze te configureren..

Alvast bedankt!

Dit is mijn code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Search Widget - 4.9</title>
<style>
html,
body{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#viewDiv {
height: calc(100% - 40px);
}
#header {
height: 40px;
width: 100%;
background-color: blue;
}
#searchDiv {
float: right;
margin-right: 10px;
margin-top: 4px;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<script>
var map, view, layer;
require([
"esri/tasks/Locator",
"esri/Map",
"esri/views/MapView",
"esri/widgets/Search",
"esri/widgets/Home",
"esri/layers/WMSLayer"
], function (Locator, Map, MapView, Search, Home, WMSLayer) {
layer = new WMSLayer({
url: 'https://geoservices.informatievlaanderen.be/raadpleegdiensten/GRB-basiskaart/wms'
});
var locatorTask = new Locator({
url:
"https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
});
map = new Map({
basemap: "topo-vector" //Dit is je basismap om in te lezen
});
map.add(layer); //Hier is de WMS layer die je erop "plakt"
var homeWidget = new Home({
view: view
});
view = new MapView({
map: map,
zoom: 8,
center: [4.402771, 51.260197], //lon, lat
container: "viewDiv"
});

var search = new Search({
view: view,
//Onderste deel is om enkel BE adressen uit te halen --> Door dit te enablen lukt de placeholder niet meer.
includeDefaultSources: false,
locationEnabled: true,
sources: [{
locator: new Locator({ url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }),
countryCode: "BE",
categories: ["Address", "Postal"],
singleLineFieldName: "SingleLine",
localSearchOptions: {
minScale: 300000,
distance: 50000
}
}]
});
//Placeholder van je zoekbalk
search.watch('activeSource', function (evt) {
evt.placeholder = "Gelieve een straat in te geven ";
});
//Wanneer er gezocht moet worden kan je hier de waarde uithalen
search.on("select-result", function (event) {
// event is the event handle returned after the event fires.
console.log(event.target.selectedResult.name);
$("#lblSearchTerm").val(event.target.searchTerm);
$admin.getKadastrale(event.target.selectedResult.name);
});
view.ui.add([search], "top-right");
view.ui.add(homeWidget, "top-left");

/*******************************************************************
* This click event sets generic content on the popup not tied to
* a layer, graphic, or popupTemplate. The location of the point is
* used as input to a reverse geocode method and the resulting
* address is printed to the popup content.
*******************************************************************/
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;
$admin.getKadastrale(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" style="height:500px"></div>
</body>

SergeDe_Backer · ‎06-06-2019

Ondertussen gevonden door te werken met een SearchSource. Hier kan je de Belgische geolocator gebruiken.