What are basemap places?
Basemap places is a feature of the basemap styles service (v2) that allows you to show or hide place locations in 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. No other layers or services are required to display them. 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 build interactive applications or integrate further with the places service.
You can use basemap places to:
- Display nearby businesses and services with a basemap style.
- Display points of interest (POI) such as important geographic features, parks, and landmarks.
- Display all places, a filtered subset of places, or hide all places.
- Access and display place attributes such as
_nameandesri_.place_ id - Build applications that integrate with the places service to get detailed place information.
- Build navigation and routing applications.
How to use basemap places
To display basemap places you need to use the basemap styles service (v2) with the arcgis/navigation or arcgis/navigation-night style. To control the type of places displayed or to hide places you use the places parameter. The navigation styles contain a predefined set of places that will display for the current visible extent and zoom level of the map. The most relevant places such as parks, shopping centers, and restaurants will typically appear first. More places will appear as you zoom in.
The steps to display basemap places are:
-
Reference the basemap styles service.
-
Specify the style. Currently only
arcgis/navigationorarcgis/navigation-nightare supported. -
Use the
placesparameter to specify which places to display:places=all: Show all places available.places=none: Hide all places.places=attributed: Show all places that have attributes.
Below is an example request to display all places:
https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/arcgis/navigation?places=all&token=<ACCESS_TOKEN>Place attributes
The basemap styles service (v2) can return place features with attributes (fields and values) directly in the style. To do so, you need to reference the style and set the following parameter: places=attributed (see below). The main attributes returned are _name and esri_. When place attributes are available, you can use mapping APIs to access them and build interactive applications. For example, you can use _name to display place names in interactive popups or you can use esri_ to get more detailed information about each place with the places service.
Example request to return places with attributes:
https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/arcgis/navigation?places=attributed&token=<ACCESS_TOKEN>Example of place attributes returned with each place feature:
{
esri_place_id: "e74ccedafb668dd833b5b41c357dbc95"
_name: "J Riley Distillery",
}Place style categories
Places style categories are groups of places in the style that belong to the same thematic category. Each category is defined by a unique source-layer in the style. All places in each category have the same icon, zoom levels, and other style definitions.
The place style category names include the following:
Food and drink placeLodging placeShop or Service placeArts and Entertainment placeGovernment or Public Facility placeResidence placeIndustrial or Infrastructure placeLand Feature placeLandmark placeWater Feature placeSport placeOutdoors placeTransportation placeMedical placeEducation placeReligion placePOI Other place
Below are examples of the style category in the basemap style JSON:
{
"filter": [
"==",
"_symbol",
4
],
"id": "Place/Sport/Curling",
"layout": {
"icon-image": {
"stops": [
[
16.5,
"Sport place/Curling_1"
],
[
16.6,
"Sport place/Curling"
]
]
},
"minzoom": 11,
"paint": {
"text-color": "#698c4d",
"text-halo-color": "rgba(255,255,255,0.8)",
"text-halo-width": 1
},
"source": "esri",
"source-layer": "Sport place",
"type": "symbol"
},
...
{
"filter": [
"==",
"_symbol",
28
],
"id": "Place/Food and Drink/Chicken Restaurant",
"layout": {
"icon-image": {
"stops": [
[
16.5,
"Food and Drink place/Chicken Restaurant_1"
],
[
16.6,
"Food and Drink place/Chicken Restaurant"
]
]
},
"source": "esri-places",
"source-layer": "Food and Drink place",
"type": "symbol"
},
...URL request
https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/arcgis/{style}?places={}&token=<ACCESS_TOKEN>https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/webmaps/arcgis/{style}?places={}&token=<ACCESS_TOKEN>Parameters
| Name | Description | Examples |
|---|---|---|
places | The places displayed with the basemap style: none, all, attributed | places=attributed |
token | An API key or OAuth 2.0 access token. Learn how to get an access token in Security and authentication. | token=< |
Code examples
Show and hide places
This example shows and hides all places with the arcgis/navigation basemap style. The request uses the places=all parameter to show all places and places=none to hide them.
APIs
if (showPlaces.checked) {
vtl.loadStyle(allPlaces)
} else {
vtl.loadStyle(noPlaces)
}
Display places with attributes
This example shows how to access place attributes in the basemap the arcgis/navigation style and places=attributed parameter. The _name and esri_ attributes and the style category name are displayed for each feature as you hover over places.
APIs
esriConfig.apiKey = apiKey
// Create a basemap with a basemap style.
const basemap = new Basemap({
style: new BasemapStyle({
id: "arcgis/navigation",
places: "attributed", // returns the place's esri_place_id, category name(s), and category(s) IDs
}),
})
// Create a marker symbol for our graphic
const markerSymbol = new CIMSymbol({
data: {
type: "CIMSymbolReference",
symbol: {
type: "CIMPointSymbol",
symbolLayers: [
{
type: "CIMVectorMarker",
enable: true,
anchorPoint: {
x: 0,
y: 0,
},
anchorPointUnits: "Relative",
dominantSizeAxis3D: "Y",
size: 8,
billboardMode3D: "FaceNearPlane",
frame: {
xmin: 0,
ymin: 0,
xmax: 17,
ymax: 17,
},
markerGraphics: [
{
type: "CIMMarkerGraphic",
geometry: {
rings: [
[
[8.5, 0],
[7.02, 0.13],
[5.59, 0.51],
[4.25, 1.14],
[3.04, 1.99],
[1.99, 3.04],
[1.14, 4.25],
[0.51, 5.59],
[0.13, 7.02],
[0, 8.5],
[0.13, 9.98],
[0.51, 11.41],
[1.14, 12.75],
[1.99, 13.96],
[3.04, 15.01],
[4.25, 15.86],
[5.59, 16.49],
[7.02, 16.87],
[8.5, 17],
[9.98, 16.87],
[11.41, 16.49],
[12.75, 15.86],
[13.96, 15.01],
[15.01, 13.96],
[15.86, 12.75],
[16.49, 11.41],
[16.87, 9.98],
[17, 8.5],
[16.87, 7.02],
[16.49, 5.59],
[15.86, 4.25],
[15.01, 3.04],
[13.96, 1.99],
[12.75, 1.14],
[11.41, 0.51],
[9.98, 0.13],
[8.5, 0],
],
],
},
symbol: {
type: "CIMPolygonSymbol",
symbolLayers: [
{
type: "CIMSolidStroke",
enable: true,
capStyle: "Round",
joinStyle: "Round",
lineStyle3D: "Strip",
miterLimit: 10,
width: 0,
color: [0, 0, 0, 255],
},
{
type: "CIMSolidFill",
enable: true,
color: [255, 255, 255, 255],
},
],
},
},
],
scaleSymbolsProportionally: true,
respectFrame: true,
offsetX: 0,
offsetY: 17,
},
{
type: "CIMVectorMarker",
enable: true,
anchorPoint: {
x: 0,
y: -0.5,
},
anchorPointUnits: "Relative",
dominantSizeAxis3D: "Y",
size: 25,
billboardMode3D: "FaceNearPlane",
frame: {
xmin: 0,
ymin: 0,
xmax: 21,
ymax: 21,
},
markerGraphics: [
{
type: "CIMMarkerGraphic",
geometry: {
rings: [
[
[17.17, 14.33],
[16.97, 12.96],
[16.38, 11.37],
[12.16, 3.98],
[11.2, 1.94],
[10.5, 0],
[9.8, 1.96],
[8.84, 4.02],
[4.61, 11.41],
[4.02, 12.98],
[3.83, 14.33],
[3.96, 15.63],
[4.34, 16.88],
[4.95, 18.03],
[5.78, 19.04],
[6.8, 19.88],
[7.95, 20.49],
[9.2, 20.87],
[10.5, 21],
[11.8, 20.87],
[13.05, 20.5],
[14.2, 19.88],
[15.22, 19.05],
[16.05, 18.03],
[16.66, 16.88],
[17.04, 15.63],
[17.17, 14.33],
],
],
},
symbol: {
type: "CIMPolygonSymbol",
symbolLayers: [
{
type: "CIMSolidStroke",
enable: true,
capStyle: "Round",
joinStyle: "Round",
lineStyle3D: "Strip",
miterLimit: 10,
width: 0,
color: [110, 110, 110, 255],
},
{
type: "CIMSolidFill",
enable: true,
color: [0, 0, 0, 255],
},
],
},
},
],
scaleSymbolsProportionally: true,
respectFrame: true,
},
],
},
},
})
// Create a map using the basemap places style
const map = new Map({
basemap: basemap,
})
Filter places by style category
This example shows how to control the visibility of places on the client side by selecting a style category filter. The filter changes the visibility of places based on the active style category. The visibility is changed by setting the visibility property of the source-layer in the style.
const filterByCategory = category => {
const layerStyle = attributedPlaces.currentStyleInfo
const places = layerStyle.style.layers.filter(
lyr => lyr.source === "esri-places"
)
places.forEach(lyr => {
const layoutProps = attributedPlaces.getLayoutProperties(lyr.id)
if (lyr.id.startsWith(category) || category === "All") {
layoutProps["visibility"] = "visible"
attributedPlaces.setLayoutProperties(lyr.id, layoutProps)
} else {
layoutProps["visibility"] = "none"
attributedPlaces.setLayoutProperties(lyr.id, layoutProps)
}
})
}
Get additional place information
This example shows how to access place attributes in the basemap and then request more attributes with the places service. It allows users to click on a place to get the esri_ from the basemap place feature and then calls the places service place/place operation. Attributes such as description, address:, contact, and rating: can be returned. To learn more about the attributes you can request, go to Get place details.
const placeParams = new FetchPlaceParameters({
apiKey,
placeId: currentPID,
requestedFields: [
"name",
"location",
"hours",
"rating",
"socialMedia",
"address:streetAddress",
"contactInfo:telephone",
"contactInfo:website",
"contactInfo:email",
"categories",
],
})
const featureResults = await places.fetchPlace(placeParams)
Tutorials
Services
Basemap styles service (v2)
Access basemap styles and additional features such as localized languages, worldviews, and places.
Places service
Find and get details about businesses, places, and other POI.
API support
| 2D Display | 3D Display | Basemap layers | Basemap places | Data layers | Graphics | Web maps | Web scenes | |
|---|---|---|---|---|---|---|---|---|
| ArcGIS Maps SDK for JavaScript | 1 | |||||||
| ArcGIS Maps SDK for .NET | ||||||||
| ArcGIS Maps SDK for Kotlin | ||||||||
| ArcGIS Maps SDK for Swift | ||||||||
| ArcGIS Maps SDK for Java | ||||||||
| ArcGIS Maps SDK for Qt | ||||||||
| ArcGIS API for Python | ||||||||
| ArcGIS REST JS | 2 | 2 | ||||||
| Esri Leaflet | 3 | 4 | ||||||
| MapLibre GL JS | 3 | 4 | ||||||
| OpenLayers | 1 | 3 | 4 | |||||
| CesiumJS | 3 | 4 |
- 1. Display places only.
- 2. Access via HTTP request and authentication.
- 3. Access via Feature layer or Map tile layer.
- 4. Access via layers.