A nearby search finds places within a given radius of a location using the places service. The location typically represents a point on a map or the geolocation of a device.
To perform a nearby search, you use the places package from ArcGIS REST JS. With the results of the search, you can make another request to the service and return place attributes including the name, categories, ratings, and store hours.
Prerequisites
This tutorial requires an ArcGIS Location Platform or ArcGIS Online account.
Steps
Create a new pen
- If you are using the CDN libraries, to get started.
Get an access token
You need an access token with the correct privileges to access the resources used in this tutorial.
-
Go to the Create an API key tutorial and create an API key with the following privilege(s):
- Privileges:
- Location services > Places
- Privileges:
-
Copy the API key access token to your clipboard when prompted.
-
In CodePen, update the
access
variable to use your access token.Token Use dark colors for code blocks Copy const accessToken = "YOUR_ACCESS_TOKEN"; const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken);
To learn about the other types of authentication available, go to Types of authentication.
Request nearby places
Copy and paste the code below, following the steps to make a request to the Places service.
-
Reference the ArcGIS REST JS libraries either through CDN, ES Modules, or Node JS.
-
- Set the
access
with an API key access token from API key credentials.Token
- Set the
-
Define the parameters needed for the request.
-
Call the Places service and handle the results.
<!-- require ArcGIS REST JS libraries from https://unpkg.com -->
<script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
<script src="https://unpkg.com/@esri/arcgis-rest-places@1/dist/bundled/places.umd.js"></script>
<script>
/* when including ArcGIS REST JS all exports are available
from the same arcgisRest global */
const accessToken = "YOUR_ACCESS_TOKEN";
const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken);
arcgisRest.findPlacesNearPoint({
x: -118.46651, // Venice Beach, CA
y: 33.98621,
categoryIds:["16000"], // Arts and Outdoors category
radius:750,
authentication
})
.then((response) => {
console.log("Search results:", response.results);
document.getElementById("result").textContent = JSON.stringify(response.results, null, 2);
});
</script>
The service will return a list of up to 20 nearby places that match the search criteria.
The places service returns a maximum of 20 search results at a time. To find more places that match your query, you can paginate through place results by making additional requests with a formatted URL. To learn how to do this, go to the Paginate search results example in the Places introduction.
Request place details
Each place returned from the places service includes a unique Place ID. Use this ID and ArcGIS REST JS to request additional information about one of the places returned in the previous step.
<!-- require ArcGIS REST JS libraries from https://unpkg.com -->
<script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
<script src="https://unpkg.com/@esri/arcgis-rest-places@1/dist/bundled/places.umd.js"></script>
<script>
/* when including ArcGIS REST JS all exports are available
from the same arcgisRest global */
const accessToken = "YOUR_ACCESS_TOKEN";
const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken);
arcgisRest.findPlacesNearPoint({
x: -118.46651, // Venice Beach, CA
y: 33.98621,
categoryIds:["16000"], // Arts and Outdoors category
radius:750,
authentication
})
.then((response) => {
console.log("Search results:", response.results);
document.getElementById("result").textContent = JSON.stringify(response.results, null, 2);
getDetails(response.results[0].placeId);
});
function getDetails(placeId) {
arcgisRest.getPlaceDetails({
placeId: placeId,
requestedFields: ["all"],
authentication
}).then((response) => {
console.log("Place details:", response.placeDetails);
document.getElementById("result").textContent += JSON.stringify(response.placeDetails, null, 2);
});
}
</script>
Result
Below are the responses from the places service:
Nearby results
[
{
"place": {
"placeId": "3ab8fd70a4af0ea5ee52fd16a030ae93",
"location": {
"x": -118.466722,
"y": 33.984622
},
"categories": [
{
"categoryId": "16037",
"label": "Playground"
}
],
"name": "Linnie Canal Park",
"parentPlaceId": null,
"distance": 177.7
},
"distance": 177.7
},
{
"place": {
"placeId": "bed7c3f80c0a3094ecc4149f2353182c",
"location": {
"x": -118.46656,
"y": 33.984562
},
"categories": [
{
"categoryId": "16009",
Place details
{
"place": {
"placeId": "3ab8fd70a4af0ea5ee52fd16a030ae93",
"location": {
"x": -118.466722,
"y": 33.984622
},
"categories": [
{
"categoryId": "16037",
"label": "Playground"
}
],
"name": "Linnie Canal Park",
"parentPlaceId": null
},
"description": null,
"address": {
"streetAddress": "2401 Dell Ave",
"extended": "# 2418",
"locality": "Venice",
"designatedMarketArea": "Los Angeles",
"region": "CA",
"postcode": "90291",
"poBox": null,
"country": "US",
"adminRegion": null,
"postTown": null,
"neighborhood": ["Venice"],
"censusBlockId": "060372739024009"
What's next?
Learn how to use additional ArcGIS location services in these tutorials:
Find places in a bounding box
Perform a text-based search to find places within a bounding box.
Find place addresses
Find coffee shops, gas stations, restaurants and other nearby places by accessing the Geocoding service.
Find a route and directions
Find a route and directions for an origin and destination by accessing the route service.