Get started

To start building applications with location services, you need either an ArcGIS Developer account or ArcGIS Online account.

1. Sign in with your ArcGIS account

Get a free developer account

2. Get an access token

Use an API key or OAuth 2.0 access token from your developer dashboard. Learn more in Security and authentication.

Get an API key

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 .

    Use dark colors for code blocks
                                                 
    Change line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <!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&token=${apiKey}`,
            zoom: 1,
            center: [-5, 30] // Starting location [longitude, latitude]
          });
    
        </script>
    
      </body>
    
    </html>

4. Explore tutorials

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

See all tutorials

5. Deploy your application

Learn about general guidelines and the Terms of use before distributing your application.

Learn more

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.