Mapbox GL Code Flow Example
This repository is a simple example of a development environment for Mapbox GL styles that is based on editing raw code with a text editor. This style of editing is similar to TileMill or the Mapbox Studio desktop tools.
This example is based on Gulp as a framework for its basic utilities:
- A Mapbox GL JS-powered page for previewing the style
- Support for JSON, JSON5,
YAML, and TOML
files as input. You can also specify an executable JavaScript file with a
.js
extension and hashbang and the file will be run and its output piped into the style definition. - Live-reloading when the style is changed
First, clone this git repository:
git clone https://github.com/mapbox/mapbox-gl-codeflow-example.git
cd mapbox-gl-codeflow-example
And then install the dependencies:
npm install
And then start up:
gulp --style=style.json
You can also specify style.json5
, style.yml
, or style.toml
as your
inputs. Unlike JSON, these alternative formats support commenting, so you
can annotate your styles. Note that this is a one-way conversion, like the conversion
from CartoCSS
to Mapnik XML
was.
This project is an example of one such flow: you could do the same with a bare-bones node.js script, or Python or any other environment. You could also skip some of the fancier features, like live reloading, or add others, like a more complex debugging view.