Introduction to basemap layers

A map is a container for layers. You use a map together with a map view to display layers of geographic data in 2D. Most applications contain a basemap layer to display geographic data with streets or satellite imagery, and the data is typically provided by the basemap styles service.

You can use the basemap styles service in your application to:

Display different types of geographic data of the world for a map.
Display default vector tile basemap styles such as streets navigation, light gray canvas, and OSM.
Display custom basemap styles with your own colors, glyphs, and fonts.
Display default image tile (raster) basemap layers for satellite imagery and hillshade.

How to access the basemap styles service

The data format for ArcGIS basemap layers is based on the Mapbox vector tile specification. To access vector basemap layers, you use the ol-mapbox-style library.

Reference the OpenLayers CSS, JS, and ol-mapbox-style libraries.
Select a basemap style enumeration.
Set the style URL and your API key.
Load and apply the basemap style to a map using olms.

Example

Display a basemap layer (v1)

This example loads and displays the ArcGIS:Streets vector tile style in the map. To see all of the basemap style enumerations, go to Basemap styles service in the Mapping APIs and location services guide.

Use dark colors for code blocksCopy
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@10.5.0/dist/olms.js"></script>

    <script>

      const map = new ol.Map({ target: "map" });

      map.setView(
        new ol.View({
          center: ol.proj.fromLonLat([-118.805, 34.027]),
          zoom: 12
        })
      );

      const apiKey = "YOUR_API_KEY";

      const basemapId = "ArcGIS:Streets";

      const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey;

      olms.apply(map, basemapURL);

    </script>
Go to tutorial

To learn more, see the Display a map and Change the basemap layer tutorials.

Display a basemap layer (v2)

This example loads and displays the arcgis/streets style from version 2 of the basemap styles service (currently in beta). To see all of the basemap style enumerations, go to Basemap styles service v2 (beta) in the REST API documentation.

Use dark colors for code blocksCopy
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@10.5.0/dist/olms.js"></script>
<script>

    const map = new ol.Map({ target: "map" });

    const apiKey = "YOUR_API_KEY";
    const basemapId = "arcgis/streets";

    const basemapURL = "https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles" + basemapId + "?type=style&token=" + apiKey;
    olms.apply(map, basemapURL);

</script>