JSPM

mapbox-gl

0.19.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1369872
  • Score
    100M100P100Q206305F
  • License BSD-3-Clause

A WebGL interactive maps library

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/dispatcher.js
  • mapbox-gl/js/util/browser/dom.js
  • mapbox-gl/js/util/canvas.js
  • mapbox-gl/js/util/dispatcher.js
  • mapbox-gl/js/util/dom.js
  • mapbox-gl/js/util/evented
  • mapbox-gl/js/util/util
  • 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

Build Status Coverage Status

Mapbox GL JS

Mapbox GL JS is a Javascript & WebGL library that renders interactive maps from vector tiles and the [Mapbox GL Style Specification](Style Specification).

It is part of the Mapbox GL ecosystem which includes Mapbox GL Native, a suite of compatible SDKs for native desktop and mobile applications.

Mapbox GL JS gallery

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.19.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.19.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-v8'
        });
    </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-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-v8'
});

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-webpack

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

Using import

If you're using the ES6 module system, you can import mapboxgl like so:

import mapboxgl from 'mapbox-gl';

Contributing to Mapbox GL JS

See CONTRIBUTING.md.