CODEWITHSUNDEEP
javascriptreactjsmapboxmapbox-gl-js
four-eyes
four-eyes

Reputation: 12439

Use MapBox GL JS without Access Token

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?

Upvotes: 12

Views: 21516

Answers (6)

ZhefengJin
ZhefengJin

Reputation: 1112

at v3.5.1 you need to set testMode as true at Map Constructor like this.

      const map = new mapboxgl.Map({
        container: "map",
        center: [120.3049, 31.4751],
        zoom: 12,
        testMode: true,
      });

Upvotes: 0

Abdullah 7624
Abdullah 7624

Reputation: 1

here is the mapbox public token key that you can use as alternative sloution if you don't able to signup in mapbox "pk.eyJ1IjoiZGVsdGEtc3R1ZHVlbnQiLCJhIjoiY2xvMDk0MTVhMTJ3ZDJrcGR5ZDFkaHl4ciJ9.Gj2VU1wvxc7rFVt5E4KLOQ"

Upvotes: -3

Rana Hamza
Rana Hamza

Reputation: 11

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;

Upvotes: 0

mark
mark

Reputation: 51

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

Upvotes: 5

Stan
Stan

Reputation: 2038

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.

Upvotes: 2

Scarysize
Scarysize

Reputation: 4281

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/

Upvotes: 13

Related Questions