サイドパネルの国名をクリックすると、その国にズームインします

Question

私の概念実証アプリ（以下のリンク参照）では、ボタンをクリックするとハイチの地図がハイライトされ、国名がサイドパネルに表示されます。国の地図をクリックするとさらにズームインし、都市名がサイドパネルに表示されます。<\/P> <\/P> ICGC WEB PORTAL<\/A><\/P> <\/P> サイドパネルの国名をクリックしたときにも同様のことをしたいと考えています。つまり、ハイチにもう少しズームインするということです。これを実現する最良の方法についてご提案いただけると幸いです。<\/P> <\/P> クリス<\/P>

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.