Package Exports
- mapbox-gl
- mapbox-gl/dist/mapbox-gl
- mapbox-gl/dist/mapbox-gl-dev
- mapbox-gl/dist/mapbox-gl-dev.js
- mapbox-gl/dist/mapbox-gl.css
- mapbox-gl/dist/mapbox-gl.js
- mapbox-gl/js/geo/lng_lat
- mapbox-gl/js/geo/transform
- mapbox-gl/js/ui/control/control
- mapbox-gl/js/util/ajax.js
- mapbox-gl/js/util/browser.js
- mapbox-gl/js/util/browser/ajax.js
- mapbox-gl/js/util/browser/browser.js
- mapbox-gl/js/util/browser/canvas.js
- mapbox-gl/js/util/browser/dom.js
- mapbox-gl/js/util/browser/web_worker.js
- mapbox-gl/js/util/canvas.js
- mapbox-gl/js/util/dom.js
- mapbox-gl/js/util/evented
- mapbox-gl/js/util/util
- mapbox-gl/js/util/web_worker.js
- mapbox-gl/package.json
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mapbox-gl) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Mapbox GL JS
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.
Using Mapbox GL JS with a <script> tag
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.22.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.22.1/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
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.
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'
});Using Mapbox GL JS with Webpack
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.
Install the mapbox-gl npm package
and the required loaders.
npm install --save mapbox-gl
npm install --save transform-loader
npm install --save json-loader
npm install --save webworkify-webpackAdd the required additional options from webpack.config.example.js to your webpack configuration.
Instantiate 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'
});Using import
If you're using the ES6 module system, you can import mapboxgl like so:
import mapboxgl from 'mapbox-gl';Third Party Projects
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!
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.comContributing to Mapbox GL JS
See CONTRIBUTING.md.