Tangram Cinnabar Style
Cinnabar is a classic look and should be your go-to for general mapping applications. Give OpenStreetMap data a refined basemap skin using the Tangram graphics library and Mapzen's versatile Vector Tiles.
A family of styles with many flavours
Mapzen offers the Cinnabar style in three flavors:
- Default (this repo) - Some labels for streets, cities, water bodies, and some big parks with name only (no icons). No business labels. Good for data visualization overlays that need to provide some location context.
- More labels - Full set of labels, including high contrast icons highlighting OpenStreetMap business listing data.
- No labels - Just the lines and polygons, please.
Live Cinnabar demo: http://tangrams.github.io/cinnabar-style
So how do you actually use this stuff? Tangram styles are called "scenes" and are written in YAML. The scene file (e.g.: cinnabar-style.yaml) requires a vector tile source. To use Mapzen's vector tile service you must first obtain a free developer API key and update your scene file with that key.
Sign up for a Mapzen Vector Tiles API key
Mapzen Vector Tiles are a free, shared tile service. As such, there are generous limitations on requests to prevent individual users from degrading the overall system performance.
- Go to https://mapzen.com/developers.
- Sign in with your GitHub account. If you have not done this before, you need to agree to the terms first.
- Create a new key for Vector Tiles, and optionally, give it a project name so you can remember the purpose of the key.
- Keep the web page open so you can copy the key into your source code later.
Building a Leaflet map using Tangram
- Update your copy of the scene file on line 453 to reference the API key you created in Step 3 in the Sign up section above.
- Reference the index-demo.html file in any of the style repos for how to configure Leaflet with Tangram and the scene file (e.g.: Cinnabar).
- Looking for a more sophisticated implementation that includes basic search? The main index.html file has a more real world example.
- Need help testing your map locally? See the README in each repo.
- Wondering where to host your map? Make a public repo on Github (or fork ours!) and enjoy their GitHub Pages to github.io magic dance.
- Procedural Cartography with Tangram Patricio's presentation notes from JS.Geo metope in August 2015.
- Walkthrough: Make a map with Tangram by Rhonda on Mapzen's documentation team.
To run locally
Want to modify the style to fit your needs? Clone or downloaded the repo locally. Then...
Start a web server in the repo's directory:
python -m SimpleHTTPServer 8000
If that doesn't work, try:
python -m http.server 8000
- Blog post announcing this style...