Display basemap places

Learn how to use the basemap styles service to show place locations on a basemap.

Basemap places is a feature of the basemap styles service that allows you to show or hide place locations on a basemap. The places are part of the basemap style and represent businesses, services, landmarks, and other places of interest (POIs) all over the world. When places are active, each is displayed with an icon and a name label. The place features also support attributes that you can use to integrate further with the places service.

In this tutorial, you use the basemap places feature to show attributed places and integrate the places service to get details for each place.

Prerequisites

You need an ArcGIS Location Platform or ArcGIS Online account.

Steps

Create a new pen

  1. To get started, either complete the Display a map tutorial or .

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
  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
    const accessToken = "YOUR_ACCESS_TOKEN";
    const basemapEnum = "arcgis/streets";
    const map = new maplibregl.Map({
      container: "map", // the id of the div element
      style: `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapEnum}?token=${accessToken}`,
      zoom: 12, // starting zoom
      center: [-118.805, 34.027] // starting location [longitude, latitude]
    });
    

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

Display attributed places

The ArcGIS navigation styles contain a predefined set of places that will display for the current visible extent and zoom level of the map. The places displayed can be refined with the places parameter to show all places, no places, or places with attributes. The main attributes returned with the attributed value are name and esri_place_id.

  1. Update the basemap URL to the arcgis/navigation style, and request places by adding the &places=attributed parameter to the request.

    Expand
    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
    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
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
      const map = new maplibregl.Map({
        container: "map",
    
        style: `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/arcgis/navigation?token=${accessToken}&places=attributed`,
    
        zoom: 16,
        center: [-118.33873,34.10151]
      });
    
    Expand
  2. When the mouse moves, call queryRenderedFeatures to list the hovered features. If a hovered feature contains the esri_place_id attribute, it is a place of interest (POI).

    Expand
    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
    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
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
        style: `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/arcgis/navigation?token=${accessToken}&places=attributed`,
    
        zoom: 16,
        center: [-118.33873,34.10151]
      });
    
      map.once("load", () => {
        map.on("mousemove", function (e) {
    
            const features = map.queryRenderedFeatures(e.point);
            if (features.length && features[0].properties.esri_place_id) {
              map.getCanvas().style.cursor = "pointer";
    
            } else {
              map.getCanvas().style.cursor = "";
            }
    
        });
    
      });
    
    Expand
  3. Initialize a maplibregl.Popup object.

    Expand
    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
    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
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
      map.once("load", () => {
        map.on("mousemove", function (e) {
    
            const features = map.queryRenderedFeatures(e.point);
            if (features.length && features[0].properties.esri_place_id) {
              map.getCanvas().style.cursor = "pointer";
    
            } else {
              map.getCanvas().style.cursor = "";
            }
    
        });
    
      });
    
      const popup = new maplibregl.Popup({
        closeButton: true,
        closeOnClick:false
      });
      popup.setMaxWidth("350");
    
    Expand
  4. Create a showPopup function that displays information about a place in a popup. When a POI is hovered, call showPopup to display the place name and ID.

    Expand
    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
    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
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
      map.once("load", () => {
        map.on("mousemove", function (e) {
    
            const features = map.queryRenderedFeatures(e.point);
            if (features.length && features[0].properties.esri_place_id) {
              map.getCanvas().style.cursor = "pointer";
    
              showPopup(features[0])
    
            } else {
              map.getCanvas().style.cursor = "";
            }
    
        });
    
      });
    
      const popup = new maplibregl.Popup({
        closeButton: true,
        closeOnClick:false
      });
      popup.setMaxWidth("350");
    
      const showPopup = (feature) => {
        popup.setLngLat(feature.geometry.coordinates);
    
        popup.setHTML(`<b>Name</b>: ${feature.properties._name}</br>
          <b>Place ID</b>: ${feature.properties.esri_place_id}</br>`
        ).addTo(map);
    
      };
    
    Expand
  5. Run the app. You should be able to see places of interest (POI) display on the basemap. When you hover over them you should see a pop-up containing the place name and ID.

Add script references

