Use MapBox GL JS without Access Token

Question

Is there a way to use MapBox GL JS without access token? I cannot find any hint in the documentation of MapBox GL JS, however, Uber suggest that it is possible with their library, providing React Components for MapBox GL JS.

From the documentation of react-map-gl

Display Maps Without A Mapbox Token

It is possible to use the map component without the Mapbox service, if you use another tile source (for example, if you host your own map tiles). You will need a custom Mapbox GL style that points to your own vector tile source, and pass it to ReactMapGL using the mapStyle prop. This custom style must match the schema of your tile source.

Source https://uber.github.io/react-map-gl/#/Documentation/getting-started/about-mapbox-tokens

Is it possible to use the "native" MapBox GL JS without Access Token? If so, how?

@charlietfl I do not want to use MapBox Tile source, but provide my own tiles from my own server... — four-eyes, Jul 29 '19 at 13:03
Possible duplicate of [react-map-gl without API key using osm tiles](https://stackoverflow.com/q/53669727/1804173) — bluenote10, Sep 01 '19 at 08:27

score 12 · Accepted Answer · answered Jul 30 '19 at 07:59

12

Yep, as the comments mention, just don't set the accessToken and refrain from using any mapbox styles or tiles:

var map = new mapboxgl.Map({
    container: 'map'
    center: [-74.50, 40],
    zoom: 9
});

Then you can add your layer programmatically via map.addLayer/addSource or just create your own style.json file referencing your tile server and layers. The style specification is documented extensively here: https://docs.mapbox.com/mapbox-gl-js/style-spec/

answered Jul 30 '19 at 07:59

Scarysize

4,131
25
37

1

This doesn't seem to be the case anymore; Mapbox GL JS v2.0+ requires an API key to even initialize the map. :( Oh well. – Matt Dec 05 '22 at 05:06

score 5 · Answer 2 · answered Apr 06 '20 at 15:08

As people have already commented you need to add your own data source, stamens have some open tiles services or normal OSM would do. Change the style key to be an object with a source and layers parameters. The Mapbox style docs are pretty good. https://docs.mapbox.com/mapbox-gl-js/style-spec/

I have created a medium post which goes step by step - https://medium.com/@markallengis/simple-web-map-using-mapbox-gl-js-a44e583e0589

Quick example of what I mean below, note if your service is vector then update type.

style:{
        'version': 8,
        'sources': {
          'raster-tiles': {
            'type': 'raster',
            'tiles': [
              'https://yourtileservicehere/{z}/{x}/{y}.jpg'
            ],
            'tileSize': 256,
          }
        },
        'layers': [{
          'id': 'simple-tiles',
          'type': 'raster',
          'source': 'raster-tiles',
          'minzoom': 0,
          'maxzoom': 22
        }]
      }

Mapbox have now changed mapbox-gl-js in version 2 to no longer be Open, you will have to have a key going forward, so above reply is now out of date. There are several forks already - https://github.com/maplibre/maplibre-gl-js — mark, Dec 14 '20 at 16:36

Stan · Answer 3 · 2019-09-11T09:41:42.273

1

Check out this code snipped at: https://docs.mapbox.com/mapbox-gl-js/example/map-tiles/ You can delete the line with "mapboxgl.accessToken" and your good to go.

I have just tested it with the ReactMapboxGL component and it works! Just pass the "mapStyle" prop to the component with the style object from the docs.

edited Sep 11 '19 at 09:41

answered Sep 11 '19 at 09:29

Stan

1,800
1
13
15

This is great for making your code public in fidles or github, without exposing your key. Thanks a lot.. – Johan Hoeksma Mar 01 '21 at 13:32

score 0 · Answer 4 · answered Jun 01 '23 at 15:34

There is also one solution where you do not need any mapbox because, after mapbox v2 it requires a token and it will not help out the users for future features implementation. There is one replacement for mapbox which MAPLIBRE. You can use the maplibre css for the map implementation and Cartocdn JSON file for map styling (cities, road, schools etc.) You can add the datasets, clusters and other features too with this map.

Here is the code snippet using react, maplibre and javascript:

import React, { useState, useEffect, useRef } from 'react';
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';


  const MaplibreUe = () => {
  const mapContainer = useRef(null);
  const [viewState, setViewState] = useState({
    center: [-100.43, 35],
    zoom: 5,
    pitch: 50
  });

  useEffect(() => {
      const map = new maplibregl.Map({
      container: mapContainer.current,
      style: 'https://tiles.basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
      ...viewState,
    });

    map.addControl(new maplibregl.ScaleControl(), 'bottom-right');
    map.addControl(new maplibregl.FullscreenControl(), 'bottom-right');
    map.addControl(new maplibregl.NavigationControl(), 'bottom-right');
    map.addControl(new maplibregl.GeolocateControl(), 'bottom-right');

   return () => {
      map.remove();
    };
  
  }, []);

  return (
    <>
      <div
        ref={mapContainer}
        style={{
          width: '100%',
          height: '100%',
          position: 'absolute',
        }}
      ></div>
    </>
  );
};

export default MaplibreUe;

Use MapBox GL JS without Access Token

4 Answers4

Linked