Zoom in on a country when you click on the country's name in a side panel

Question

In my proof of concept app (see link below), when you click on the button, the map of Haiti is highlighted and the country's name is displayed in the side panel.  You will zoom in a bit further when you click the map of the country and the name of a city is displayed in the side panel.

ICGC WEB PORTAL

I would like to do something similar when clicking on the name of the country in the side panel. That is, zoom a bit further to Haiti.Any suggestions as to the best way to get this done would be appriciated

Chris

JohnGravois · Answer

Hi Chris,

your threads stand a lot better chance of generating feedback if you work harder to articulate exactly what research you've already done and what you've already tried.  what you're asking can be broken up into several parts:

1) how do I know that someone has clicked text on my page?

the good news here if that this question is not peculiar to GIS web development, its pure HTML/JavaScript, so there are a lot of different resources out there available to you!

this first step can be broken up even further:

a) how would I create an event listener for text that comes from plain old static <html>?

b) once i can do that, do I need to do anything differently if the text was inserted via arbitrary JavaScript?

before you start worrying about recentering the map, stick with something straightforward (like calling 'alert('yes!');')

2) once I know that someone has clicked on my item of interest, how do I take advantage of that opportunity to set the extent of my map?  what would I need to have available?

this part actually is a GIS web dev question, but the documentation is there to help you, and will hopefully explain how to dig into a particular L.geoJson feature and use its properties and methods to manipulate the map (using its methods).  the good news here is that if you forget about the first part of your problem temporarily, you can Google different combinations of search terms to research the Leaflet components in play to see what you'll have to do differently than what you already did when someone clicks a button.

before you figure out how to listen for someone clicking on text, you can work on passing what you think will be available (and useful) via a global variable to a trigger you're comfortable with (like just calling your own method manually)

after the individual problems are solved, it'll be time to hook everything up together.  and if you get stuck along the way, you'll have a much more specific (hopefully searchable) question.

Hope all that makes sense.

the tl;dr is:

all problems are more solvable when they are as small as possible.

internet searches for help with small, discrete questions yield dramatically more relevant results than requests for assistance achieving a final outcome.

stick with it!  it gets easier with practice.