Find nearby places and details

Learn how to find places around a location with a keyword search, then get detailed place information.

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.

In this tutorial, you use ArcGIS REST JS to perform a nearby search to find points of interest and return all available attributes associated with a place. The tutorial includes starter code that uses Calcite components to create a basic search interface.

Prerequisites

Steps

Get the starter code

To get started, . It contains the Calcite Components necessary to create this application, as well as an initial Leaflet map.

Set the API key

To access location services, you need an API key or OAuth 2.0 access token. To learn how to create and scope your key, visit the Create an API key tutorial.

Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.

In CodePen, update apiKey to use your key.

Use dark colors for code blocks
Change line
const apiKey = "YOUR_API_KEY";
const basemapId = "ArcGIS:Streets";
const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;
olms.apply(map, basemapURL);

Reference ArcGIS REST JS

Reference the routing and request packages from ArcGIS REST JS.

Use dark colors for code blocks
Add line.Add line.Add line.
    <!-- Load OpenLayers from CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@10.5.0/dist/olms.js"></script>
    <script src="https://unpkg.com/ol-popup@4.0.0"></script>
    <link rel="stylesheet" href="https://unpkg.com/ol-popup@4.0.0/src/ol-popup.css" />

    <!-- Calcite components -->
    <script type="module" src="https://js.arcgis.com/calcite-components/1.0.5/calcite.esm.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.0.5/calcite.css" />

    <!-- ArcGIS REST JS: request and places -->
    <script src="https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-places@1.0.0/dist/bundled/places.umd.js"></script>

Create a REST JS ApiKeyManager using your API key.

Expand
Use dark colors for code blocks
Add line.
    const apiKey = "YOUR_API_KEY";
    const basemapEnum = "ArcGIS:Navigation";

    const map = new ol.Map({
        target: "map",
        controls: ol.control.defaults({ zoom:false })
    });
    map.setView(
        new ol.View({
            center: ol.proj.fromLonLat([-118.46651, 33.98621]),
            zoom: 13
        })
    )

    olms.apply(map, `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`)

    const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
Expand

Set a category and search area

To perform a place search, you typically need a category ID. Each category ID corresponds to a unique category of place, such as "Chinese Restaurants" (13099) or "Sports and Recreation" (18000). A Calcite category selector is included in the . It includes the default top-level categories as selectable options.

Declare global variables to track the active place category and clicked location. Set the active category to 16000, which corresponds to the Landmarks and Outdoors category of places.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.
    const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);

    let activeCategory = "16000";
    let userLocation, clickedPoint;

Expand

Create a click event handler that saves the location of clicks on the map.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.
    const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);

    let activeCategory = "16000";
    let userLocation, clickedPoint;

    map.on('click', e => {
        userLocation = e.coordinate;

    })

Expand

Add a Vector layer to represent the area that will be searched. When a click is registered, display a Circle at the clicked location with a radius in meters.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    olms.apply(map, `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`)

    .then(map => {

        searchArea = new ol.layer.Vector();
        map.addLayer(searchArea)

    })

    const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);

    let activeCategory = "16000";
    let userLocation, clickedPoint;

    const searchRadius = 750;

    map.on('click', e => {
        userLocation = e.coordinate;

        const point = new ol.Feature({
            geometry: new ol.geom.Circle(e.coordinate, searchRadius*1.1)
        });
        searchArea.setSource(new ol.source.Vector({
            features: [point]
        }));

    })
Expand

Create another event handler for the Calcite category selector. Update the activeCategory when a new option is selected from the dropdown.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.
    map.on('click', e => {
        userLocation = e.coordinate;

        const point = new ol.Feature({
            geometry: new ol.geom.Circle(e.coordinate, searchRadius*1.1)
        });
        searchArea.setSource(new ol.source.Vector({
            features: [point]
        }));

    })

    categorySelect.addEventListener("calciteComboboxChange", e => {
        activeCategory = categorySelect.value;

    });
Expand

Find places near a point

Once a location and category have been set, make a request to the places service to find places near a point.

