This sample demonstrates how to use esri/rest/places to find nearby places and details.
Find places within a search distance of a geographic point, and find more information about specific places. Places, also known as points of interest (POIs), are businesses and geographic locations that one can discover around the world. Places also contain attributes such as name, category, street address, contact information, and more. With the places service one can build powerful applications to help people discover, locate, and learn more about places around them. The places service can search for businesses, points of interest (POI), and popular geographic features near a location or within a bounding box.
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, use esri/rest/places. With the results of the search,
one can make another request to the service and return place attributes including the name, categories, ratings, and store hours.
Instructions
To run this sample, select a category of interest from the top left panel. Then click on the map to see up to 10 features displayed on the map, symbolized based on category. These features are also listed in the left panel. Changing the category after clicking on the map will re-run the place search in the same location with the updated category value. Clicking on a feature in the left panel will open a popup on the associated feature on the map, and highlight that feature using it's LayerView. Clicking on another feature will close the previous feature's popup and remove the highlight, then open the popup and highlight the new feature.
How it works
The places service requires a token for authentication. This sample uses an API Key to authenticate. You can either replace it with your own API Key, or remove it and log in once prompted. Alternatively, you can use another authentication method to access the places service.
When the map is clicked, an event listener captures the user's click location and converts the screen coordinates to longitude and latitude, then passes those values to the showPlaces() function.
// View on-click event to capture places search location
view.on("click", (event) => {
bufferLayer.removeAll(); // Remove graphics from GraphicsLayer of previous buffer
placesLayer.removeAll(); // Remove graphics from GraphicsLayer of previous places search
clickPoint = {};
clickPoint.type = "point";
// Convert clicked screen location to longitude and latitude
clickPoint.longitude = Math.round(event.mapPoint.longitude * 1000) / 1000;
clickPoint.latitude = Math.round(event.mapPoint.latitude * 1000) / 1000;
// Pass point to the showPlaces() function
clickPoint && showPlaces(clickPoint);
});
Pass the user's click location with a 500m search radius, place category, and API Key to places service using the PlacesQueryParameters. Pass the results, as PlacesQueryResult to the tabulatePlaces() function.
// Pass search area, categories, and API Key to places service
chicagoPlacesQueryParameters = new PlacesQueryParameters({
apiKey,
categoryIds: [activeCategory],
radius: 500, // set radius to 500 meters
point: clickPoint,
});
// The results variable represents the PlacesQueryResult
const results = await places.queryPlacesNearPoint(
chicagoPlacesQueryParameters
);
// Pass the PlacesQueryResult to the tabulatePlaces() function
tabulatePlaces(results);
Process the individual PlaceResults from the array of results from the PlacesQueryResult to the addResult() function.
// Investigate the individual PlaceResults from the array of results
// from the PlacesQueryResult and process them
function tabulatePlaces(results) {
resultPanel.innerHTML = "";
if (infoPanel) infoPanel.remove();
results.results.forEach((placeResult) => {
// Pass each result to the addResult() function
addResult(placeResult);
});
}
// Visualize the places on the map based on category
// and list them on the left panel with more details
async function addResult(place) {
const placePoint = {
type: "point",
y: place.location.y,
x: place.location.x,
};
Once each place is represented by the appropriate symbol for it's category, add the graphic to the GraphicsLayer, and use FetchPlaceParameters to fetch more details about each place based on the place ID with all possible fields.
// Add each graphic to the GraphicsLayer
placesLayer.graphics.add(placeGraphic);
// Fetch more details about each place based
// on the place ID with all possible fields
const fetchPlaceParameters = new FetchPlaceParameters({
apiKey,
placeId: place.placeId,
requestedFields: ["all"],
});
Now that the features are symbolized on the map, and the feature details are listed in the panel on the left, we listen for when a feature on the left is selected, and then open the popup for the relevant feature on the map and highlight the feature using the GraphicsLayerView.highlight() method. Then pass the FetchPlaceParameters and the feature location to the getDetails() function, which calls the fetchPlace() method to get additional details on the place for display in the left panel.
// If a place in the left panel is clicked
// then open the feature's popup
infoDiv.addEventListener("click", async () => {
view.openPopup({
location: placePoint,
title: place.name,
content: "See panel for more details",
});
// Highlight the selected place feature
const layerView = await view.whenLayerView(placesLayer);
highlightSelect = layerView.highlight(placeGraphic);
// Move the view to center on the selected place feature
view.goTo(placeGraphic);
// Pass the FetchPlaceParameters and the location of the
// selected place feature to the getDetails() function
getDetails(fetchPlaceParameters, placePoint);
});
resultPanel.appendChild(infoDiv);
}
// Get place details and display in the left panel
async function getDetails(fetchPlaceParameters, placePoint) {
// Get place details
const result = await places.fetchPlace(fetchPlaceParameters);
const placeDetails = result.placeDetails;
// Move the view to center on the selected place feature
view.goTo(placePoint);