BasemapStyle | API Reference | ArcGIS Maps SDK for JavaScript 4.30

The style of the basemap from the basemap styles service (v2). The basemap styles service is a ready-to-use location service that serves vector and image tiles representing geographic features around the world.

You can use the basemap styles service to display:

Streets and navigation styles
Imagery, oceanic, and topographic styles
OSM standard and streets styles
Creative styles such as nova and blue print
Localized place labels
Places with styles - since 4.29
Worldview boundaries - since 4.29

Use of the basemap style service requires authentication via an API key or user authentication. To learn more about API keys, see the API keys section in the Esri Developer documentation.

See also

Example

const basemap = new Basemap({
  style: new BasemapStyle({
    id: "arcgis/human-geography",
    language: "es" // place labels will be displayed in spanish
  })
})

Constructors

BasemapStyle Constructor new BasemapStyle(properties)

Parameter

properties Object

optional

See the properties for a list of all the properties that may be passed into the constructor.

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.

Show inherited properties

Hide inherited properties

Type	Summary	Class
String	The name of the class.	Accessor
String	The id of the basemap style.	BasemapStyle
String	The language of the place labels in the basemap style.	BasemapStyle
String	Indicates whether to display places with the basemap style.	BasemapStyle
String	The URL to the basemap styles service.	BasemapStyle
String	Displays country boundaries and labels based on a specific view of a country.	BasemapStyle

Property Details

declaredClass Inherited Property declaredClass Stringreadonly Inherited from Accessor

The name of the class. The declared class name is formatted as esri.folder.className.

id Property id String

The id of the basemap style. The values are of the form {provider}/{style} where provider is "arcgis" or "osm". Examples include arcgis/navigation and osm/standard. See ArcGIS basemap styles and OSM basemap styles for the full list of available styles.

See also

Example

// sets the basemap to the OSM standard relief style
basemap.style = {
  id: "osm/standard-relief"
}

// sets the basemap to the arcgis outdoor style
basemap.style.id = "arcgis/outdoor";

language Property language String

The language of the place labels in the basemap style. Choose from a variety of supported languages, including global and local.

If not set, the app's current locale is used. If the app's locale is not supported by the service, the language will fall back to "global".

See also

Supported languages

Example

// basemap place labels will in spanish
basemap.style = {
  id: "arcgis/outdoor",
  language: "es"
}

// basemap style will use the names of places in their local language (e.g. "Lisboa" for Lisbon)
basemap.style.language = "local";

places Property places String Since: ArcGIS Maps SDK for JavaScript 4.29 BasemapStyle since 4.28, places added at 4.29.

Indicates whether to display places with the basemap style. Only supported with the arcgis/navigation and arcgis/navigation-night styles.

Possible Values:"all" |"attributed" |"none"

See also

Basemap places

Example

const basemapWithPlaces = new Basemap({
  style: new BasemapStyle({
    id: "arcgis/navigation",
    places: "all"
  })
})

serviceUrl Property serviceUrl String

The URL to the basemap styles service.

Default Value:"https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/webmaps"

worldview Property worldview String Since: ArcGIS Maps SDK for JavaScript 4.29 BasemapStyle since 4.28, worldview added at 4.29.

Displays country boundaries and labels based on a specific view of a country. Choose from a variety of supported worldviews.

Worldviews can only be specified for arcgis basemap styles (OSM is not supported). When a specific worldview is chosen, it is possible for some place labels to change language. However, when a specific language is provided, it will take priority over the language changes associated with the worldview.

See also

Supported worldviews

Example

const moroccoBasemap = new Basemap({
  style: new BasemapStyle({
    id: "arcgis/streets",
    worldview: "morocco",
    language: "ar"
  })
})

Method Overview

Show inherited methods

Hide inherited methods

Return Type	Summary	Class
	Adds one or more handles which are to be tied to the lifecycle of the object.	Accessor
Boolean	Returns true if a named group of handles exist.	Accessor
	Removes a group of handles owned by the object.	Accessor

Method Details

addHandles Inherited Method addHandles(handleOrHandles, groupKey) Inherited from Accessor

Adds one or more handles which are to be tied to the lifecycle of the object. The handles will be removed when the object is destroyed.

// Manually manage handles
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true }
);

this.addHandles(handle);

// Destroy the object
this.destroy();

Parameters

handleOrHandles WatchHandle|WatchHandle []

Handles marked for removal once the object is destroyed.

groupKey *

optional

Key identifying the group to which the handles should be added. All the handles in the group can later be removed with Accessor.removeHandles(). If no key is provided the handles are added to a default group.

hasHandles Inherited Method hasHandles(groupKey){Boolean} Inherited from Accessor

Returns true if a named group of handles exist.

Parameter

groupKey *

optional

A group key.

Returns

Type	Description
Boolean	Returns `true` if a named group of handles exist.

Example

// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
  obj.removeHandles("watch-view-updates");
}

removeHandles Inherited Method removeHandles(groupKey) Inherited from Accessor

Removes a group of handles owned by the object.

Parameter

groupKey *

optional

A group key or an array or collection of group keys to remove.

Example

obj.removeHandles(); // removes handles from default group

obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");