Define a new function showPlaces. Use the ArcGIS REST JS findPlacesNearPoint function to submit a request to the places service. Pass the searchRadius, userLocation, and activeCategory, as well as your authentication object.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    categorySelect.addEventListener("calciteComboboxChange", e => {
        activeCategory = categorySelect.value;

    });

    function showPlaces() {

        const lngLat = ol.proj.transform(userLocation, "EPSG:3857", "EPSG:4326");
        arcgisRest.findPlacesNearPoint({
            x: lngLat[0],
            y: lngLat[1],
            categoryIds:activeCategory,
            radius:searchRadius,
            authentication
        })

    };
Expand

Call the showPlaces function inside both of the event handlers.

Expand
Use dark colors for code blocks
Add line.Add line.
    map.on('click', e => {
        userLocation = e.coordinate;

        const point = new ol.Feature({
            geometry: new ol.geom.Circle(e.coordinate, searchRadius*1.1)
        });
        searchArea.setSource(new ol.source.Vector({
            features: [point]
        }));

        showPlaces()

    })

    categorySelect.addEventListener("calciteComboboxChange", e => {
        activeCategory = categorySelect.value;

        if (userLocation) showPlaces();

    });
Expand

Display results on the map

The places service will return a list of places near your location that match the specified category. Display these results as points on your map.

Create a Vector layer to symbolize place results. Style each point with this this custom icon.

Expand
Use dark colors for code blocks
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.
    .then(map => {

        searchArea = new ol.layer.Vector();
        map.addLayer(searchArea)

        placesLayer = new ol.layer.Vector({
          source: new ol.source.Vector(),

          style: new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.5, 0.99],
                anchorXUnits: 'fraction',
                anchorYUnits: 'fraction',
                scale:0.3,
                src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB5CAYAAADyOOV3AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwMTQgNzkuMTU2Nzk3LCAyMDE0LzA4LzIwLTA5OjUzOjAyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjg2NjYzRjZDNDkxMUU0QTM3RThDNzNCRDk3QTcyQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjg2NjY0MDZDNDkxMUU0QTM3RThDNzNCRDk3QTcyQSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNCODY2NjNENkM0OTExRTRBMzdFOEM3M0JEOTdBNzJBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCODY2NjNFNkM0OTExRTRBMzdFOEM3M0JEOTdBNzJBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+51b2xQAABXZJREFUeF7t3YttG1cQhWGX4BJSQkpICSnBpaSDlOASUoJLSAkpISUoO4RoMEc/xb374M97cQf4YOBI4nJmQC65evjL29vbNDAMp3FgOI0Dw2kcGE7jwHAaB4bTODCcxoHhNA4Mp3FgOI0Dw2kcGE7jwNCys74uflv8sfhr8WPx76Ju+JH6vPr8+rr6+rqdur3NRf0ZMLRsqF8Xfy7+Xtwu7Ch1u3X7dZymov4MGFoa6tvirKXeU8er464q6s+AoWVF1YD/WdwO/tnq+A8XTf0ZMLR8Ur8s6hx5O2hb3Z+6X1jUnwFDy52q89/aF0vPVvcLz8/UnwFDC1Q9Fd4O9FV9eMqm/gwYWqJe+ZGbPjySqT8DhpabqvegvSz3qu7vz/fO1J8BQ8tNfV/cDq8Xdb8vRf0ZMLS8V70yvR1aby6vrKk/A4aW9+r10Xt1eRRTfwYMLUvVOex2WEep82O9b63LjnWtuf5tuVbd6iv1Z8DQstTRb4vq0fToOnJ9/OhnjW/UnwFDy1JHDbq+K3T3KtOdqs+vr6Pba/Wd+jNgaFnqiMuRD68TP6gjnkV+UH8GDC0xpC32Lvdau5ecvVkwtOSQGh213GvtWnL2ZsHQkkNqUOfOM2rzOTl7s2BoySE1aH1BtbY2X3TJ3iwYWnJIK10uLJxYm17ZZ28WDC05pJUevc/dW3X7dNxPZW8WDC05pBXqStQzqvmKV/ZmwdCSQ1qh3jc/o5rfn2dvFgwtOaQVzj7/Xqv5PJy9WTC05JBWqG8cPKPqOHT8u7I3C4aWHNIKZ73/zWp+P5y9WTC05JBWmOfgBzC05JBWekbRcT+VvVkwtOSQVvp9cWbV7dNxP5W9WTC05JBWOvs8vOl6dPZmwdCSQ2pw1tWsTVexSvZmwdCSQ2pw1out5hdXV9mbBUNLDqlR/SDdkVW3R8dZJXuzYGjJIW0wf6IjYGjJIW2095G865F7lb1ZMLTkkHao38avv7PRUvX5h/3VgOzNgqElh3SAepFUT7f3fuKj8vr45hdT92RvFgwtOaSDXX+74eqs32q4yN4sGFpySD3L3iwYWnJIPcveLBhackg9y94sGFpySD3L3iwYWnJIPcveLBhackg9y94sGFpySD3L3iwYWnJIPcveLBhackg9y94sGFpySD3L3iwYWnJIPcveLBhackg9y94sGFpySD3L3iwYWnJIPcveLBhackg9y94sGFpySD3L3iwYWnJIPcveLBhackg9y94sGFpySD3L3iwYWnJIPcveLBhackg9y94sGFpySD3L3iwYWnJIPcveLBhackg9y94sGFpySD3L3iwYWnJIPcveLBhackg9y94sGFpySD3L3iwYWnJIPcveLBhackg9y94sGFpySD3L3iwYWnJIPcveLBhaltr9x09exPyfz8h79b7kuv/YnwFDy031uuTLcquoPwOGlqjelvxzuVXUnwFDC1QvS/7fcquoPwOGljv16kv+sNwq6s+AoeWTetUl43KrqD8DhpYH9WpLvrvcKurPgKFlRb3Kkj9dbhX1Z8DQsrLsJT9cbhX1Z8DQ0lDWklctt4r6M2BoaaxnL3n1cquoPwOGlg31rCU3LbeK+jNgaNlYZy+5eblV1J8BQ8uOOmvJm5ZbRf0ZMLTsrKOXvHm5VdSfAUPLAXXUknctt4r6M2BoOaj2Lnn3cquoPwOGlgNr65IPWW4V9WfA0HJwtS75sOVWUX8GDC0n1NolH7rcKurPgKHlpHq05MOXW0X9GTC0nFj3lnzKcquoPwOGlpMrl3zacquoPwOGlifUdcmnLreK+jNgOI0Dw2kcGE7jwHAaB4bTODCcxoHhNA4Mp3FgOI0Dw2kcGE7jwHAaxduX/wD39UwPVEJ3/AAAAABJRU5ErkJggg=='
            })
          })

        });
        map.addLayer(placesLayer);

    })
