Getting started with ArcGIS JavaScript - DKK Geocoder

Egge-Jan_Pollé

<\/HEAD>

<\/A>https:\/\/community.esri.com\/people\/EPolle_TensingInternational\/blog\/2019\/06\/02\/aan-de-slag-met-arcgis-javascript-inleiding<\/A><\/P>

<\/P>

DKK Geocoder<\/H1><\/P>In October 2019, Esri Nederland<\/STRONG> launched a new service for searching cadastral parcels: the DKK Geocoder<\/A>. DKK stands for Digitale Kadastrale Kaart.<\/P>

<\/P>

In this exercise, we use this new Locator in

the ArcGIS API for JavaScript<\/A>, version 4.13 (which was also released now in October 2019).<\/P>

<\/P>

So if you use the search function in this web mapping application, you can not only search by addresses but also by cadastral parcels in the Netherlands: <\/P>

Getting started with ArcGIS JavaScript - DKK Geocoder<\/A> <\/P>

<\/P>

More information about this new service from Esri Nederland can be found in this blog

https:\/\/community.esri.com\/community\/arcgis-content-esri-nederland\/blog\/2019\/10\/03\/douze-points-voor-perceel-rtd06-s-4403-onze-nieuwe-dkk-geocoder<\/A> by Jeske van der Velden<\u200c<\u200c>\/<\u200c>\/<\u200c>\/<\u200c>\/<\u200c>\/<\u200c>\/<\u200c>\/<\u200c>\/<\u200c>\/<\u200c>\/<\u200c>\/<\u200c>\/<\u200c>\/<\u200c>\/<\u200c>\/<\u200c>\/<\u200c>">
Jeske van der Velden 0;<\/SPAN>\n left<\/SPAN>:<\/SPAN> 0;<\/SPAN>\n padding<\/SPAN>:<\/SPAN> 0;<\/SPAN>\n margin<\/SPAN>:<\/SPAN> 0;<\/SPAN>\n }<\/SPAN>\n td<\/SPAN> {<\/SPAN>\n padding<\/SPAN>:<\/SPAN> 15px;<\/SPAN>\n }<\/SPAN>\n .dialogDiv<\/SPAN> {<\/SPAN>\n background-color<\/SPAN>:<\/SPAN> white;<\/SPAN>\n width<\/SPAN>:<\/SPAN> 480px;<\/SPAN>\n }<\/SPAN>\n .dialogHeader<\/SPAN> {<\/SPAN>\n color<\/SPAN>:<\/SPAN> white;<\/SPAN>\n font-weight<\/SPAN>:<\/SPAN> bolder;<\/SPAN>\n width<\/SPAN>:<\/SPAN> auto;<\/SPAN>\n background-color<\/SPAN>:<\/SPAN> #113395;<\/SPAN>\n padding<\/SPAN>:<\/SPAN> 5px;<\/SPAN>\n }<\/Span>\n .esri-basemap-gallery__item-thumbnail<\/Span> {<\/Span>\n width<\/Span>:<\/Span> auto;<\/Span>\n }<\/Span>\n <\/<\/Span>style<\/Span>><\/Span><\/Span><\/Span>\n <<\/Span>script<\/Span>><\/Span><\/span> \n require([\n \"esri/Map\",\n \"esri/widgets/Zoom\",\n \"esri/widgets/Home\",\n \"esri/widgets/Compass\",\n \"esri/geometry/Point\",\n \"esri/views/MapView\",\n \"esri/layers/WMTSLayer\",\n \"esri/widgets/Search\",\n \"esri/tasks/Locator\",\n \"esri/Basemap\",\n \"esri/widgets/BasemapGallery\",\n \"esri/widgets/BasemapGallery/support/LocalBasemapsSource\",\n \"esri/widgets/Expand\",\n \"esri/widgets/LayerList\",\n \"esri/layers/MapImageLayer\",\n \"dojo/domReady!\"\n ], function(Map, Zoom, Home, Compass, Point, MapView, WMTSLayer, Search, Locator, Basemap, BasemapGallery, LocalBasemapsSource, Expand, LayerList, MapImageLayer) {\n
document.getElementById(\\"aboutDiv\\").style.display = \\\"block\\\ // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
expandTooltip: basemapGallery.label,
view: view,
content: basemapGallery,
group: "top-left"
});

let layerList = new LayerList({
view: view,
listItemCreatedFunction: function(event){
const item = event.item;
item.actionsSections = [
[
{
title: item.layer.title,
className: "esri-icon-description",
id: "information"
}
]
];
}
});

layerList.on("trigger-action", function(event) {
if (event.action.id === "information") {
// If the information action is triggered, then open the item details page of the service layer.
window.open(event.item.layer.url);
}
});

layerListExpand = new Expand({
expandIconClass: "esri-icon-layers",
expandTooltip: layerList.label,
view: view,
content: layerList,
group: "top-left"
});

let zoom = new Zoom({view: view});
let homeWidget = new Home({view: view});
let compass = new Compass({view: view});

view.ui.add([aboutExpand, searchWidgetExpand, zoom, homeWidget, compass, basemapGalleryExpand, layerListExpand], "top-left");

// Make sure the clicked parcel is highlighted - code sample provided by Robert Scheitlin, GISP on GeoNet
view.popup.watch('selectedFeature', function(gra){
if(gra){
view.graphics.removeAll();
let h = view.highlightOptions;
gra.symbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [h.color.r,h.color.g, h.color.b, h.fillOpacity],
outline: {
// autocasts as new SimpleLineSymbol()
color: [h.color.r,h.color.g, h.color.b, h.color.a],
width: 1
}
};
view.graphics.add(gra);
}else{
view.graphics.removeAll();
}
});

view.popup.watch('visible', function(vis){
if(!vis){
view.graphics.removeAll();
}
});

});
</script>
</head>
<body>
<div id="header">
<div id="headertext" class="stretch">Cadastral Parcels in the Netherlands</div>
</div>
<div id="viewDiv"></div>


Search Parcels



DKK Geocoder
In October 2019, Esri Nederland launched a new service for searching cadastral parcels: the DKK Geocoder.
More information about DKK Geocoder can be found in this blog.
Try it out
Here you can try out this new search service:<\/p><\/</SPAN><\/SPAN>
<\/p><\/</SPAN><\/SPAN><\/div class="esri-widget--button"<\/</SPAN>><\/</SPAN><\/SPAN><\/span title="Click the search button next to it and search for a parcel, for example RTD06 S 4403."<\/</SPAN> class="esri-icon-search"<\/</SPAN>><\/</Span><\/span><\/span><\/span><\/span><\/div><\/span><\/span>Click the search button next to it and search for a parcel, for example <b><\/span><\/span>RTD06 S 4403<\/b><\/span><\/span>.<\/p><\/span><\/span>
<\/p><\/span><\/span>This application is composed by:<br><\/span><\/span><a href="https://www.tensing.com/" target="blank"<\/>Tensing GIS Consultancy B.V.