Migration

How to migrate from Mapbox to MapLibre

If you have an existing Mapbox GL JS application, it is easy to update your application to use MapLibre GL JS. In most cases you can simply replace the JS and CSS references.

Use dark colors for code blocks
1
2
3
4
5
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/vx.x.x/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/vx.x.x/mapbox-gl.css" rel="stylesheet" />

<script src=https://unpkg.com/maplibre-gl@4/dist/maplibre-gl.js></script>
<link href=https://unpkg.com/maplibre-gl@4/dist/maplibre-gl.css rel="stylesheet" />

How to migrate to ArcGIS basemap styles

You can use the ArcGIS basemap styles service styles to provide the basemap for your application. There are over 30 different styles to choose from such as streets, navigation, light gray, dark gray, OpenStreetMap, and satellite imagery. You can also create and use your own custom basemap styles by using the Vector tile style editor.

The general steps are below:

  1. Get an API key or implement OAuth 2.0.
  2. Set the basemap styles service URL and style enumeration. Learn more in Introduction to basemap layers.
  3. Display the map.

Examples

MapTiler to ArcGIS

Use dark colors for code blocks
1
2
3
4
5
6
7
8
const accessToken = "YOUR_ACCESS_TOKEN";
const map = new maplibregl.Map({
  container: 'map',
  style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
  style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:Streets?type=style&token=${accessToken}`,
  center: [12.550343, 55.665957],
  zoom: 8
});

Mapbox to ArcGIS

Use dark colors for code blocks
1
2
3
4
5
6
7
8
const accessToken = "YOUR_ACCESS_TOKEN";
const map = new maplibregl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:Navigation?type=style&token=${accessToken}`,
  center: [12.550343, 55.665957],
  zoom: 8
});

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