❤Novel Planetary Movement

npm

log inorsign up
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    @mapcat/mapcat-glpublic

    Build Status Coverage Status

    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.

    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.21.0/mapbox-gl.js'></script> 
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.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

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

    Contributing to Mapbox GL JS

    See CONTRIBUTING.md.

    Keywords

    none

    install

    npm i @mapcat/mapcat-gl

    Downloadslast 7 days

    3

    version

    0.21.13

    license

    BSD-3-Clause

    last publish

    collaborators

    • avatar

    test in your browser