title: Is using leaflet with Mapbox GL JS possible?
body: <p>I'm attempting to use leaflet layers on a project using a <a href="https://www.mapbox.com/mapbox-gl-js/api/" rel="nofollow noreferrer">mapbox GL JS map</a>. Mapbox offers two different ways to instantiate a map, and all the leaflet examples are using the <a href="https://www.mapbox.com/mapbox.js/api/v2.4.0/" rel="nofollow noreferrer">'classic' Mapbox API</a>. I've build a whole experience using the GL JS way (seemed to have more robust features and documentation):</p>
  
  <pre><code>    map = new mapboxgl.Map({
      container: 'map', // container id
      style: videoStyle,
      center: [-73.945360, 40.717533], // starting position
      bearing: 90,
      zoom: mapInitZoom // starting zoom
      });
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>var mymap = L.map('mapid').setView([51.505, -0.09], 13);
  </code></pre>
  
  <p>Is there a way I can continue my project using the <a href="https://www.mapbox.com/mapbox-gl-js/api/" rel="nofollow noreferrer">Mapbox GL JS API</a> and leaflet combined? Can anyone direct me to an examples or parts of the API documentation where I can read about this?</p>
  
  <p>Oh, and the reason I <em>think</em> I need leaflet is because I need to add image layers to my map like this reference diagram image:<a href="https://i.stack.imgur.com/A8shl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A8shl.png" alt="enter image description here"></a></p>