Each attributed place contains an esri_place_id. You can use the place ID with ArcGIS REST JS to call the places service place/placeId operation and additional attributes. Add references to ArcGIS REST JS and Calcite Components to your application.

  1. In the <head> element, add references to the ArcGIS REST JS request and places libraries.

    Expand
    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
    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
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
      <script src=https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js></script>
      <link href=https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css rel="stylesheet" />
    
      <script src="https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js"></script>
      <script src="https://unpkg.com/@esri/arcgis-rest-places@1.0.0/dist/bundled/places.umd.min.js"></script>
    
    
    Expand
  2. Add references to the Calcite Components library, which will be used to display results.

    Expand
    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
    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
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
      <script src=https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js></script>
      <link href=https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css rel="stylesheet" />
    
      <script src="https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js"></script>
      <script src="https://unpkg.com/@esri/arcgis-rest-places@1.0.0/dist/bundled/places.umd.min.js"></script>
    
      <script type="module" src="https://js.arcgis.com/calcite-components/1.0.5/calcite.esm.js"></script>
      <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.0.5/calcite.css" />
    
    Expand
  3. Scaffold an HTML results panel using the <calcite-panel> and <calcite-block> elements. This panel will be hidden by default, and display when POI details are returned from the places service.

    Expand
    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
    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
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    <body>
      <div id="map"></div>
    
      <calcite-panel id="panelPlace" closable hidden>
        <calcite-block id="addressLabel" class="hide" heading="Address" scale="l" description="">
          <calcite-icon scale="m" slot="icon" icon="map-pin"></calcite-icon>
        </calcite-block>
        <calcite-block id="phoneLabel" class="hide" heading="Phone" scale="l" description="">
          <calcite-icon scale="m" slot="icon" icon="mobile"></calcite-icon>
        </calcite-block>
        <calcite-block id="hoursLabel" class="hide" heading="Hours" scale="l" description="">
          <calcite-icon scale="m" slot="icon" icon="clock"></calcite-icon>
        </calcite-block>
        <calcite-block id="ratingLabel" class="hide" heading="Rating" scale="l" description="">
          <calcite-icon scale="m" slot="icon" icon="star"></calcite-icon>
        </calcite-block>
        <calcite-block id="emailLabel" class="hide" heading="Email" scale="l" description="">
          <calcite-icon scale="m" slot="icon" icon="email-address"></calcite-icon>
          <calcite-action slot="control" text="Information"></calcite-action>
        </calcite-block>
        <calcite-block id="websiteLabel" class="hide" heading="Website" scale="l" description="">
          <calcite-icon scale="m" slot="icon" icon="information"></calcite-icon>
          <calcite-action slot="control" text="Information"></calcite-action>
        </calcite-block>
        <calcite-block id="facebookLabel" class="hide" heading="Facebook" scale="l" description="">
          <calcite-icon scale="m" slot="icon" icon="speech-bubble-social"></calcite-icon>
          <calcite-action slot="control" text="Information"></calcite-action>
        </calcite-block>
        <calcite-block id="twitterLabel" class="hide" heading="Twitter" scale="l" description="">
          <calcite-icon scale="m" slot="icon" icon="speech-bubbles"></calcite-icon>
          <calcite-action slot="control" text="Information"></calcite-action>
        </calcite-block>
        <calcite-block id="instagramLabel" class="hide" heading="Instagram" scale="l" description="">
          <calcite-icon scale="m" slot="icon" icon="camera"></calcite-icon>
          <calcite-action slot="control" text="Information"></calcite-action>
        </calcite-block>
      </calcite-panel>
    
    </body>
    <script>
    
      const panel = document.getElementById("panelPlace");
    
    Expand

Get details on click

