Find places
Learn how to search for businesses, POIs, and geographic locations with the geocoding service.
Place finding is the process of searching for a place name or POI to find its address and location. You can use the Geocoding service to find places such as coffee shops, gas stations, or restaurants for any geographic location around the world. You can search for places by name or by using categories. You can search near a location or you can search globally.
In this tutorial, you use a Locator
to access the Geocoding service and find places by place category. Pop-ups are used to display the place name and address.
Prerequisites
You need a free ArcGIS developer account to access your dashboard and API keys. The API key must be scoped to access the services used in this tutorial.
Steps
Create a new pen
- To get started, either complete the Display a map tutorial or .
Set the API key
To access ArcGIS services, you need an API key.
Go to your dashboard to get an API key.
In CodePen, set the
apiKey
to your key, so it can be used to access basemap layer and location services.Change line esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-topographic" //Basemap layer service });
Add modules
In the
require
statement, add theLocator
andGraphic
modules.The ArcGIS API for JavaScript uses AMD modules. The
require
function is used to load modules so they can be used in the mainfunction
. It's important to keep the module references and function parameters in the same order.Add line. Add line. Change line <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find places</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/Locator", "esri/Graphic" ], function(esriConfig,Map, MapView, Locator, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["Choose a place type...", "Parks and Outdoors", "Coffee shop", "Gas station", "Food", "Hotel"]; const select = document.createElement("select",""); select.setAttribute("class", "esri-widget esri-select"); select.setAttribute("style", "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em"); places.forEach(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locator = new Locator({ url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }); // Find places and add them to the map function findPlaces(category, pt) { locator.addressToLocations({ location: pt, categories: [category], maxLocations: 25, outFields: ["Place_addr", "PlaceName"] }) .then(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(result){ view.graphics.add( new Graphic({ attributes: result.attributes, // Data attributes returned geometry: result.location, // Point returned symbol: { type: "simple-marker", color: "#000000", size: "12px", outline: { color: "#ffffff", width: "2px" } }, popupTemplate: { title: "{PlaceName}", // Data attribute names content: "{Place_addr}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Update the map
A streets basemap layer is typically used in geocoding applications. Update the basemap
property to use the arcgis-navigation
basemap layer and change the position of the map to center on Tromso.
Update the
basemap
property fromarcgis-topographic
toarcgis-navigation
.Change line <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find places</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/Locator", "esri/Graphic" ], function(esriConfig,Map, MapView, Locator, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["Choose a place type...", "Parks and Outdoors", "Coffee shop", "Gas station", "Food", "Hotel"]; const select = document.createElement("select",""); select.setAttribute("class", "esri-widget esri-select"); select.setAttribute("style", "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em"); places.forEach(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locator = new Locator({ url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }); // Find places and add them to the map function findPlaces(category, pt) { locator.addressToLocations({ location: pt, categories: [category], maxLocations: 25, outFields: ["Place_addr", "PlaceName"] }) .then(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(result){ view.graphics.add( new Graphic({ attributes: result.attributes, // Data attributes returned geometry: result.location, // Point returned symbol: { type: "simple-marker", color: "#000000", size: "12px", outline: { color: "#ffffff", width: "2px" } }, popupTemplate: { title: "{PlaceName}", // Data attribute names content: "{Place_addr}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Update the
center
property to[18.9553, 69.6492]
.Change line <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find places</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/Locator", "esri/Graphic" ], function(esriConfig,Map, MapView, Locator, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["Choose a place type...", "Parks and Outdoors", "Coffee shop", "Gas station", "Food", "Hotel"]; const select = document.createElement("select",""); select.setAttribute("class", "esri-widget esri-select"); select.setAttribute("style", "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em"); places.forEach(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locator = new Locator({ url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }); // Find places and add them to the map function findPlaces(category, pt) { locator.addressToLocations({ location: pt, categories: [category], maxLocations: 25, outFields: ["Place_addr", "PlaceName"] }) .then(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(result){ view.graphics.add( new Graphic({ attributes: result.attributes, // Data attributes returned geometry: result.location, // Point returned symbol: { type: "simple-marker", color: "#000000", size: "12px", outline: { color: "#ffffff", width: "2px" } }, popupTemplate: { title: "{PlaceName}", // Data attribute names content: "{Place_addr}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Create a place category selector
You filter place search results by providing a location and category. Places can be filtered by categories such as coffee shop, gas station, and hotels. Use an HTML select
element to provide a list of several categories from which to choose.
Create an array of
places
for the categories that will be used to make a selection.Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find places</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/Locator", "esri/Graphic" ], function(esriConfig,Map, MapView, Locator, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["Choose a place type...", "Parks and Outdoors", "Coffee shop", "Gas station", "Food", "Hotel"]; const select = document.createElement("select",""); select.setAttribute("class", "esri-widget esri-select"); select.setAttribute("style", "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em"); places.forEach(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locator = new Locator({ url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }); // Find places and add them to the map function findPlaces(category, pt) { locator.addressToLocations({ location: pt, categories: [category], maxLocations: 25, outFields: ["Place_addr", "PlaceName"] }) .then(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(result){ view.graphics.add( new Graphic({ attributes: result.attributes, // Data attributes returned geometry: result.location, // Point returned symbol: { type: "simple-marker", color: "#000000", size: "12px", outline: { color: "#ffffff", width: "2px" } }, popupTemplate: { title: "{PlaceName}", // Data attribute names content: "{Place_addr}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Create a parent
select
element for the search categories and assign some styles.Add line. Add line. Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find places</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/Locator", "esri/Graphic" ], function(esriConfig,Map, MapView, Locator, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["Choose a place type...", "Parks and Outdoors", "Coffee shop", "Gas station", "Food", "Hotel"]; const select = document.createElement("select",""); select.setAttribute("class", "esri-widget esri-select"); select.setAttribute("style", "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em"); places.forEach(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locator = new Locator({ url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }); // Find places and add them to the map function findPlaces(category, pt) { locator.addressToLocations({ location: pt, categories: [category], maxLocations: 25, outFields: ["Place_addr", "PlaceName"] }) .then(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(result){ view.graphics.add( new Graphic({ attributes: result.attributes, // Data attributes returned geometry: result.location, // Point returned symbol: { type: "simple-marker", color: "#000000", size: "12px", outline: { color: "#ffffff", width: "2px" } }, popupTemplate: { title: "{PlaceName}", // Data attribute names content: "{Place_addr}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Create an
option
element for each category and add it to theselect
element.Add line. Add line. Add line. Add line. Add line. Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find places</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/Locator", "esri/Graphic" ], function(esriConfig,Map, MapView, Locator, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["Choose a place type...", "Parks and Outdoors", "Coffee shop", "Gas station", "Food", "Hotel"]; const select = document.createElement("select",""); select.setAttribute("class", "esri-widget esri-select"); select.setAttribute("style", "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em"); places.forEach(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locator = new Locator({ url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }); // Find places and add them to the map function findPlaces(category, pt) { locator.addressToLocations({ location: pt, categories: [category], maxLocations: 25, outFields: ["Place_addr", "PlaceName"] }) .then(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(result){ view.graphics.add( new Graphic({ attributes: result.attributes, // Data attributes returned geometry: result.location, // Point returned symbol: { type: "simple-marker", color: "#000000", size: "12px", outline: { color: "#ffffff", width: "2px" } }, popupTemplate: { title: "{PlaceName}", // Data attribute names content: "{Place_addr}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Add the
select
element to thetop-right
corner of the view.Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find places</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/Locator", "esri/Graphic" ], function(esriConfig,Map, MapView, Locator, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["Choose a place type...", "Parks and Outdoors", "Coffee shop", "Gas station", "Food", "Hotel"]; const select = document.createElement("select",""); select.setAttribute("class", "esri-widget esri-select"); select.setAttribute("style", "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em"); places.forEach(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locator = new Locator({ url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }); // Find places and add them to the map function findPlaces(category, pt) { locator.addressToLocations({ location: pt, categories: [category], maxLocations: 25, outFields: ["Place_addr", "PlaceName"] }) .then(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(result){ view.graphics.add( new Graphic({ attributes: result.attributes, // Data attributes returned geometry: result.location, // Point returned symbol: { type: "simple-marker", color: "#000000", size: "12px", outline: { color: "#ffffff", width: "2px" } }, popupTemplate: { title: "{PlaceName}", // Data attribute names content: "{Place_addr}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Create a locator
You can use a Locator
to access the Geocoding service.
Create a
Locator
and set itsurl
property to the URL for the Geocoding service.Add line. Add line. Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find places</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/Locator", "esri/Graphic" ], function(esriConfig,Map, MapView, Locator, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["Choose a place type...", "Parks and Outdoors", "Coffee shop", "Gas station", "Food", "Hotel"]; const select = document.createElement("select",""); select.setAttribute("class", "esri-widget esri-select"); select.setAttribute("style", "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em"); places.forEach(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locator = new Locator({ url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }); // Find places and add them to the map function findPlaces(category, pt) { locator.addressToLocations({ location: pt, categories: [category], maxLocations: 25, outFields: ["Place_addr", "PlaceName"] }) .then(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(result){ view.graphics.add( new Graphic({ attributes: result.attributes, // Data attributes returned geometry: result.location, // Point returned symbol: { type: "simple-marker", color: "#000000", size: "12px", outline: { color: "#ffffff", width: "2px" } }, popupTemplate: { title: "{PlaceName}", // Data attribute names content: "{Place_addr}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Search for places
To find places, you use the Locator
addressToLocations
function. Performing a local search based on a category requires a location from which to search and a category name. The function sends a request to the Geocoding service and the service returns place candidates with a name, address and location information. Use the function to perform a search and add the results to the map as graphics.
Create a
findPlaces
function and calladdressToLocations
. Set thelocation
,categories
andoutFields
properties.Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find places</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/Locator", "esri/Graphic" ], function(esriConfig,Map, MapView, Locator, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["Choose a place type...", "Parks and Outdoors", "Coffee shop", "Gas station", "Food", "Hotel"]; const select = document.createElement("select",""); select.setAttribute("class", "esri-widget esri-select"); select.setAttribute("style", "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em"); places.forEach(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locator = new Locator({ url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }); // Find places and add them to the map function findPlaces(category, pt) { locator.addressToLocations({ location: pt, categories: [category], maxLocations: 25, outFields: ["Place_addr", "PlaceName"] }) .then(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(result){ view.graphics.add( new Graphic({ attributes: result.attributes, // Data attributes returned geometry: result.location, // Point returned symbol: { type: "simple-marker", color: "#000000", size: "12px", outline: { color: "#ffffff", width: "2px" } }, popupTemplate: { title: "{PlaceName}", // Data attribute names content: "{Place_addr}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Clear the view of existing pop-ups and graphics.
Add line. Add line. Add line. Add line. Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find places</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/Locator", "esri/Graphic" ], function(esriConfig,Map, MapView, Locator, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["Choose a place type...", "Parks and Outdoors", "Coffee shop", "Gas station", "Food", "Hotel"]; const select = document.createElement("select",""); select.setAttribute("class", "esri-widget esri-select"); select.setAttribute("style", "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em"); places.forEach(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locator = new Locator({ url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }); // Find places and add them to the map function findPlaces(category, pt) { locator.addressToLocations({ location: pt, categories: [category], maxLocations: 25, outFields: ["Place_addr", "PlaceName"] }) .then(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(result){ view.graphics.add( new Graphic({ attributes: result.attributes, // Data attributes returned geometry: result.location, // Point returned symbol: { type: "simple-marker", color: "#000000", size: "12px", outline: { color: "#ffffff", width: "2px" } }, popupTemplate: { title: "{PlaceName}", // Data attribute names content: "{Place_addr}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Create a
Graphic
for each result returned. Set theattributes
,geometry
,symbol
andpopupTemplate
properties for each. Add each graphic to theview
.Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find places</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/Locator", "esri/Graphic" ], function(esriConfig,Map, MapView, Locator, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["Choose a place type...", "Parks and Outdoors", "Coffee shop", "Gas station", "Food", "Hotel"]; const select = document.createElement("select",""); select.setAttribute("class", "esri-widget esri-select"); select.setAttribute("style", "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em"); places.forEach(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locator = new Locator({ url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }); // Find places and add them to the map function findPlaces(category, pt) { locator.addressToLocations({ location: pt, categories: [category], maxLocations: 25, outFields: ["Place_addr", "PlaceName"] }) .then(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(result){ view.graphics.add( new Graphic({ attributes: result.attributes, // Data attributes returned geometry: result.location, // Point returned symbol: { type: "simple-marker", color: "#000000", size: "12px", outline: { color: "#ffffff", width: "2px" } }, popupTemplate: { title: "{PlaceName}", // Data attribute names content: "{Place_addr}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Call the
findPlaces
function when the view loads and each time the view changes and becomes stationary.Add line. Add line. Add line. Add line. Add line. Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find places</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/Locator", "esri/Graphic" ], function(esriConfig,Map, MapView, Locator, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["Choose a place type...", "Parks and Outdoors", "Coffee shop", "Gas station", "Food", "Hotel"]; const select = document.createElement("select",""); select.setAttribute("class", "esri-widget esri-select"); select.setAttribute("style", "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em"); places.forEach(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locator = new Locator({ url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }); // Find places and add them to the map function findPlaces(category, pt) { locator.addressToLocations({ location: pt, categories: [category], maxLocations: 25, outFields: ["Place_addr", "PlaceName"] }) .then(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(result){ view.graphics.add( new Graphic({ attributes: result.attributes, // Data attributes returned geometry: result.location, // Point returned symbol: { type: "simple-marker", color: "#000000", size: "12px", outline: { color: "#ffffff", width: "2px" } }, popupTemplate: { title: "{PlaceName}", // Data attribute names content: "{Place_addr}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Places for parks should be displayed on the map. By dragging the map, you will see new places populate the view.
Add a handler to select a category
Use an event handler to call the findPlaces
function when the category is changed.
Add an event listener to listen for category changes.
Add line. Add line. Add line. Add line. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Find places</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/tasks/Locator", "esri/Graphic" ], function(esriConfig,Map, MapView, Locator, Graphic) { esriConfig.apiKey = "YOUR-API-KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ container: "viewDiv", map: map, center: [18.9553, 69.6492], //Longitude, latitude zoom: 13 }); const places = ["Choose a place type...", "Parks and Outdoors", "Coffee shop", "Gas station", "Food", "Hotel"]; const select = document.createElement("select",""); select.setAttribute("class", "esri-widget esri-select"); select.setAttribute("style", "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em"); places.forEach(function(p){ const option = document.createElement("option"); option.value = p; option.innerHTML = p; select.appendChild(option); }); view.ui.add(select, "top-right"); const locator = new Locator({ url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }); // Find places and add them to the map function findPlaces(category, pt) { locator.addressToLocations({ location: pt, categories: [category], maxLocations: 25, outFields: ["Place_addr", "PlaceName"] }) .then(function(results) { view.popup.close(); view.graphics.removeAll(); results.forEach(function(result){ view.graphics.add( new Graphic({ attributes: result.attributes, // Data attributes returned geometry: result.location, // Point returned symbol: { type: "simple-marker", color: "#000000", size: "12px", outline: { color: "#ffffff", width: "2px" } }, popupTemplate: { title: "{PlaceName}", // Data attribute names content: "{Place_addr}" } })); }); }); } // Search for places in center of map view.watch("stationary", function(val) { if (val) { findPlaces(select.value, view.center); } }); // Listen for category changes and find places select.addEventListener('change', function (event) { findPlaces(event.target.value, view.center); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Run the app
In CodePen, run your code to display the map.
When you select a category, you should see places displayed in the center of the map for the category you selected. The search occurs when the map loads and when the map view position changes by zooming or panning. You can also click on the graphics to display pop-ups with the name and address information for each place.
What's next?
Learn how to use additional API features and ArcGIS services in these tutorials: