Mapbox GL JS and ArcGIS location services

Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles. This guide contains tutorials to help you start working with Mapbox GL JS and ArcGIS location services to build different types of mapping applications.

Maps

Learn how to create and display maps with basemap layers.

Layers

Learn how to add different types of data layers to maps.

Query and edit

Learn how to work with feature layers and feature services.

Style and data visualization

Learn how to style data layers and basemap layers for maps.

Geocode and search

Learn how to find addresses, businesses, and places with the geocoding service.

Route and directions

Learn how to find a route and directions and service areas with the routing service.

Demographic data

Learn how to get demographic data with the GeoEnrichment service.

Get started

To access the services, you need a free ArcGIS developer account and an API key from your dashboard .

1. Sign up for a free developer account

Create a free account

2. Get an API key

Sign in to your developer dashboard

3. Quick start

This map contains the Navigation basemap layer style from the basemap layer service.

To build this map:

  1. Open the code in .

  2. Replace the apiKey with your API key from the dashboard .

    Change line
                                                 
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>Mapbox GL JS Tutorials: Display a map</title>
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          }
        </style>
    
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
      </head>
    
      <body>
        <div id="map"></div>
    
        <script>
    
          const apiKey = "YOUR-API-KEY";
          const basemapEnum = "ArcGIS:Navigation";  // Basemap layer style
    
          const map = new mapboxgl.Map({
            container: "map", // ID of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`,
            zoom: 1,
            center: [-5, 30] // Starting location [longitude, latitude]
          });
    
        </script>
    
      </body>
    
    </html>

4. Tutorials

Follow step-by-step tutorials to learn how to use Mapbox GL JS with other services.

See all tutorials