Each attributed place contains an esri_place_id that can be used to get details from the places service. When a user clicks on a point of interest (POI), use the getPlaceDetails method of ArcGIS REST JS to make a request to the places service and return attributes such as description, address:streetAddress, contactInfo:telephone, and rating:user for the clicked place.

  1. When a user clicks on the map, call queryRenderedFeatures. If a POI feature is clicked, zoom to its location and show the calcite panel.

    Expand
    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
    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
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
      map.once("load", () => {
        map.on("mousemove", function (e) {
    
            const features = map.queryRenderedFeatures(e.point);
            if (features.length && features[0].properties.esri_place_id) {
              map.getCanvas().style.cursor = "pointer";
    
              showPopup(features[0])
    
            } else {
              map.getCanvas().style.cursor = "";
            }
    
        });
    
        map.on("click",function (e) {
          const features = map.queryRenderedFeatures(e.point);
          if (features.length && features[0].properties.esri_place_id) {
            map.flyTo({center:features[0].geometry.coordinates})
            panel.hidden = false;
            panel.closed = false;
    
          }
        });
    
      });
    
    Expand
  2. Create a showPlaceDetails function that is called when a POI feature is clicked. Use the ArcGIS REST JS getPlaceDetails method to make a request to the places service using the esri_place_id of the selected place.

    Expand
    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
    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
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
        map.on("click",function (e) {
          const features = map.queryRenderedFeatures(e.point);
          if (features.length && features[0].properties.esri_place_id) {
            map.flyTo({center:features[0].geometry.coordinates})
            panel.hidden = false;
            panel.closed = false;
    
            showPlaceDetails(features[0])
    
          }
        });
    
      });
    
      const popup = new maplibregl.Popup({
        closeButton: true,
        closeOnClick:false
      });
      popup.setMaxWidth("350");
    
      const showPopup = (feature) => {
        popup.setLngLat(feature.geometry.coordinates);
    
        popup.setHTML(`<b>Name</b>: ${feature.properties._name}</br>
          <b>Place ID</b>: ${feature.properties.esri_place_id}</br>`
        ).addTo(map);
    
      };
    
      const showPlaceDetails = (feature) => {
    
        const placeID = feature.properties.esri_place_id;
        arcgisRest
        .getPlaceDetails({
            placeId: placeID,
            requestedFields: "all",
            authentication,
        })
    
      };
    
    Expand
  3. Access the results from the places service. Style the <calcite-panel> with the place name and close button logic.

    Expand
    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
    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
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
      const showPlaceDetails = (feature) => {
    
        const placeID = feature.properties.esri_place_id;
        arcgisRest
        .getPlaceDetails({
            placeId: placeID,
            requestedFields: "all",
            authentication,
        })
    
        .then((result) => {
            setPlaceDetails(result.placeDetails)
        });
    
      };
    
      const setPlaceDetails = (placeDetails) => {
        panel.setAttribute("heading", placeDetails.name);
    
        panel.addEventListener("calcitePanelClose", function(){
          panel.hidden=true;
          panel.closed=true;
        });
      };
    
    Expand
  4. Create a helper function setElementProperties that styles the Calcite HTML. Call the helper function for each relevant field of the current place.

    Expand
    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
    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
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
      const setPlaceDetails = (placeDetails) => {
        panel.setAttribute("heading", placeDetails.name);
    
        setElementProperties("addressLabel", placeDetails?.address?.streetAddress);
        setElementProperties("phoneLabel", placeDetails?.contactInfo?.telephone);
        setElementProperties("hoursLabel", placeDetails?.hours?.openingText);
        setElementProperties("ratingLabel", placeDetails?.rating?.user);
        setElementProperties("emailLabel", placeDetails?.contactInfo?.email);
        setElementProperties("websiteLabel", placeDetails?.contactInfo?.website?.split("://")[1].split("/")[0]);
        setElementProperties("facebookLabel", (placeDetails?.socialMedia?.facebookId) ? `www.facebook.com/${placeDetails.socialMedia.facebookId}` : null);
        setElementProperties("twitterLabel", (placeDetails?.socialMedia?.twitter) ? `www.twitter.com/${placeDetails.socialMedia.twitter}` : null);
        setElementProperties("instagramLabel", (placeDetails?.socialMedia?.instagram) ? `www.instagram.com/${placeDetails.socialMedia.instagram}` : null);
    
        panel.addEventListener("calcitePanelClose", function(){
          panel.hidden=true;
          panel.closed=true;
        });
      };
    
      const setElementProperties = (id, validValue) => {
        const element = document.getElementById(id);
        if (validValue) {
          element.classList.remove("hide");
          element.description = validValue;
        } else {
          element.classList.add("hide");
          element.description = "";
        }
      };
    
    Expand

Run the app

In CodePen, run your code to display the map.

The map should display the ArcGIS navigation basemap style with attributed places. When you hover over a place, a popup should appear that contains the place name and ID. When you click on the place, a request is made to the places service to get more place detail information.

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