topic Re: Adding more functionality to my esri-leaflet app in Open Source Mapping Libraries Ques.

Adding click and zoom functionality

joepublic — Mon, 28 Aug 2023 13:40:01 GMT

I have the following app (ICGC WEB PORTAL) Based on which button at the top clicked on, certain countries are highlighted, I need help with the following:

I want to pan to(?)/center on the country clicked on as well as increase the zoom level.

This is my attempt

function getExtent(){

var lat = map.getCenter().lat;

var lng = map.getCenter().lng;

var newCord = [lat, lng];

return newCord;

}

function highlightFeature(e){

var newCenter = getExtent(); <--

var layer = e.target

[stuff omitted]

}

function onEachFeature(feature, layer){

layer.on({

click: highlightFeature

});

}

countries = L.geoJson(featureCollection, {

onEachFeature: onEachFeature

}).addTo(map);

Script attached

Re: Adding more functionality to my esri-leaflet app

JohnGravois — Sun, 12 Dec 2021 10:15:47 GMT

the easiest thing to do would just be to listen for the 'click' event of your featureLayer and use that opportunity to retrieve its bounds and pass them to the map.

featureLayer.on('click', function(evt) {
    // http://leafletjs.com/reference.html#featuregroup-getbounds
    var bounds = evt.layer.getBounds()
    // http://leafletjs.com/reference.html#map-fitbounds
    map.fitBounds(bounds);
});

this is possible because 'L.esri.FeatureLayer' extends 'L.geoJson' and 'L.geoJson' extends 'L.featureGroup', which has a method 'getBounds()'. you can find a working example here.

between all the inheritance and the fact that the documentation for Esri Leaflet and Leaflet itself are in two different places, stuff like this can be confusing until you get the hang of it.

Re: Adding more functionality to my esri-leaflet app

joepublic — Wed, 30 Sep 2015 15:16:27 GMT

John,

Thanks for the assist

Chris