Display basemap places

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

Basemap places is a feature of the basemap styles service (v2) 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

Steps

Create a new pen

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

Set the API key

To access location services, you need an API key or OAuth 2.0 access token. To learn how to create and scope your key, visit the Create an API key tutorial.

1. Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.

2. In CodePen, update apiKey to use your key.

   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 apiKey = "YOUR_API_KEY";
   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=${apiKey}`,
     zoom: 12, // starting zoom
     center: [-118.805, 34.027] // starting location [longitude, latitude]
   });
   

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=${apiKey}&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=${apiKey}&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.