@jawg/taxonomy
Version:
Building a map taxonomy chart with style.json
409 lines (408 loc) • 9.73 kB
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)"
}
}
]
}