Skip to main content

Mapbox GL JS Seats

  • check
    Seats-based billing
  • check
    Custom map styles
  • check
    Fast vector maps
  • check
    Compatible with other Mapbox tools
Contact us
Join the Mapbox Developers Discord Communityarrow-right

Mapbox GL JS Seats is a JavaScript library built on top of Mapbox GL JS that offers metering and billing of Mapbox APIs by seats. It uses WebGL to render interactive maps from vector tiles and Mapbox styles.

Pricing​

A seat consists of a single user who uses Mapbox services within your web application during your month-long billing period. Each user can use unlimited Vector Tiles API and Raster Tiles API requests per month. After access to Mapbox GL JS Seats is added to your account, you will be able to view usage by seat on your Statistics page. Details about the number of seats included in the free tier and the cost per seat beyond what is included in the free tier are available on the pricing page.

Access Mapbox GL JS Seats
Mapbox GL JS Seats is available with an Annual Purchase Agreement. Current Mapbox customers with an Annual Purchase Agreement should talk to their Technical Account Manager or Account Manager about metering usage by seats. New customers should contact Mapbox sales.

Quickstart​

Talk with your Technical Account Manager directly or contact our sales team to learn more about accessing Mapbox GL JS Seats. After access has been added to your account, to use Mapbox GL JS Seats in your project, you need to import it using the Mapbox GL JS CDN.

Include the JavaScript and CSS files in the <head> of your HTML file. The CSS file is required to display the map and make elements like Popups and Markers work.


<script src='https://api.mapbox.com/gl-js-seats/v1.0.0/mapbox-gl-seats.js'></script>
<link href='https://api.mapbox.com/gl-js-seats/v1.0.0/mapbox-gl-seats.css' rel='stylesheet' />

Include the following code in the <body> of your HTML file.


<div id='map' style='width: 400px; height: 300px;'></div>
<script>
undefinedmapboxgl.accessToken = 'undefined';
const map = new mapboxgl.Map({
    container: 'map', // container ID
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
    center: [-74.5, 40], // starting position [lng, lat]
    zoom: 9, // starting zoom
    projection: 'globe' // display the map as a 3D globe
});
map.on('style.load', () => {
    map.setFog({}); // Set the default atmosphere style
});
</script>

To see these pieces of code working together in a web app, take a look at our Display a map on a webpage example.

Download​

You can also download all Mapbox GL JS Seats resources in a single zip file, for example, if you want to mitigate for Cross-Site Scripting and other types of web security vulnerabilities. See also CSP Directives.

You would need to host the files you downloaded and include all contents in your project.

SDK updates​

Mapbox GL JS Seats releases will happen with Mapbox GL JS releases. To update to a newer version of Mapbox GL JS Seats in your application, you will need to update that version in your project.

CSP Directives​

As a mitigation for Cross-Site Scripting and other types of web security vulnerabilities, you may use a Content Security Policy (CSP) to specify security policies for your website. If you do, Mapbox GL JS Seats requires the following CSP directives:

worker-src blob: ;
child-src blob: ;
img-src data: blob: ;

Requesting styles from Mapbox or other services will require additional directives. For Mapbox, you can use this connect-src directive:

connect-src https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com

There's a separate Mapbox GL JS bundle for strict CSP environments without worker-src blob: ; child-src blob: enabled, that you can download with the other resources in a single zip file. It requires hosting the files and setting the path to the worker manually:

<script src='LOCATION_OF_SEATS_FILES/mapbox-gl-seats-csp.js'></script>
<script>
mapboxgl.workerUrl = 'LOCATION_OF_SEATS_FILES/mapbox-gl-seats-csp-worker.js';
...
</script>

Mapbox GL CSS​

The CSS referenced in the Quickstart is used to style DOM elements created by Mapbox code. Without the CSS, elements like Popups and Markers won't work. Including it with a <link> in the head of the document via the Mapbox CDN is the simplest and easiest way to provide the CSS, but it is also bundled in the Mapbox module, meaning that if you have a bundler that can handle CSS, you can import the CSS from mapbox-gl-seats.css.

Note too that if the CSS isn't available by the first render, as soon as the CSS is provided, the DOM elements that depend on this CSS should recover.

More resources​

See the Mapbox GL JS API documentation and examples for more information on how to build with Mapbox GL JS.

Join the Mapbox Developers Discord Communityarrow-right
Was this page helpful?