mapbox-gl-ify
v1.0.0
Published
Utility that adds mapbox-gl meta data and CSS link for you
Downloads
5
Maintainers
etpinardReadme
mapbox-gl-ify
Utility that adds mapbox-gl meta data and CSS link for you :tada:.
Why?
From mapbox-gl example
page, Mapbox recommend using
this HTML skeleton:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<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' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
// !!! code goes here !!!
</body>
</html>
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.
Installation
For browserify transform, browser module, node API or package.json script usage:
npm install mapbox-gl-ifyFor CLI usage:
npm install -g mapbox-gl-ifyUsage
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.jsor browserify:
browserify -t mapbox-gl-ify index.js > bundle.jsmapbox-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-ifyor combine with metadataify:
browserify index.js | indexhtmlify | metadataify | mapbox-gl-ifymapbox-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')
require('mapbox-gl-ify')(mapboxgl)
// !!! code goes here !!!where mapbox-gl-ify appends using JavaScript the correct mapbox-gl meta and
CSS link to the DOM <head>.
UMD module
using https://unpkg.com/mapbox-gl-ify/dist.min.js
<script src="mapboxgl"></script>
<script src="mapbox-gl-ify"></script>add example in codepen
Credits
2017 Étienne Tétreault-Pinard. MIT License
