Zoom to a country on a map when you click on a the country's name on a list - leaflet

Question

I have a application that shows a highlighted list of countries on a map and their names in a side panel
I would like to make the following happen: When you click on the name of a country in the side panel. you zoom to the country on the map.
I am not sure how to make this happen and would appreciate it if someone point me to an example or suggest the best way to make this happen

Answer 1

Really depends upon your set-up and I'am assuming you are using geoJSON. In a project I worked on, I created a function that is ran once you click from a list that zooms to the corresponding geoJSON ... or you could attach the leaflet ID for each geoJSON layer to the corresponding elements of the list if the list populated from the geoJSON.
markers - collected geoJSON
layer.feature.properties.pin - the corresponding key that matches the listed record with the geoJSON (this needs to match your data)
pin - the corresponding element from the list (this needs to match your data)
The 1st setStyle - highlights the geoJSON
map.fitbounds - zooms to highlighted info
The 2nd setStyle - changes all of the other geoJSON layers back to the original style.
function selectedparcel(pin){
markers.eachLayer(function (layer){
if (layer.feature.properties.pin === pin){
layer.setStyle({
fillColor: '#2262CC',
fillOpacity: 1,
weight: 3
});
//this is where the zoom happens
map.fitBounds(layer.getBounds());
} else {
layer.setStyle({
color: '#ff7800',
weight: 1,
opacity: 1,
fillOpacity: 0
});
}
});
I hope this is what you were looking for. If you want to use the leaflet id method Bryan McBride has an example within his js code here:
https://github.com/bmcbride/building-damage-reporter