CODEWITHSUNDEEP
javascriptleafletmapboxmapbox-gl-jsmapbox-gl-leaflet
hofshteyn
hofshteyn

Reputation: 1272

Mapbox-gl-leaflet: mapbox events doesn't fires

I've been looking answer for my question but result is null :D

I'm used leaflet map. Now I'm trying to move logic to mapbox-gl. I'm doing it with mapbox-gl-leaflet because it allow me to combine leaflet and mapbox features.

But I faced with problem that I can't use mapbox's events like .on('mousemove' of 'mouseenter' etc. Leaflet events works fine but I need to work with mapbox's events beacause I can bind events on layers, not for the whole map.

Here's example that demonstrates working of events with mapbox-gl-leaflet. And also attach a jsfiddle example:

let leafletMap = L.map('map').setView([38.912753, -77.032194], 2);

L.marker([38.912753, -77.032194])
  .bindPopup("Hello <b>Leaflet GL</b>!<br>Whoa, it works!")
  .addTo(leafletMap)
  .openPopup();

var gl = L.mapboxGL({
  accessToken: "pk.eyJ1IjoicGF0cmlrMDAwIiwiYSI6ImNqemw1OW9mNzBqeGMzZG4wYzZqMHI0djQifQ.G1bbUCb8OxmhGlKB_y_aat",
  style: 'mapbox://styles/mapbox/bright-v8'
}).addTo(leafletMap);

gl._glMap.on('load', () => {
  console.log('MAPBOX map loaded');

  // let's see events on mapbox map
  gl._glMap.on('mousemove', () => { console.log('MAPBOX mousemove') });
  gl._glMap.on('mouseenter', () => { console.log('MAPBOX mouseenter') });
  gl._glMap.on('mouseout', () => { console.log('MAPBOX mouseout') });
  gl._glMap.on('mouseleave', () => { console.log('MAPBOX mouseleave') });
  gl._glMap.on('mouseover', () => { console.log('MAPBOX mouseover') });

  // let's add some layer and fire events on it

  gl._glMap.addSource('states', {
    'type': 'geojson',
    'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson'
  });
  gl._glMap.addLayer({
    'id': 'state-fills',
    'type': 'fill',
    'source': 'states',
    'layout': {},
    'paint': {
      'fill-color': '#627BC1',
      'fill-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 1, 0.5 ]
    }
  });

  gl._glMap.on('mouseenter', 'state-fills', (e) => {console.log('state-fills mouseenter', e) });
  gl._glMap.on('mousemove', 'state-fills', (e) => {console.log('state-fills mousemove', e) });
  gl._glMap.on('mouseout', 'state-fills', (e) => {console.log('state-fills mouseout', e) });
  gl._glMap.on('mouseleave', 'state-fills', (e) => {console.log('state-fills mouseleave', e) });

})

// now let's see on leaflet map events
// SPOILER: they are works
leafletMap.on('mousemove', () => { console.log('LEAFLET mousemove') });
leafletMap.on('mouseenter', () => { console.log('LEAFLET mouseenter') });
leafletMap.on('mouseout', () => { console.log('LEAFLET mouseout') });
leafletMap.on('mouseleave', () => { console.log('LEAFLET mouseleave') });
leafletMap.on('mouseover', () => { console.log('LEAFLET mouseover') });

JSFIDDLE: https://jsfiddle.net/hofshteyn/vat9skq5/2/

So how can I fire mapbox events here?

Upvotes: 0

Views: 699

Answers (1)

Anuj Singh
Anuj Singh

Reputation: 1

If you want to combine leaflet and mapbox together take a look in this code snippit.

  • Leaflet with mapbox
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Plain Leaflet API</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.2.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.2.0/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>


<div id='map'></div>

<script>
L.mapbox.accessToken = '<your access token here>';

var mapboxTiles = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=' + L.mapbox.accessToken, {
       attribution: '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

var map = L.map('map')
  .addLayer(mapboxTiles)
  .setView([42.3610, -71.0587], 15);
</script>


</body>
</html>

If you want to use mapbox vector tile then you should to use Leaflet.MapboxVectorTile

Upvotes: 0

Related Questions