在没有访问令牌的情况下使用 MapBox GL JS

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?

Answer 1

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/

Answer 2

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
        }]
      }

Answer 3

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.