node package manager




BuildStatus DependencyStatus devDependencyStatus

Utility that adds mapbox-gl meta data and CSS link for you ūüéČ.


From mapbox-gl example page, Mapbox recommend using this HTML skeleton:

<!DOCTYPE html>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src=''></script> 
    <link href='' rel='stylesheet' />
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    // !!! code goes here !!!

But, if you like me to develop your prototypes using budo and build examples using browserify, including the correct <meta> and CSS <link> elements for mapbox-gl can become a pain.

By automating this process in, mapbox-gl-ify should make this process a little less painful.


For browserify transform, browser module, node API or package.json script usage:

npm install mapbox-gl-ify

For CLI usage:

npm install -g mapbox-gl-ify


Browserify transform

Given an index.js file with:

var mapboxgl = require('mapbox-gl')
// !!! code goes here !!!

for quick prototyping with budo:

budo -t mapbox-gl-ify index.js

or browserify:

browserify -t mapbox-gl-ify index.js > bundle.js

mapbox-gl-ify will add document append calls in the resulting JS bundle.

CLI utility

To publish your examples, Pipe indexhtmlify output:

browserify index.js | indexhtmlify | mapbox-gl-ify

or combine with metadataify:

browserify index.js | indexhtmlify | metadataify | mapbox-gl-ify

mapbox-gl-ify adds the correct <meta> and <link> elements into the resulting HTML file.

CommonJS module for browsers

In browserify transform are too magical for you, you can also require mapbox-gl-ify as a CommonJS module:

// in index.js 
var mapboxgl = require('mapbox-gl')
// !!! code goes here !!! 

where mapbox-gl-ify appends using JavaScript the correct mapbox-gl meta and CSS link to the DOM <head>.

UMD module


<script src="mapboxgl"></script>
<script src="mapbox-gl-ify"></script>

add example in codepen


2017 √Čtienne T√©treault-Pinard. MIT License

Standard - JavaScript StyleGuide