Skip to main content

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.

Note

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 caseExampleRecommendations for cost effective use
Interactive large mapA map-based web application in which the map fills the webpageUse Mapbox GL JS (version 1.0.0 or greater), billed by map load.
Limited interaction large or small mapA 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 mapUse 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 webpageA store locator map anchored at the bottom of a webpageUse 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 caseExampleRecommendations for cost effective use
Zero-interaction large mapA colorful map used as the backdrop for a website, or a large map imageUse the Static Images API.
Small map in the corner of a pageA small non-interactive map on a real estate pageUse the Static Images API.
Data visualizations using client-side dataShowing different non-interactive styles or layers to different subsets of end-usersUse 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 caseExampleRecommendations for cost effective use
No map on load, with a text option to Load MapA map of store or service locationsUse 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 clickedA hiking website that has text descriptions with a Load Map feature that allows end users to interact further with routesUse 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 pageAn end-user can see multiple running routes at a glance, and clicking one of the non-interactive map thumbnails opens a larger interactive mapUse 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.
Was this page helpful?