Learn how to change the basemap style in a map using the Basemap styles service.
The basemap styles service provides a number of ArcGIS and OSM basemap layer styles such as topography, navigation, outdoors, and imagery that you can use in maps.
In this tutorial, you will use a Calcite Combobox to select and display different basemap styles.
Prerequisites
Steps
Create a new pen
- 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 location services used in this tutorial.
- Go to the Create an API key tutorial and create an API key with the following privilege(s):
- Privileges
- Location services > Basemaps
- Privileges
- In CodePen, set
esri
to your access token.Config.api Key Use dark colors for code blocks var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
To learn about other ways to get an access token, go to Types of authentication.
Create a basemap style function
In a new <script
at the bottom of the <body
, create a function that accepts a basemap style id and updates the map to the corresponding basemap style.
-
Define a new
update
function that accepts a style id and updates the current basemap.Basemap Style Use dark colors for code blocks <script> const updateBasemapStyle = (basemapId) => { document.querySelector("arcgis-map").basemap = basemapId; }; </script>
Add a Calcite combobox to change the basemap style
Reference additional basemap styles you would like to use in your application. Use a Calcite combobox to change the basemap style.
-
Create a Placement component to add the combobox to the top-right corner of the map.
Use dark colors for code blocks <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.027" zoom="13"> <arcgis-zoom position="top-left"></arcgis-zoom> <arcgis-placement position="top-right"> </arcgis-placement> </arcgis-map>
-
Create a HTML
div
element with a calcite label and combobox component with the basemap styles.Use dark colors for code blocks <arcgis-placement position="top-right"> <div id="basemapStyles"> <calcite-label> Basemap Style: <calcite-combobox id="styleCombobox" selection-mode="single" clear-disabled> <calcite-combobox-item value="arcgis/navigation" text-label="arcgis/navigation"></calcite-combobox-item> <calcite-combobox-item value="arcgis/navigation-night" text-label="arcgis/navigation-night"></calcite-combobox-item> <calcite-combobox-item value="arcgis/streets" text-label="arcgis/streets"></calcite-combobox-item> <calcite-combobox-item value="arcgis/streets-relief" text-label="arcgis/streets-relief"></calcite-combobox-item> <calcite-combobox-item value="arcgis/streets-night" text-label="arcgis/streets-night"></calcite-combobox-item> <calcite-combobox-item value="arcgis/outdoor" text-label="arcgis/outdoor"></calcite-combobox-item> <calcite-combobox-item value="arcgis/imagery" text-label="arcgis/imagery"></calcite-combobox-item> <calcite-combobox-item value="arcgis/topographic" text-label="arcgis/topographic" selected></calcite-combobox-item> <calcite-combobox-item value="arcgis/terrain" text-label="arcgis/terrain"></calcite-combobox-item> <calcite-combobox-item value="arcgis/oceans" text-label="arcgis/oceans"></calcite-combobox-item> <calcite-combobox-item value="arcgis/light-gray" text-label="arcgis/light-gray"></calcite-combobox-item> <calcite-combobox-item value="arcgis/dark-gray" text-label="arcgis/dark-gray"></calcite-combobox-item> <calcite-combobox-item value="arcgis/human-geography" text-label="arcgis/human-geography"></calcite-combobox-item> <calcite-combobox-item value="arcgis/human-geography-dark" text-label="arcgis/human-geography-dark"></calcite-combobox-item> <calcite-combobox-item value="arcgis/charted-territory" text-label="arcgis/charted-territory"></calcite-combobox-item> <calcite-combobox-item value="arcgis/colored-pencil" text-label="arcgis/colored-pencil"></calcite-combobox-item> <calcite-combobox-item value="arcgis/nova" text-label="arcgis/nova"></calcite-combobox-item> <calcite-combobox-item value="arcgis/modern-antique" text-label="arcgis/modern-antique"></calcite-combobox-item> <calcite-combobox-item value="arcgis/midcentury" text-label="arcgis/midcentury"></calcite-combobox-item> <calcite-combobox-item value="arcgis/newspaper" text-label="arcgis/newspaper"></calcite-combobox-item> <calcite-combobox-item value="osm/standard" text-label="osm/standard"></calcite-combobox-item> <calcite-combobox-item value="osm/standard-relief" text-label="osm/standard-relief"></calcite-combobox-item> <calcite-combobox-item value="osm/navigation" text-label="osm/navigation"></calcite-combobox-item> <calcite-combobox-item value="osm/navigation-dark" text-label="osm/navigation-dark"></calcite-combobox-item> <calcite-combobox-item value="osm/streets" text-label="osm/streets"></calcite-combobox-item> <calcite-combobox-item value="osm/hybrid" text-label="osm/hybrid"></calcite-combobox-item> <calcite-combobox-item value="osm/light-gray" text-label="osm/light-gray"></calcite-combobox-item> <calcite-combobox-item value="osm/dark-gray" text-label="osm/dark-gray"></calcite-combobox-item> <calcite-combobox-item value="osm/blueprint" text-label="osm/blueprint"></calcite-combobox-item> </calcite-combobox> </calcite-label> </div> </arcgis-placement>
-
Apply some CSS styling to the
basemap
div within theStyles <style
tags.> Use dark colors for code blocks #basemapStyles { background-color: white; border-radius: 5px; padding: 10px; width: 250px; }
-
Add an event listener to watch for changes on the combobox. When the combobox value has changed, call the
update
function to update the basemap style.Basemap Style Use dark colors for code blocks document.querySelector("#styleCombobox").addEventListener("calciteComboboxChange", (event) => { updateBasemapStyle(event.target.value); });
Run the App
In CodePen, run your code to display the map.
Use the Calcite combobox in the top right to select and explore different basemap styles from the Basemap styles service (v2).
What's Next?
Learn how to use additional API features and ArcGIS services in these tutorials: