Getting started with ArcGIS JavaScript - Search address

Egge-Jan_Pollé

< / A >< / P >< P >< A href = 28 https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/02/aan-de-slag-met-arcgis-javascript-inleiding 29 target = 28 _blank 29 > https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/02/aan-de-slag-met-arcgis-javascript-inleiding < / A >< / P >< P >< / P >< H2 id = "toc-hId-1824909918 " id = "toc-hId-1824909918 " > Search Widget < / H2 >< P >< / P >< P > In this exercise, we add a search bar to the < A _jive_internal = "true " href = " https://community.esri.com/people/EPolle_TensingInternational/blog/2019/05/11/aan-de-slag-met-arcgis-javascript-nederlandse-basiskaart " target = " _blank " > Dutch base map that we created earlier < / A > . < / P >< P >< / P >< P > For this, we add a < A class = " link-titled " href = " https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html " title = " https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html " rel = " nofollow noopener noreferrer " target = " _blank " > Search < / A > widget to our application. < STRONG > But note : < / STRONG > in our app there is only a map of the Netherlands while the search bar by default uses the < A href = " https://developers.arcgis.com/rest/geocode/api-reference/overview-world-geocoding-service.htm " rel = " nofollow noopener noreferrer " target = " _blank " > Esri World Geocoding Service < / A > . < / P >< P >< / P >< P > To be able to search and find only Dutch addresses : < / P >< UL >< LI > we disable the default search source ( < SPAN style = " font-family: courier new, courier, monospace ; " > includeDefaultSources: false < / SPAN > ) < / LI >< LI > we add a new < A class = " link-titled " href = " https://developers.arcgis.com/javascript/latest/api-reference/esri-tasks-Locator.html " title = " https://developers.arcgis.com/javascript/latest/api-reference/esri-tasks-Locator.html " rel = " nofollow noopener noreferrer " target = " _blank " > Locator < / A > : & nbsp ; < SPAN class = " "> The < A href = " https://www.arcgis.com/home/item.html?id=7cd12a63fd5047a2994f20c851f283dd " rel = " nofollow noopener noreferrer " target = " _blank " > BAG Geocoder < / A > , & nbsp ; a < STRONG > Locator from Esri Netherlands, based on the official Dutch BAG (url: < A href = token">,
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 from Esri Nederland
singleLineFieldName: "SingleLine", // This option allows you to search by postal code/house number combination, for example: 4181 AE 38
placeholder: searchWidget.allPlaceholder // "Find address or place" for the English locale, "Adres of plaats zoeken" for the Dutch locale
}"]

view">.ui">add">([ </ span >searchWidget]</ span >,< spanclass= " stringtoken ">"top-right" </ span >)< spanclass= " punctuationtoken ">;</ span >
< spanclass= " punctuationtoken ">} </ span >< spanclass= " punctuationtoken ">) </ span >< spanclass= " punctuationtoken ">; </ span >
< spanclass= " tokentag ">< spanclass= " tokentag ">< spanclass= " punctuationtoken "></ </ span >script </ span >< spanclass= " punctuationtoken ">> </ span ></ span ></ span >
< spanclass= " tokentag ">< spanclass= " tokentag ">< spanclass= " punctuationtoken "></ </ span >head </ span >< spanclass= " punctuationtoken ">> </ span ></ span >
< spanclass= " tokentag ">< spanclass= " tokentag ">< spanclass= " punctuationtoken ">< </ span >body </ span >< spanclass= " punctuationtoken ">> </ span ></ span >
< spanclass= " tokentag ">< spanclass= " tokentag ">< spanclass= " punctuationtoken ">< </ span >div </ span > < sp anclas s =" attr-nam e toke n" >id< / sp an > ="viewDiv"< / sp an >< sp anclas s =" punctu ation toke n" >>< / sp an >< / sp an >< / div >< / sp an >
< sp anclas s =" tok ent ag">< sp anclas s =" tok ent ag">< sp anclas s =" punctu ation toke n" ></ body >< / sp an >< / sp an >
< sp anclas s =" tok ent ag">< sp anclas s =" tok ent ag">< sp anclas s =" punctu ation toke n" ></ html >< / sp an >< ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍< sp anclas s =" line-numb ers-row s">< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< sp an >< ‍/< / sp an >< span><‍/<\/spAn><<<EmoJi_25>>/<\/spAn><<<EmoJi_26>>/<\/spAn><<<EmoJi_27>>/<\/spAn><<<EmoJi_28>>/<\/spAn><<<EmoJi_29>>/<\/spAn><<<EmoJi_30>>/<\/spAn><<<EmoJi_31>>/<\/spAn><<<EmoJi_32>>/<\/spAn><<<EmoJi_33>>/<\/spAn><<<EmoJi_34>>/<\/spAn><<<EmoJi_35>>/<\/spAn><<<EmoJi_36>>/<\/spAn><<<EmoJi_37>>/<\/spAn><<<EmoJi_38>>/<\/spAn><<<EmoJi_39>>/<\/spAn><<<EmoJi_40>>/<\/spAn><<<EmoJi_41>>/<\/spAn><<<EmoJi_42>>/<\/spAn><<<EmoJi_43>>/<\/spAn><<<EmoJi_44>>/<\/spAn><<<EmoJi_45>>/<\/spAn><<<EmoJi_46>>/<\/spAn><<<EmoJi_47>>/<\/spAn><<<EmoJi_48>>/<\/spAn><<<EmoJi_49>>/<\/spAn><<<EmoJi_50>>/<\/spAn><<<EmoJi_51>>/<\/spAn><<<EmoJi_52>>/<\/spAn}><<<<emojI53>>>/<>Span>{<<<emojI54>>>/<>Span>{<<<emojI55>>>/<>Span>{<<<emojI56>>>/<>Span>{<<<emojI57>>>/<>Span>{<<<emojI58>>>/<>Span>{<<<emojI59>>>/<>Span>{<<<emojI60>>>/<>Span>{<<<emojI61>>>/<>Span>{<<<emojI62>>>/<>Span>{<<<emojI63>>>/<>Span>{<<<emojI64>>>/<>Span>{<<<emojI65>>>/<>Span>{<<<emojI66>>>/<>Span>{<<<emojI67>>>/<>Span>{<<<emojI68>>>/<>Span>

SergeDe_Backer

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>