Places | CesiumJS | Esri Developer

To find places with CesiumJS, use the ArcGIS REST JS library to access the ArcGIS Places service.

Steps

Use CesiumJS to display a scene.
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 scene.

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. Use the findPlacesNearby and getPlaceDetails methods in ArcGIS REST JS.

Expand
Use dark colors for code blocksCopy
    function showPlaces() {

      viewer.entities.removeAll();
      resultPanel.innerHTML = "";

      if (infoPanel) infoPanel.remove();

      arcgisRest.findPlacesNearPoint({
        x: userLocation[0],
        y: userLocation[1],
        categoryIds: activeCategory,
        radius: searchRadius,
        authentication
      })

        .then((response) => {
          response.results.forEach((result) => {

            addResult(result);

          });
        });

    };
Expand

Go to tutorial

Places within a bounding box

Place finding is the process of discovering businesses and geographic locations, also known as points of interest (POIs).

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 scene. Use the findPlacesWithinExtent and getPlaceDetails methods in ArcGIS REST JS.

Expand
Use dark colors for code blocksCopy
      arcgisRest.findPlacesWithinExtent({
        xmin: bounds[0],
        ymin: bounds[1],
        xmax: bounds[2],
        ymax: bounds[3],
        searchText: query,
        authentication,
        f: "geojson"
      })

        .then((response) => {
          response.results.forEach((result) => {
            viewer.entities.add({
              name: result.name,
              description: "Details loading...",
              id: result.placeId,
              position: Cesium.Cartesian3.fromDegrees(result.location.x, result.location.y),

              billboard: {
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,

                image: pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL()

              }

            });
          });
        });
Expand