This sample adds a navigation vector basemap style along with places or points of interest.
This is achieved by configuring the BasemapStyle's places property to attributed as shown below:
// Display places with the basemap style.
const basemap = new Basemap({
style: new BasemapStyle({
id: "arcgis/navigation",
places: "attributed" // returns the place's esri_place_id
})
});The sample calls hitTest() method on the MapView
to access features in a VectorTileLayer that represents places. This is accomplished by setting up a pointer-move event handler on the view. By passing the obtained screen x, y coordinates to the view's hitTest() method, along with an option to only include features from the places VectorTileLayer, a promise is returned that resolves to an array of objects containing any features from the VectorTileLayer. Once a feature is returned, the app can check if it is a place feature and display the place name in a tooltip. Users may then click on the place feature to access further details. A request is then sent to the Places API to retrieve additional information about the place. This information is displayed in the tooltip, where users can also click on a link to open the place's website in a new tab. If users want to explore other places, they can simply press the Escape button after viewing the place info.
The following snippet shows how the hit method returns places features from a VectorTileLayer.
// debounce the hittest as user moves the mouse over the map to improve performance
const hitTest = await promiseUtils.debounce(async (event) => {
// get hit test results only from the vector tile layer
const hit = await view.hitTest(event, {include: layer});
const mapPoint = view.toMap({x: event.x, y: event.y});
if (hit.results.length) {
// check if the hittest result contains graphics from places vector tile layer
const placesHitTestResult = await Promise.all(hit?.results?.filter((result) => {
if (result.graphic.attributes["esri_place_id"]) {
return result.graphic;
};
})
.map(async (filterResult)=>{
if (filterResult) {
if (hoverGraphic?.attributes["esri_place_id"] === filterResult.graphic.attributes["esri_place_id"]){
return hoverGraphic;
} else {
hoverGraphic = filterResult.graphic.clone();
return filterResult.graphic;
}
}
}));
placesHitTestResult.screenPoint = hit.screenPoint;
if (!placesHitTestResult.length) {
return null;
}
return placesHitTestResult;
} else {
return null;
}
});If the hit test result contains places features, then the application makes a call to the places API to get additional information about the place as shown below:
// This function is called when user clicks the places feature
// Fetches additional info about the place from the places API to be displayed in a tooltip
async function getPlace(placeId) {
const fetchPlaceParameters = new FetchPlaceParameters({
apiKey,
placeId,
requestedFields: ["all"],
});
// Get the additional info about the place using the placeID
const fetchPlaceResult = await places.fetchPlace(fetchPlaceParameters);
const placeDetails = fetchPlaceResult.placeDetails;
return placeDetails;
}