search

visgl / react-map-gl

React friendly API wrapper around MapboxGL JS
http://visgl.github.io/react-map-gl/
Other
7.87k stars 1.36k forks source link

Select a specific area of the map and save it as an image #1260

Closed hassanms closed 3 years ago

hassanms commented 3 years ago

Hello, first of all, I must acknowledge that this is a great library, very useful.

Coming to my concern, I want to select a specific area of the viewport and save it as an image. What I am interested in is drawing a rectangle to select an area however I don't think there is any stable library for that (or is there?) so currently, I can compromise by using the polygon. However, being a newbie, I don't know how could I get the corresponding map image of the selected area of the polygon.

Could you please help?

Image for reference: https://ibb.co/9pgMzKQ

makeupsomething commented 3 years ago

You could draw an rectangle and then use the mapbox static image api to generate an image with the bounds of the rectangle you have drawn as parameters https://docs.mapbox.com/help/glossary/static-images-api/

https://docs.mapbox.com/api/maps/static-images/#retrieve-a-static-map-from-a-style

kentongray commented 3 years ago

You're probably better off looking for things in the underlying Mapbox gl rather than this library. Since mapbox-gl uses canvas you should be able to do something like this: https://www.azavea.com/blog/2018/08/29/mapbox-gl-web-map-extent-image/