Tutorial: Find place addresses

Learn how to search for coffee shops, gas stations, restaurants and other nearby places with the geocoding service.

Find place addresses

Place addresses for businesses by category with the geocoding service.

Place finding is the process of searching for a place name or POI to find its address and location. You can use the geocoding service to find places such as coffee shops, gas stations, or restaurants for any geographic location around the world. You can search for places by name or by using categories. You can search near a location or you can search globally.

In this tutorial, you use ArcGIS REST JS to access the geocoding service and find places by place category.

Prerequisites

You need an ArcGIS Location Platform or ArcGIS Online account.

Get an access token

You need an access token with the correct privileges to access the resources used in this tutorial.

  1. Go to the Create an API key tutorial and create an API key with the following privilege(s):

    • Privileges
      • Location services > Basemaps
      • Location services > Geocoding
  2. Copy the API key access token to your clipboard when prompted.

  3. In CodePen, update the accessToken variable to use your access token.

    Use dark colors for code blocks
    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
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
          const accessToken = "YOUR_ACCESS_TOKEN";
    
          Cesium.ArcGisMapService.defaultAccessToken = accessToken;
    
          const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
    
          Cesium.Ion.defaultAccessToken = cesiumAccessToken;
    
          const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);
    
          const viewer = new Cesium.Viewer("cesiumContainer", {
    
            baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
    
          });
    

To learn about the other types of authentication available, go to Types of authentication.

Code

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
    <title>CesiumJS: Find places</title>

    <script src="https://cesium.com/downloads/cesiumjs/releases/1.121/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.121/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <!-- Load ArcGIS REST JS from CDN -->
    <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-geocoding@4/dist/bundled/geocoding.umd.js"></script>
    <style>
        html, body, #cesiumContainer {
            width:100%;
            height:100%;
            padding:0px;
            margin:0px;
        }
        #places-select {
            left: 8px;
            top: 8px;
            position: absolute;
            font-size: 16px;
            padding: 4px 8px;
        }
    </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <select id="places-select">
    <option value="">Choose a place type...</option>
    <option value="Coffee shop" selected>Coffee shops</option>
    <option value="Gas station">Gas stations</option>
    <option value="Food">Food</option>
    <option value="Hotel">Hotels</option>
    <option value="Parks and Outdoors">Parks and Outdoors</option>
  </select>
  <script type="module">

    const accessToken = "YOUR_ACCESS_TOKEN";

    Cesium.ArcGisMapService.defaultAccessToken = accessToken;

    const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken);

    const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
    Cesium.Ion.defaultAccessToken = cesiumAccessToken;

    const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE, {
    enablePickFeatures:false
    });

    const viewer = new Cesium.Viewer("cesiumContainer", {

        baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),

        terrain: Cesium.Terrain.fromWorldTerrain(),
        timeline: false,
        animation: false,
        geocoder:false

    });

    viewer.camera.setView({
        destination : Cesium.Cartesian3.fromDegrees(8.6724, 50.1085, 1500)
    });

    const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://tiles.arcgis.com/tiles/GVgbJbqm8hXASVYi/arcgis/rest/services/EGM2008/ImageServer");
    const i3sProvider = await Cesium.I3SDataProvider.fromUrl("https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Frankfurt_2021/SceneServer", {
        geoidTiledTerrainProvider: geoidService,
        token: accessToken
    })
    viewer.scene.primitives.add(i3sProvider);


    function showPlaces() {
        viewer.dataSources.removeAll()
        const category = document.getElementById("places-select").value;
        const cartographic = Cesium.Cartographic.fromCartesian(viewer.camera.position);
        const center = [Cesium.Math.toDegrees(cartographic.longitude),Cesium.Math.toDegrees(cartographic.latitude)]
        arcgisRest
        .geocode({
            authentication,
            outFields: "Place_addr,PlaceName", // attributes to be returned

            params: {
            category,
            location: center.join(','),
            maxLocations: 25
            }
        })
        .then((response) => {
            const json = response.geoJson
            Cesium.GeoJsonDataSource.load(response.geoJson, {
                markerColor: Cesium.Color.ROYALBLUE,
                markerSize:48,
                clampToGround:true
            }).then((data)=>{
                viewer.dataSources.add(data)
                console.log(data)
                viewer.selectedEntity = data.entities.values[0]
            })
        })
    }

    document.getElementById("places-select").addEventListener("change", showPlaces);

    showPlaces()
  </script>
</body>
</html>

What's next?

Learn how to use additional ArcGIS location services in these tutorials:

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