Places

Place finding is the process of discovering businesses and geographic locations, also known as points of interest (POIs). To find places with MapLibre GL JS, use the ArcGIS REST JS library to access the ArcGIS Places service.

Steps

Use the MapLibre ArcGIS plugin to display a map.
Reference the ArcGIS REST JS request and places packages.
Perform a nearby or bounding box place search.
Optionally, get place details.
Display the results in the map.

Nearby places

You can search for nearby places such as cafes, hospitals, or parks, by searching within a distance from a point or device location. You can also filter search results by using place categories.

Find nearby places and details

Learn how to find places within a radius and return details about them. It uses the findPlacesNearby and getPlaceDetails methods in ArcGIS REST JS.

Expand
Use dark colors for code blocksCopy
            arcgisRest.findPlacesNearPoint({
                x: userLocation.lng,
                y: userLocation.lat,
                categoryIds: activeCategory,
                radius: searchRadius,
                authentication
            })
                .then((response) => {
                    response.results.forEach((result) => {
                        addResult(result);
                    });
Expand

Go to tutorial

Places within a bounding box

You can also find places within an envelope or map extent to locate businesses, landmarks, or facilities.

Find places and details within a bounding box

Learn how to find places and return details about them using the current visible extent of the map. It uses the findPlacesWithinExtent and getPlaceDetails methods in ArcGIS REST JS.

Expand
Use dark colors for code blocksCopy
            arcgisRest.findPlacesWithinExtent({
                xmin: bottomLeft.lng,
                ymin: bottomLeft.lat,
                xmax: topRight.lng,
                ymax: topRight.lat,
                searchText: text,
                authentication
            })
                .then((response) => {
                    response.results.forEach((result) => {
                        const marker = new maplibregl.Marker()
                            .setLngLat([result.location.x, result.location.y])
                            .addTo(map);
                        currentPlaces.push(marker);

                        const popup = new maplibregl.Popup();
                        popup.on('open', e => {
                            getDetails(e.target, result.placeId)
                        });
                        marker.setPopup(popup)
                    });
                });
Expand