Mapbox GL JS - Highlight Country Polygon

1
votes

I have a select2 option where a user can select a Continent, Region, Country, City or Airport. I integrated mapbox to add markers to the map on selecting a location.

In case of Country and continent selection I would like to select the whole country/continent instead of just a marker.

I tried using the Mapbox Geocoding API like https://api.mapbox.com/geocoding/v5/mapbox.places/germany.json?types=country&access_token=**** but I noticed it only returns a 'Point' coordinates.

I would like to use a service where I provide the country/continent name and it returns a polygon with all the border coordinates in order to be able to highlight on the polygon on the map.

Does mapbox have a built-in service for such functionality? Or do I need to use a third-party service or json file?

1
mapsmapboxpolygongeocodingmapbox-gl-js

1 Answers

2
votes

while the Mapbox Geocoding API doesn't return the full polygon geometry for a feature, you can use the Geocoding API in combination with a few other open source data sources and tools.

Here's the beginnings of a workflow you could try out:

  1. query the geocoding api with the text for the country name like "germany" and grab the lon,lat coordinates from the coordinates property of the API response.

  2. use polygon data in geojson format from an open source like Natural Earth: https://www.naturalearthdata.com/downloads/

  3. pass the coordinates and polygon data into this turf.js function: http://turfjs.org/docs/#booleanPointInPolygon

  4. identify the polygon the point lies within and highlight those boundaries on the map. For more on how to use GL JS for the highlighting portion, check out the examples page: https://docs.mapbox.com/mapbox-gl-js/example/query-similar-features/