Mapbox GL JS is a Javascript & WebGL library that renders interactive maps from vector tiles and Mapbox styles.
It is part of the Mapbox GL ecosystem which includes Mapbox GL Native, a suite of compatible SDKs for native desktop and mobile applications.
To use the vector tiles and styles hosted on http://mapbox.com, you must create an account and then obtain an access token. You may learn more about access tokens here.
<!DOCTYPE html>
<html>
<head>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id='map' style='width: 400px; height: 300px;' />
<script>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9'
});
</script>
</body>
</html>Using Mapbox GL JS with Browserify
Install the mapbox-gl npm package
npm install --save mapbox-glInstantiate mapboxgl.Map
var mapboxgl = require('mapbox-gl');
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: '<your HTML element id>',
style: 'mapbox://styles/mapbox/streets-v9'
});Since our build system depends on Browserify, to use Mapbox GL with any other module bundlers like Webpack, SystemJS, you have to require the distribution build instead of the package entry point:
var mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');If you're using the ES6 module system (e.g. with Rollup as a bundler), you can import mapboxgl like so:
import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';These projects are written and maintained by the GL JS community. Feel free to open a PR add your own projects to this list. We ❤️ third party projects!
- Typescript Definitions on DefinitelyTyped
- wtMapbox: Webtoolkit Integration
- deck.gl: Advanced WebGL visualization layers
Using Mapbox GL JS with CSP
You may use a Content Security Policy to restrict the resources your page has access to, as a way of guarding against Cross-Site Scripting and other types of attacks. If you do, Mapbox GL JS requires the following directives:
child-src blob: ;
img-src data: blob: ;
script-src 'unsafe-eval' ;
Requesting styles from Mapbox or other services will require additional
directives. For Mapbox, you can use this connect-src setting:
connect-src https://*.tiles.mapbox.com https://api.mapbox.com
See CONTRIBUTING.md.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent