Is using leaflet with Mapbox GL JS possible?

Question

I'm attempting to use leaflet layers on a project using a mapbox GL JS map. Mapbox offers two different ways to instantiate a map, and all the leaflet examples are using the 'classic' Mapbox API. I've build a whole experience using the GL JS way (seemed to have more robust features and documentation):

    map = new mapboxgl.Map({
    container: 'map', // container id
    style: videoStyle,
    center: [-73.945360, 40.717533], // starting position
    bearing: 90,
    zoom: mapInitZoom // starting zoom
    });

However, now that I need to use leaflet in order to get the distance from the center point, all of the leaflet documentation instantiates maps like this:

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

Is there a way I can continue my project using the Mapbox GL JS API and leaflet combined? Can anyone direct me to an examples or parts of the API documentation where I can read about this?

Oh, and the reason I think I need leaflet is because I need to add image layers to my map like this reference diagram image:

kmandov kmandov · Accepted Answer · 2016-10-07T08:21:55

You can add image to a mapbox-gl-js map. Here is an example on how to do this: https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/

As you can see in the example, you need to add an ImageSource:

map.addSource('overlay', {
   type: 'image',
   url: 'https://www.mapbox.com/images/foo.png',
   coordinates: [
       [-76.54, 39.18],
       [-76.52, 39.18],
       [-76.52, 39.17],
       [-76.54, 39.17]
   ]
});

and then a Raster Layer based on this source:

map.addLayer({
        'id': 'overlay',
        'source': 'overlay',
        'type': 'raster',
        'paint': {'raster-opacity': 0.85}
    });

Generally speaking Leaflet.js / mapbox.js is best suited for raster tile sets, while mapbox-gl-js is for vector tile sets.

If you want to use Leaflet with a vector tile set, you can have a look at some of the Leaflet plugins that support vector tile sets: https://github.com/mapbox/awesome-vector-tiles#clients

Is using leaflet with Mapbox GL JS possible?

1 Answers