UNPKG

@jawg/taxonomy

Version:

Building a map taxonomy chart with style.json

409 lines (408 loc) 9.73 kB
{ "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)" } } ] }