example.json

{
  "version": 8,
  "name": "Taxonomy Example",
  "metadata": {
    "taxonomy:title": "Jawg map taxonomy chart example",
    "taxonomy:groups": [{
        "id": "admin-boundaries",
        "type": "line",
        "title": "Administrative boundaries"
      },
      {
        "id": "roads",
        "type": "line",
        "title": "Roads",
        "zooms": {
          "minzoom": 5,
          "maxzoom": 20
        }
      },
      {
          "id": "aeroway",
          "type": "line",
          "title": "Aeroways"
      },
      {
        "id": "landcover",
        "type": "polygon",
        "title": "Water & Landcover",
        "zoom": 13
      },
      {
        "id": "water-label",
        "type": "symbol",
        "title": "Marine Labels",
        "zooms": [2, 4, 6, 8, 10, 12, 14, 16]
      },
      {
        "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>"
      }
    ]
  },
  "sources": {
    "osm": {
      "url": "http://tile-server/{z}/{x}/{y}.pbf",
      "type": "vector"
    }
  },
  "sprite": "http://sprites-server",
  "glyphs": "http://glyphs-server/{fontstack}/{range}.pbf",
  "layers": [{
      "id": "background",
      "type": "background",
      "paint": {
        "background-color": "#f8f4f0"
      }
    },
    {
      "id": "park",
      "type": "fill",
      "metadata": {
        "taxonomy:group": "landcover"
      },
      "source": "osm",
      "source-layer": "park",
      "paint": {
        "fill-color": "#d8e8c8",
        "fill-opacity": {
          "base": 1.8,
          "stops": [ [ 9, 0.5 ], [ 12, 0.2 ] ]
        }
      }
    },
    {
      "id": "park-outline",
      "type": "line",
      "metadata": {
        "taxonomy:group": "landcover",
        "taxonomy:casing": "park"
      },
      "source": "osm",
      "source-layer": "park",
      "paint": {
        "line-color": {
          "base": 1,
          "stops": [
            [ 6, "hsla(96, 40%, 49%, 0.36)" ],
            [ 8, "hsla(96, 40%, 49%, 0.66)" ]
          ]
        }
      }
    },{
      "id": "landuse-amenities",
      "source": "osm",
      "source-layer": "landuse",
      "type": "fill",
      "metadata": {
        "taxonomy:group": "landcover"
      },
      "filter": [ "in", "class", "cemetery", "hospital", "school" ],
      "paint": {
          "fill-color": [
              "match",
              [ "get", "class" ],
              "cemetery", "#e0e4dd",
              [ "hospital" ], "#ffddee",
              [ "school" ], "#f0e8f8",
              "#f8f4f0"
          ],
          "fill-opacity": [
              "match",
              [ "get", "class" ],
              [ "school" ], 0.5,
              1
          ]
      }
  },
  {
      "id": "aeroway",
      "source": "osm",
      "source-layer": "aeroway",
      "type": "line",
      "metadata": {
        "taxonomy:group": "aeroway",
        "taxonomy:matches": [
          { "name": "runway", "get:type": "runway" },
          { "name": "taxiway", "get:type": "taxiway" }
        ]
      },
      "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "type", "runway" ]],
      "layout": {
        "line-join": "miter",
        "line-cap": "butt"
      },
      "paint": {
        "line-color": "#c6c4c3",
        "line-width": [
          "interpolate",
          [ "exponential", 1.5 ],
          [ "zoom" ],
          9,
          [
            "match",
            [ "get", "type" ],
            [ "runway"], 1,
            0.5
          ],
          18,
          [
            "match",
            [ "get", "type" ],
            [ "runway" ], 80,
            20
          ]
        ]
      }
    },
    {
      "id": "water",
      "type": "fill",
      "metadata": {
        "taxonomy:group": "landcover"
      },
      "source": "osm",
      "source-layer": "water",
      "paint": {
        "fill-color": "#BBE0FC"
      }
    },
    {
      "id": "road-primary-case",
      "ref": "road-primary",
      "metadata": {
        "taxonomy:group": "roads"
      },
      "paint": {
        "line-width": {
          "base": 1.5,
          "stops": [ [ 7, 0.75 ], [ 16, 2 ] ]
        },
        "line-opacity": {
          "stops": [ [ 5, 0 ], [ 10, 1 ] ]
        },
        "line-color": "#CCC7C2",
        "line-gap-width": {
          "base": 1.5,
          "stops": [ [ 7, 1], [ 18, 32 ] ]
        }
      }
    },
    {
      "id": "highway-motorway-casing",
      "type": "line",
      "metadata": {
        "taxonomy:group": "roads",
        "taxonomy:casing": "highway-motorway"
      },
      "source": "osm",
      "source-layer": "roads",
      "minzoom": 4,
      "filter": [ "==", "class", "motorway" ],
      "paint": {
        "line-color": "#e9ac77",
        "line-width": {
          "base": 1.2,
          "stops": [
            [ 4, 0.5 ],
            [ 20, 22 ]
          ]
        },
        "line-opacity": {
          "stops": [ [ 4, 0 ], [ 5, 1 ] ]
        }
      }
    },
    {
      "id": "road-primary",
      "source": "streets-v1",
      "source-layer": "road",
      "type": "line",
      "metadata": {
        "taxonomy:group": "roads"
      },
      "minzoom": 7,
      "filter": ["in", "type", "primary"],
      "layout": {
        "line-cap": "round",
        "line-join": "round"
      },
      "paint": {
        "line-color": "#f4f4f4",
        "line-width": {
          "base": 1.5,
          "stops": [ [ 7, 1 ], [ 18, 32 ] ]
        }
      }
    },
    {
      "id": "highway-motorway",
      "type": "line",
      "metadata": {
        "taxonomy:group": "roads"
      },
      "source": "osm",
      "source-layer": "roads",
      "minzoom": 5,
      "filter": [ "==", "class", "motorway" ],
      "paint": {
        "line-color": "#fc8",
        "line-width": {
          "base": 1.2,
          "stops": [
            [ 4, 0.5 ],
            [ 20, 18 ]
          ]
        }
      }
    },
    {
      "id": "boundary-level-2",
      "type": "line",
      "source": "osm",
      "source-layer": "boundary",
      "metadata": {
        "taxonomy:group": "admin-boundaries"
      },
      "filter": [ "==", "admin_level", 2 ],
      "paint": {
        "line-color": "hsl(248, 7%, 66%)",
        "line-width": [
          "interpolate",
          ["linear"],
          ["zoom"],
          3, 0.5,
          10, 2
        ]
      }
    },
    {
      "id": "marine-label-point",
      "source": "osm",
      "source-layer": "natural_label",
      "metadata": {
          "taxonomy:group": "water-label",
          "taxonomy:example": "Atlantic Ocean",
          "taxonomy:matches": [
            { "name": "ocean", "example": "Atlantic Ocean", "get:scalerank": 0 },
            { "name": "strait", "example": "Strait of Gibraltar", "get:scalerank": 5 }
          ]
      },
      "filter": [ "all", [ "==", "$type", "Point"], [ "in", "class", "ocean", "sea" ] ],
      "type": "symbol",
      "layout": {
          "text-field": "name",
          "text-font": [ "Noto Sans Regular" ],
          "text-max-width": 6,
          "text-size": [
            "interpolate",
            [ "linear" ],
            [ "zoom" ],
            1, 18,
            6, [
                "case",
                [ "==", [ "get", "scalerank" ], 0 ], 28,
                [ ">=", [ "get", "scalerank" ], 5 ], 18,
                24
              ]
          ]
      },
      "paint": {
          "text-color": "#87c6f8"
      }
    },
    {
      "id": "marine-label-line",
      "source": "osm",
      "source-layer": "natural_label",
      "metadata": {
        "taxonomy:group": "water-label",
        "taxonomy:example": "Caribbean Sea"
      },
      "filter": [ "all", [ "==", "$type", "LineString" ], [ "in", "class", "ocean", "sea" ] ],
      "type": "symbol",
      "layout": {
        "symbol-placement": "line-center",
        "text-field": "name",
        "text-font": [ "Noto Sans Regular" ],
        "text-max-width": 6.0,
        "text-size": [
          "interpolate",
          [ "linear" ],
          [ "zoom" ],
          1, 18,
          6, [
              "step",
              [ "get", "scalerank" ],
              24,
              1, 18,
              5, 14
            ]
        ]
      },
      "paint": {
        "text-color": "#87c6f8"
      }
    },
    {
      "id": "place-city",
      "type": "symbol",
      "metadata": {
        "taxonomy:group": "places",
        "taxonomy:example": "Paris"
      },
      "source": "osm",
      "source-layer": "place",
      "filter": [ "==", "class", "city" ],
      "layout": {
        "text-font": [ "Noto Sans Regular" ],
        "text-size": {
          "base": 1.2,
          "stops": [
            [ 7, 14 ],
            [ 11, 24 ]
          ]
        },
        "text-field": "{name}"
      },
      "paint": {
        "text-color": "#333",
        "text-halo-width": 1.2,
        "text-halo-color": "rgba(255,255,255,0.8)"
      }
    },
    {
      "id": "place-country",
      "type": "symbol",
      "metadata": {
        "taxonomy:group": "places",
        "taxonomy:example": "France"
      },
      "source": "osm",
      "source-layer": "place",
      "filter": [ "==", "class", "country" ],
      "layout": {
        "text-font": [ "Noto Sans Bold" ],
        "text-field": "{name}",
        "text-size": {
          "stops": [
            [ 1, 11 ],
            [ 4, 17 ]
          ]
        },
        "text-transform": "uppercase"
      },
      "paint": {
        "text-color": "#334",
        "text-halo-width": 2,
        "text-halo-color": "rgba(255,255,255,0.8)"
      }
    }
  ]
}