Basemap places

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:

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
// 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 hitTest method returns places features from a VectorTileLayer.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 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:

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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;
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.