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.
<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@5.4.0/dist/maplibre-gl.js></script>
<link href=https://unpkg.com/maplibre-gl@5.4.0/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, satellite imagery, and OpenStreetMap styles (now in mature support). You can also create and use your own custom basemap styles by using the Vector tile style editor.
The general steps are below:
- Get an API key or implement OAuth 2.0.
- Set the basemap styles service URL and style enumeration. Learn more in Introduction to basemap layers.
- Display the map.
Examples
MapTiler to ArcGIS
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
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
});