Interactivity seems to not work about mapbox-gl-leaflet HOT 7 CLOSED

Your code returns all the features in the viewport, at least for me. Adding the following below gets back just the feature at the clicked point, until you pan the map that is, then weird things start to happen, so maybe this is not right. My previous method still works - at least for one layer - though I now see you don't need the interactive options.

glMap.queryRenderedFeatures([e.point], options);//works in pure mapbox.gl.js
glMap.queryRenderedFeatures([e.point.x, e.point.y], options);//sort of works using the leaflet plugin

from mapbox-gl-leaflet.

Anyone able to confirm that this is or isn't possible? If it's not possible I'd really like to know so I can look elsewhere for a way to complete a project I'm working on.

from mapbox-gl-leaflet.

Hello,

To answer @bwyss question, the glMap "click" event is not triggered as leaflet will "catch" it first before it even comes in the mapbox-gl-js layer.
But the solution is rather simple. You need to listen to the click event on the leaflet map, and when you catch it, just query the glMap using queryRenderedFeatures (featuresAt has been deprecated):

map.on("click", function(e){
    var glMap = gl._glMap;
    var point = e.layerPoint;
    // to target only some layers, change the options, see documentation:
    // { layers: ['my-layer-name'] }
    // https://www.mapbox.com/mapbox-gl-js/api/
    var options = {}; 
    var features = glMap.queryRenderedFeatures(point, options);
    console.log(features);
});

@reyemtm About your example, there are couple things that won't work.
First of all, this bit of code

return glData
    options = L.extend({}, glMap2.options, {
      interactive: false,
    });

Will likely not work as you try to do some stuff after the function has returned a value. Also, queryRenderedFeatures returns an array of GeoJSON Features, so if you don't filter it by layer, you will likely not get the result you wish for.

Fabien

from mapbox-gl-leaflet.

@bwyss Did you manage to get any progress on this?

from mapbox-gl-leaflet.

I'm also wondering whether this is possible. Can you pass reference to a mapbox hosted vector layer, which is brought in via Mapbox GL, to Leaflet to use in an on click event?

If it is possible is there any example available? If it's not possible I'd really appreciate if anyone in the know could confirm this.

Thanks.

from mapbox-gl-leaflet.

Pushing the click event can work - see below, with click: true added as an option inside L.mapboxGL. However I am having trouble creating a polygon from the returned glData (stored as a global variable in leaflet-mapbox-gl.js). I can create one polygon, but for some reason once I turn the glData into a polygon in leaflet, the glData doesn't change. Plus it seems the geometry stored inside the tile is not always the true polygon geometry. However the properties can be accessed say for a popup in this way. The code below is in the leaflet-mapbox-gl.js, then the glData is available to the leaflet map, called using map.on('click'...

//inside the _initGL: function() {
if (options.click === true) {
  var glMap2 = this._glMap;
  glMap2.on('click', function(e) {
    glData = "";
    options = L.extend({}, glMap2.options, {
      interactive: true,
    });
    //console.log(e.point);
    glData = glMap2.queryRenderedFeatures(e.point);
    //console.log(glData);
    return glData
    options = L.extend({}, glMap2.options, {
      interactive: false,
    });
  });
}//end click event

map.on('click', function(e) {
  var data = JSON.parse(JSON.stringify(glData));
  var geom = {"type": "Polygon", "coordinates": []};
  geom.coordinates.push(data[0].geometry.coordinates[0]);
  var info = data[0].properties.ACRES;
  $('#mapInfo').html(info);
  var popup = new L.popup()
  .setLatLng(e.latlng)
  .setContent(info)
  .openOn(map);
  var polygon = new L.geoJson(geom);
  //adding the polygon does weird things - the data does not change, ideas??
  //polygon.addTo(map);
});

from mapbox-gl-leaflet.

I guess mapbox-gl-js probably works in pixel coordinates (depending on the viewport) so e.layerPoint from the Leaflet event sounds like the best bet. Or maybe get the coordinates via e.originEvent from the leaflet event. Not sure, it needs some trial and error for sure :)

from mapbox-gl-leaflet.