Map taxonomy chart


Map taxonomy chart for mapbox GL styles.

Thanks Nath Slaughter @natslaughter for the original article and idea of taxonomy.

Read the original article here

Read the new article about this tool here

GitHub Page and Live Demo



Simple page

For a simple view of your taxonomy chart, you can use our demo on github. Here is the link and what it should look like :<your-style-url>

Without style url in the query parameter, it will show our simple example.

Web integration

You can add your taxonomy chart in your website or blog by using this code in your HTML :

  <link rel="stylesheet" type="text/css" href="">

  <taxonomy style-url="<your-style-url>"></taxonomy>
  <script src=""></script>


Global metadata

  "metadata": {
    "taxonomy:title": "Global taxonomy title",
    "taxonomy:groups": [
        "id": "admin-boundaries",
        "type": "line",
        "title":"Administrative boundaries"
        "id": "roads",
        "type": "line",
        "zooms": {
          "minzoom": 5,
          "maxzoom": 20
        "id": "landcover",
        "type": "polygon",
        "title":"Water & Landcover",
        "zooms": 13
        "id": "places",
        "type": "symbol",
        "title":"Political & Place Labels",
        "zooms": [2, 4, 6, 8, 10, 12, 14, 16]
        "type": "annotation",
        "content": "<div style='font-size: 12px; text-align: center;'>Annotation for ending</a></div>"


Layers metadata

  "id": "layer-id",
  "ref": "layer-for-casing",
  "metadata": {
    "taxonomy:group": "taxonomy-groups-id",
    "taxonomy:casing": "layer-for-casing",
    "taxonomy:example": "Example for symbols",
    "taxonomy:matches": [
      { "name": "meta-layer-name", "get:class": "value-from-tile", "example": "Example for symbols" }

Concrete example

See example.json


Powered by JawgMaps

Sponsored by Qwant