CODEWITHSUNDEEP
javascriptreactjstypescriptmapboxmapbox-gl
user16971617
user16971617

Reputation: 535

Zoom into country

I'm trying to create a function that users can click on a country marker and the map will zoom into the country on React. However, the problem is the zoom level is different for different countries.

May I ask what is the best approach to zoom into a country (or a city or a poi) without hardcoding the zoom level for each country?

Currently this is my function which is nothing fancy. Just hard coding the zoom level.

  const flyToLocation = (latitude: number, longitude: number) => {
    mapRef.current?.flyTo({ bearing: 0, center: [longitude, latitude], zoom: 6 });
  };

I also tried with the example here https://visgl.github.io/react-map-gl/examples/zoom-to-bounds (and this is the library I am using). But the problem is that I still need to find the source for all countries and places and may align with the world view of Mapbox ( I actually prefer this way)

I found that https://visgl.github.io/react-map-gl/examples/geocoder can automatically zoom to the country by the result returned. But Geocoder is designed for human use by returning suggestions. I tried to look through the documentation but couldn't find a build-in function for that.

May I ask how to deal with the problem? Any help is appreciated.

Upvotes: -1

Views: 61

Answers (1)

Renz Salanga
Renz Salanga

Reputation: 489

You already have the right answer the best way to do this is go get the bounding box for all the countries you support. You really have to gather those data.

There are already other people who collected those data and you can reuse them like these repo it compiles a number of bounding box.

https://github.com/sandstrom/country-bounding-boxes

Upvotes: 0

Related Questions