Display basemap places

Learn how to show places on a basemap.

The ArcGIS Basemap Styles service 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. To set this preference in your app, use the MapLibre ArcGIS plugin.

In this tutorial, set the basemap style preferences to show places using the MapLibre ArcGIS plugin. Then, make a request to the ArcGIS Places service to get details for each place using ArcGIS REST JS.

Prerequisites

Steps

Get the starter app

Select a type of authentication below and follow the steps to create a new application.

Set up authentication

Create developer credentials in your portal for the type of authentication you selected.

Set developer credentials

Use the API key or OAuth developer credentials so your application can access ArcGIS services.

Display attributed places

The arcgis/navigation style contains a set of places that show up on the map based on the current zoom level and extent. 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 style to arcgis/navigation and set style preferences to display places in the BasemapStyle 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
   201
   202
   203
   204
   205
   206
   207
   208
   209
   210
   211
   212
   213
   214
   215
   216
   217
   218
   219
   220
   221
   222
   223
   224
     const map = new maplibregl.Map({
       container: "map",
       zoom: 16,
       center: [-118.33873, 34.10151],
     });
   
     const basemapStyle = maplibreArcGIS.BasemapStyle.applyStyle(map, {
       style: 'arcgis/navigation',
       token: accessToken,
       preferences: {
         places: 'attributed'
       }
     });
   

   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
   201
   202
   203
   204
   205
   206
   207
   208
   209
   210
   211
   212
   213
   214
   215
   216
   217
   218
   219
   220
   221
   222
   223
   224
     const map = new maplibregl.Map({
       container: "map",
       zoom: 16,
       center: [-118.33873, 34.10151],
     });
   
     const basemapStyle = maplibreArcGIS.BasemapStyle.applyStyle(map, {
       style: 'arcgis/navigation',
       token: accessToken,
       preferences: {
         places: 'attributed'
       }
     });
   
     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
   201
   202
   203
   204
   205
   206
   207
   208
   209
   210
   211
   212
   213
   214
   215
   216
   217
   218
   219
   220
   221
   222
   223
   224
     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
   201
   202
   203
   204
   205
   206
   207
   208
   209
   210
   211
   212
   213
   214
   215
   216
   217
   218
   219
   220
   221
   222
   223
   224
     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
   201
   202
   203
   204
   205
   206
   207
   208
   209
   210
   211
   212
   213
   214
   215
   216
   217
   218
   219
   220
   221
   222
   223
   224
     <!-- Load MapLibre GL JS from CDN -->
     <script src=https://unpkg.com/maplibre-gl@5.9.0/dist/maplibre-gl.js></script>
     <link href=https://unpkg.com/maplibre-gl@5.9.0/dist/maplibre-gl.css rel="stylesheet" />
     <!-- Load MapLibre ArcGIS from CDN -->
     <script src="https://unpkg.com/@esri/maplibre-arcgis@1.0.0/dist/umd/maplibre-arcgis.min.js"></script>
   
     <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
     <script
       src="https://unpkg.com/@esri/arcgis-rest-places@1/dist/bundled/places.umd.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
   201
   202
   203
   204
   205
   206
   207
   208
   209
   210
   211
   212
   213
   214
   215
   216
   217
   218
   219
   220
   221
   222
   223
   224
     <!-- Load MapLibre GL JS from CDN -->
     <script src=https://unpkg.com/maplibre-gl@5.9.0/dist/maplibre-gl.js></script>
     <link href=https://unpkg.com/maplibre-gl@5.9.0/dist/maplibre-gl.css rel="stylesheet" />
     <!-- Load MapLibre ArcGIS from CDN -->
     <script src="https://unpkg.com/@esri/maplibre-arcgis@1.0.0/dist/umd/maplibre-arcgis.min.js"></script>
   
     <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
     <script
       src="https://unpkg.com/@esri/arcgis-rest-places@1/dist/bundled/places.umd.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
   201
   202
   203
   204
   205
   206
   207
   208
   209
   210
   211
   212
   213
   214
   215
   216
   217
   218
   219
   220
   221
   222
   223
   224
   
   <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="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>
     /* Use for API key authentication */
     const accessToken = "YOUR_ACCESS_TOKEN";
   
     // or
   
     /* Use for user authentication */
     // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
     //   clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
     //   redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
     //   portal: "https://www.arcgis.com/sharing/rest" // Your portal URL
     // })
   
     // const accessToken = session.token;
   
     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 address:streetAddress and contactInfo:telephone 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
   201
   202
   203
   204
   205
   206
   207
   208
   209
   210
   211
   212
   213
   214
   215
   216
   217
   218
   219
   220
   221
   222
   223
   224
     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
   201
   202
   203
   204
   205
   206
   207
   208
   209
   210
   211
   212
   213
   214
   215
   216
   217
   218
   219
   220
   221
   222
   223
   224
       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
   201
   202
   203
   204
   205
   206
   207
   208
   209
   210
   211
   212
   213
   214
   215
   216
   217
   218
   219
   220
   221
   222
   223
   224
     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
   201
   202
   203
   204
   205
   206
   207
   208
   209
   210
   211
   212
   213
   214
   215
   216
   217
   218
   219
   220
   221
   222
   223
   224
     const setPlaceDetails = (placeDetails) => {
       panel.setAttribute("heading", placeDetails.name);
   
       setElementProperties("addressLabel", placeDetails?.address?.streetAddress);
       setElementProperties("phoneLabel", placeDetails?.contactInfo?.telephone);
       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

Run the app.

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.

What's next?

Learn how to use additional location services in these tutorials: