Manage your web map costs
This troubleshooting guide shows you different ways to manage your costs for common web map implementations (interactive, non-interactive, and hybrid). The tables in this troubleshooting guide outline common mapping use-cases and offer suggestions for balancing the various cost-effective, performant map options with your ideal end-user experience.
For specific details on how the products discussed in this guide are priced, see the product pricing documentation, linked in each of the following tables.
Every mapping implementation is unique and Mapbox products are optimized for specific use-cases. The way you choose to implement web maps will depend on what end-user experience you want to build. If you're still not sure what is a good option for you after reviewing this documentation, let us know!
Interactive maps
Interactive maps are designed for end-user interaction:
| Use case | Example | Recommendations for cost effective use |
|---|---|---|
| Interactive large map | A map-based web application in which the map fills the webpage | Use Mapbox GL JS (version 1.0.0 or greater), billed by map load. |
| Limited interaction large or small map | A travel map of cruise destinations in which all lines are visible on initial map load, meaning users don’t need to pan or interact with the map | Use the Static Tiles API with any tiling client of your choosing. (For example Leaflet, or OpenLayers. Note that these tiling clients are not actively maintained by Mapbox.) In the tiling client, set the max bounds and the min and max zoom levels to limit the number of tiles loaded. |
| Interactive map below the fold of a webpage | A store locator map anchored at the bottom of a webpage | Use Mapbox GL JS (version 1.0.0 or greater), billed by map load. Consider techniques like lazy loading so that only users who scroll to the map instantiate a map load. |
Non-interactive maps
Non-interactive static maps are designed to be passively viewed by end-users:
| Use case | Example | Recommendations for cost effective use |
|---|---|---|
| Zero-interaction large map | A colorful map used as the backdrop for a website, or a large map image | Use the Static Images API. |
| Small map in the corner of a page | A small non-interactive map on a real estate page | Use the Static Images API. |
| Data visualizations using client-side data | Showing different non-interactive styles or layers to different subsets of end-users | Use the Static Images API with style parameters. |
Hybrid, interactive and non-interactive maps
Hybrid maps are designed to display a non-interactive preview that leads to an interactive experience:
| Use case | Example | Recommendations for cost effective use |
|---|---|---|
| No map on load, with a text option to Load Map | A map of store or service locations | Use Mapbox GL JS (version 1.0.0 or greater) behind a Load Map button to delay initialization of the map or with lazy loading. |
| A static map on load that opens interactive map when clicked | A hiking website that has text descriptions with a Load Map feature that allows end users to interact further with routes | Use the Static Images API for non-interactive the map images (thumbnails). Use Mapbox GL JS (version 1.0.0 or greater), billed by map load, for the interactive map. |
| Multiple maps on one page | An end-user can see multiple running routes at a glance, and clicking one of the non-interactive map thumbnails opens a larger interactive map | Use the Static Images API for non-interactive the map images (thumbnails). Use Mapbox GL JS (version 1.0.0 or greater), billed by map load, for the interactive map. With Mapbox GL JS version 2.0.0 or greater, each map on the same page is billed individually by map load. |