Getting started with ArcGIS JavaScript - Reverse geocoding

Egge-Jan_Pollé

<\/HEAD>

<\/A>

• &#1;&#2; target="_self">Introduction<\/LI>

Data and services from Esri Nederland<\/A><\/LI>Explanation<\/A><\/LI>Source code<\/A><\/LI><\/UL><\/P>

Introduction<\/H2><\/P>In this series of exercises, we explore the possibilities of the ArcGIS API for JavaScript <\/A>using data and services offered by Esri Nederland<\/A> via ArcGIS Online<\/A>.<\/P>

<\/P>

Reverse geocoding is retrieving an address based on a pair of coordinates, in this case by clicking somewhere on the map.<\/P>

<\/P>

Data and services from Esri Nederland<\/H2><\/P>Base map:<\/STRONG> The Topo RD base map<\/A> is a Web Map<\/STRONG> from Esri Nederland with the id 7aea6fa913a94176a1074edb40690318<\/A>. We use this map as a basemap<\/SPAN><\/LI>Geocoder<\/SPAN>: <\/ 5px solid gold<SPAN class="punctuation token">;<\/SPAN>\n\t font-family<\/SPAN>:<\/SPAN> sans-serif;<\/SPAN>\n\t font-size<\/SPAN>:<\/SPAN> 1.2em;<\/SPAN>\n }<\/SPAN>\n <\/<\/SPAN>style<\/SPAN>><\/SPAN><\/SPAN><\/SPAN>\n\n <\/<\/SPAN>link<\/SPAN> rel<\/SPAN>=<\/SPAN>"<\/SPAN>stylesheet"<\/SPAN><\/SPAN> href<\/SPAN>=<\/SPAN>"<\/SPAN>https:\/\/js.arcgis.com\/4.11\/esri\/css\/main.css"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN>\n <\/<\/SPAN>script<\/SPAN>><\/SPAN><\/SPAN>\n\n \n require([\n "esri/tasks/Locator",\n "esri/Map",\n "esri/geometry/Point",\n "esri/views/MapView"\n ], function(Locator, Map, Point, MapView) {\n\n // Set up a locator with the BAG Geocoder from Esri Netherlands\n var locatorTask = new Locator({\n url:\n "https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer"\n });\n\n var map = new Map({\n basemap: {\n portalItem: {\n id: "7aea6fa913a94176a1074edb40690318" // Basemap from Esri Netherlands: Topo RD\n }\n }\n });\n \n var rdOrigin = new Point({\n x: 155000,\n y: 463000,\n spatialReference: 28992\n });\n \n var view = new MapView({\n spatialReference: 28992, \n container: "viewDiv",\n map: map,\n center: rdOrigin,\n zoom: 3\n });\n \n // Add the div with the instruction to the map screen\n view.ui.add("instruction", "bottom-left");\n\n /*******************************************************************************\n * By clicking on the map, the popup associated with the view is set.\n * The clicked point is used as input for the reverse geocoder.\n * The found address and the found coordinates are shown in the popup.\n ******************************************************************************/\n view.popup.autoOpenEnabled = false;\n view.on("click", function(event) {\n // Retrieve the coordinates of the clicked point\n var rdx = Math.round(event.mapPoint.x);\n var rdy = Math.round(event.mapPoint.y);\n \n view.popup.open({\n // Show the found RD coordinates in the title of the popup. The coordinates are \n // rounded to whole meters and a dot is placed between the thousands separators.\n title: "RD Coordinates: X = " + rdx.toLocaleString() + " / Y = " + rdy.toLocaleString(),\n location: event.mapPoint // Place the popup at the clicked location\n });\n \n // Show the popup
// Perform reverse geocoding for the clicked location
locatorTask
.locationToAddress(event.mapPoint)
.then(function(response) {
// Show the found address in the popup
view.popup.content = response.address;
})
.catch(function(error) {
// Show an error message if no address is found
view.popup.content = "No address was found for this location";
});
});
});





Click anywhere on the map to retrieve an address


‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<<<|vq_lbr_audio_111770|><|vq_lbr_audio_115740|>-head>