Skip to content

Latest commit

 

History

History
85 lines (62 loc) · 2.84 KB

INSTALL.md

File metadata and controls

85 lines (62 loc) · 2.84 KB
Raw

Getting started with Mapbox on the web

Using Mapbox vector tiles and styles

To use the vector tiles and styles hosted on mapbox.com, you must create an account and then obtain an access token. You may learn more about access tokens here.

Using Mapbox with a <script> tag

<!DOCTYPE html>
<html>
<head>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.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 with Browserify

Install the mapbox-gl npm package

npm install --save mapbox-gl

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'
});

Add the CSS file at node_modules/mapbox-gl/dist/mapbox-gl.css or https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css.

Using Mapbox with other module systems

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';

Add the CSS file at node_modules/mapbox-gl/dist/mapbox-gl.css or https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css.

Using Mapbox 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