Is map data stored as a part of your React app or retrieved from API's?

srccoder 0
Viewed 24

I am currently working on building a React map with an interactive map. I am researching various libraries (Google, Leaflet, MapBox, etc) and map sources (Google, OSM, etc).

Is the vector map data retrieved from the map source API endpoint every time your website is loaded? Or is the vector map apart of your React app and simply loaded alongside the website (like the vector map data is hosted on your server)?

If not, is there an option to host the vector map on your server as a part of your React app and not have to pay map sources for API requests?

mapbox-gl-js mapbox google-maps leaflet reactjs
1 Answers

Using Mapbox GL JS, you can use either approach. (Disclosure: I work at Mapbox) Usually it depends on the size of your data and whether you expect it to change often.

For example, if your data is small, you can just store it as geojson files in the public directory of your app (the same place you host images) and have each client download it and add it to the map. A downside of this approach are that each client must download the whole file regardless of which parts are in view on the map. The upside is that the data rides with the app, is versioned with your code, and you don't have to worry about external services going down.

With larger data, files start to get cumbersome, and you need to cut the data up into vector tiles so the client only grabs the chunks that it needs. You can cut your own vector tiles and host them yourself, or you can use a provider such as Mapbox's Tiling Service that will import, cut, and host vector tiles for you. (With you paying based on use)

FYI as of Mapbox GL JS v2, accounts are billed for all map loads, not just use of APIs and other services provided by Mapbox. There is a generous free tier but you will need to consider the costs if your app will have high usage.

chriswhong0
Related