Expand

Clear the places layer when new results are returned from the service. For each place result, create a Feature using the place coordinates.

Expand
Use dark colors for code blocks
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.
    function showPlaces() {

        const lngLat = ol.proj.transform(userLocation, "EPSG:3857", "EPSG:4326");
        arcgisRest.findPlacesNearPoint({
            x: lngLat[0],
            y: lngLat[1],
            categoryIds:activeCategory,
            radius:searchRadius,
            authentication
        })

        .then((response)=>{

            placesLayer.getSource().clear();

            const places = [];

            response.results.forEach((result)=>{
                const location = ol.proj.transform([result.location.x,result.location.y], "EPSG:4326", "EPSG:3857");
                const marker = new ol.Feature({
                    geometry: new ol.geom.Point(location),

                });
                places.push(marker);

            });

        });

    };
Expand

Add additional properties to each Feature that store the place name, id, category, and distance from the user in Kilometers.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.
        .then((response)=>{

            placesLayer.getSource().clear();

            const places = [];

            response.results.forEach((result)=>{
                const location = ol.proj.transform([result.location.x,result.location.y], "EPSG:4326", "EPSG:3857");
                const marker = new ol.Feature({
                    geometry: new ol.geom.Point(location),

                    name: result.name,
                    id: result.placeId,
                    category: result.categories[0].label,
                    distance: (result.distance / 1000).toFixed(1)

                });
                places.push(marker);

            });

        });
Expand

Create a new Vector source using the list of place features. Set the placesLayer source to display the results on your map.

Expand
Use dark colors for code blocks
Add line.Add line.