I am using Mapbox GL JS to display a polygon layer. I would to allow the user to choose a name from a dropdown, and then highlight and zoom to the matching polygon.
I already know how to highlight the matching polygon using map.setFilter
, but I don't know how to zoom to the bounds of the matching polygon. This is my current code:
map.addLayer({ 'id': 'polygon_hover', 'source': 'mysource', 'source-layer': 'mylayer', 'type': 'fill', 'paint': { 'fill-color': 'red', "fill-opacity": 0.6 }, "filter": ["==", 'CUSTNAME', ""] }); // Get details from dropdown custname.on("change", function(e) { // get details of name from select event map.setFilter('polygon_hover', ["==", 'CUSTNAME', name]); // Get bounds of filtered polygon somehow? // var bounds = ??; // map.fitBounds(bounds); });
I have examined the Mapbox example of zooming to bounds, but it assumes that you already know what the bounds are.
Is there any way it's possible to get the bounds of the polygon matching a map filter in Mapbox?
0 comments:
Post a Comment