Map taxonomy chart

Taxonomy

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

screenshot

Usage

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 :

https://jawg.github.io/taxonomy/demo?url=<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 :

<head>
  <link rel="stylesheet" type="text/css" href="https://jawg.github.io/taxonomy/dist/style.css">
</head>

<body>
  <taxonomy style-url="<your-style-url>"></taxonomy>
  <script src="https://jawg.github.io/taxonomy/dist/taxonomy-bundle+riot.js"></script>
</body>

Specification

Global metadata

{
  "metadata": {
    "taxonomy:title": "Global taxonomy title",
    "taxonomy:groups": [
      {
        "id": "admin-boundaries",
        "type": "line",
        "title":"Administrative boundaries"
      },
      {
        "id": "roads",
        "type": "line",
        "title":"Roads",
        "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>"
      }
    ]
  }
}

taxonomy:groups

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

Credits

Powered by JawgMaps

Sponsored by Qwant