From c2c4ea8b47e58a563b6c1562b6e2f742733620c9 Mon Sep 17 00:00:00 2001 From: Bertil Chapuis Date: Sat, 11 Feb 2023 21:31:07 +0100 Subject: [PATCH] Improve layer ordering (#581) * Make the transformation of directives more explicit * Add a helper that adds sort key properties to directives * Improve ordering of several layers --- basemap/README.md | 4 +- basemap/layers/aeroway/line.js | 27 + basemap/layers/aeroway/polygon.js | 21 + basemap/layers/aeroway/tileset.js | 11 + basemap/layers/amenity/background.js | 75 +- basemap/layers/amenity/fountain.js | 21 +- basemap/layers/amenity/overlay.js | 19 + basemap/layers/boundary/line.js | 44 +- basemap/layers/highway/bridge_line.js | 198 ++- basemap/layers/highway/bridge_outline.js | 189 ++- basemap/layers/highway/highway_dash.js | 135 +- basemap/layers/highway/highway_line.js | 181 +-- basemap/layers/highway/highway_outline.js | 208 ++- basemap/layers/highway/tunnel_line.js | 191 ++- basemap/layers/highway/tunnel_outline.js | 189 ++- basemap/layers/landuse/background.js | 217 +-- basemap/layers/landuse/overlay.js | 43 +- basemap/layers/leisure/background.js | 129 +- basemap/layers/leisure/nature_reserve.js | 18 +- basemap/layers/leisure/overlay.js | 21 +- basemap/layers/man_made/bridge.js | 21 + basemap/layers/man_made/polygon.js | 19 - basemap/layers/natural/background.js | 79 +- basemap/layers/natural/overlay.js | 47 +- basemap/layers/ocean/background.js | 19 - basemap/layers/ocean/overlay.js | 22 + basemap/layers/point/icon.js | 1741 +++++++++++---------- basemap/layers/point/label.js | 87 +- basemap/layers/power/tower.js | 8 +- basemap/layers/railway/line.js | 155 +- basemap/layers/railway/tunnel.js | 9 +- basemap/layers/route/style.js | 21 +- basemap/style.js | 92 +- basemap/tileset.js | 2 + basemap/utils/utils.js | 198 +++ 35 files changed, 2364 insertions(+), 2097 deletions(-) create mode 100644 basemap/layers/aeroway/line.js create mode 100644 basemap/layers/aeroway/polygon.js create mode 100644 basemap/layers/aeroway/tileset.js create mode 100644 basemap/layers/amenity/overlay.js create mode 100644 basemap/layers/man_made/bridge.js delete mode 100644 basemap/layers/man_made/polygon.js delete mode 100644 basemap/layers/ocean/background.js create mode 100644 basemap/layers/ocean/overlay.js create mode 100644 basemap/utils/utils.js diff --git a/basemap/README.md b/basemap/README.md index f05422be3..5cda364ed 100644 --- a/basemap/README.md +++ b/basemap/README.md @@ -32,7 +32,7 @@ The development server can be started with the following command. baremaps map dev --log-level DEBUG \ --database 'jdbc:postgresql://localhost:5432/baremaps?user=baremaps&password=baremaps' \ --tileset 'tileset.js' \ - --style 'style.js' + --style 'line.js' ``` ## Editing the tileset @@ -63,7 +63,7 @@ Simply put, it adds in the ability to describe the `vector_tiles` and their cont ## Editing the style -The configuration format used in the `style.js` file follows the [Mapbox style specification](https://github.com/mapbox/mapbox-gl-js). +The configuration format used in the `line.js` file follows the [Mapbox style specification](https://github.com/mapbox/mapbox-gl-js). Baremaps integrates [Maputnik](https://maputnik.github.io/) and most of the modifications will take place in the browser. ## Tools diff --git a/basemap/layers/aeroway/line.js b/basemap/layers/aeroway/line.js new file mode 100644 index 000000000..bb0ea0e7e --- /dev/null +++ b/basemap/layers/aeroway/line.js @@ -0,0 +1,27 @@ +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +let directives = [ + { + 'filter': ['==', ['get', 'aeroway'], 'runway'], + 'line-color': 'rgba(187, 187, 204, 1.0)', + 'road-width': 30, + }, + { + 'filter': ['==', ['get', 'aeroway'], 'taxiway'], + 'line-color': 'rgba(187, 187, 204, 1.0)', + 'road-width': 14, + }, +]; + +export default asLayerObject(withSortKeys(directives), { + id: 'aeroway_line', + type: 'line', + source: 'baremaps', + 'source-layer': 'aeroway', + filter: ['==', ['geometry-type'], 'LineString'], + layout: { + 'line-cap': 'round', + 'line-join': 'round', + visibility: 'visible', + }, +}); diff --git a/basemap/layers/aeroway/polygon.js b/basemap/layers/aeroway/polygon.js new file mode 100644 index 000000000..bb21f1d17 --- /dev/null +++ b/basemap/layers/aeroway/polygon.js @@ -0,0 +1,21 @@ +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +let directives = [ + { + filter: ['==', ['geometry-type'], 'Polygon'], + 'fill-color': 'rgba(187, 187, 204, 1.0)', + }, +]; + +export default asLayerObject(withSortKeys(directives), { + id: 'aeroway_polygon', + type: 'fill', + source: 'baremaps', + 'source-layer': 'aeroway', + layout: { + visibility: 'visible', + }, + paint: { + 'fill-antialias': true, + }, +}); diff --git a/basemap/layers/aeroway/tileset.js b/basemap/layers/aeroway/tileset.js new file mode 100644 index 000000000..eb947dbb8 --- /dev/null +++ b/basemap/layers/aeroway/tileset.js @@ -0,0 +1,11 @@ +export default { + id: 'aeroway', + queries: [ + { + minzoom: 12, + maxzoom: 20, + sql: + "SELECT id, tags, geom FROM osm_ways_z$zoom WHERE tags ? 'aeroway'", + }, + ], +} diff --git a/basemap/layers/amenity/background.js b/basemap/layers/amenity/background.js index dff90bea2..d06a7eb5f 100644 --- a/basemap/layers/amenity/background.js +++ b/basemap/layers/amenity/background.js @@ -1,46 +1,35 @@ -export default { - id: 'amenity_fill_1', +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +let directives = [ + { + filter: ['==', ['get', 'amenity'], 'kindergarten'], + 'fill-color': 'rgb(255, 255, 228)', + }, + { + filter: ['==', ['get', 'amenity'], 'school'], + 'fill-color': 'rgb(255, 255, 228)', + }, + { + filter: ['==', ['get', 'amenity'], 'college'], + 'fill-color': 'rgb(255, 255, 228)', + }, + { + filter: ['==', ['get', 'amenity'], 'university'], + 'fill-color': 'rgb(255, 255, 228)', + }, + { + filter: ['==', ['get', 'amenity'], 'hospital'], + 'fill-color': 'rgb(255, 255, 228)', + }, + { + filter: ['==', ['get', 'amenity'], 'grave_yard'], + 'fill-color': 'rgb(170, 203, 175)', + }, +]; + +export default asLayerObject(withSortKeys(directives), { + id: 'amenity_background', type: 'fill', source: 'baremaps', 'source-layer': 'amenity', - layout: { - visibility: 'visible', - }, - paint: { - 'fill-antialias': true, - }, - directives: [ - { - filter: ['==', ['get', 'amenity'], 'kindergarten'], - 'fill-color': 'rgb(255, 255, 228)', - }, - { - filter: ['==', ['get', 'amenity'], 'school'], - 'fill-color': 'rgb(255, 255, 228)', - }, - { - filter: ['==', ['get', 'amenity'], 'college'], - 'fill-color': 'rgb(255, 255, 228)', - }, - { - filter: ['==', ['get', 'amenity'], 'university'], - 'fill-color': 'rgb(255, 255, 228)', - }, - { - filter: ['==', ['get', 'amenity'], 'hospital'], - 'fill-color': 'rgb(255, 255, 228)', - }, - { - filter: ['==', ['get', 'amenity'], 'grave_yard'], - 'fill-color': 'rgb(170, 203, 175)', - }, - { - filter: ['==', ['get', 'amenity'], 'parking'], - 'fill-color': 'rgb(238, 238, 238)', - }, - { - filter: ['==', ['get', 'amenity'], 'motorcycle_parking'], - 'fill-color': 'rgb(238, 238, 238)', - }, - ], -} +}); diff --git a/basemap/layers/amenity/fountain.js b/basemap/layers/amenity/fountain.js index 037667ad6..c2859b169 100644 --- a/basemap/layers/amenity/fountain.js +++ b/basemap/layers/amenity/fountain.js @@ -1,4 +1,14 @@ -export default { +import {asLayerObject} from "../../utils/utils.js"; + +let directives = [ + { + filter: ['==', ['get', 'amenity'], 'fountain'], + 'fill-color': 'rgb(170, 211, 223)', + 'fill-outline-color': 'rgb(170, 211, 223)', + }, +]; + +export default asLayerObject(directives, { id: 'amenity_fill_2', type: 'fill', source: 'baremaps', @@ -9,11 +19,4 @@ export default { paint: { 'fill-antialias': true, }, - directives: [ - { - filter: ['==', ['get', 'amenity'], 'fountain'], - 'fill-color': 'rgb(170, 211, 223)', - 'fill-outline-color': 'rgb(170, 211, 223)', - }, - ], -} +}); diff --git a/basemap/layers/amenity/overlay.js b/basemap/layers/amenity/overlay.js new file mode 100644 index 000000000..05baf950d --- /dev/null +++ b/basemap/layers/amenity/overlay.js @@ -0,0 +1,19 @@ +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +let directives = [ + { + filter: ['==', ['get', 'amenity'], 'motorcycle_parking'], + 'fill-color': 'rgb(238, 238, 238)', + }, + { + filter: ['==', ['get', 'amenity'], 'parking'], + 'fill-color': 'rgb(238, 238, 238)', + }, +]; + +export default asLayerObject(withSortKeys(directives), { + id: 'amenity_overlay', + type: 'fill', + source: 'baremaps', + 'source-layer': 'amenity', +}); diff --git a/basemap/layers/boundary/line.js b/basemap/layers/boundary/line.js index a5c7c4772..55590dd27 100644 --- a/basemap/layers/boundary/line.js +++ b/basemap/layers/boundary/line.js @@ -1,4 +1,25 @@ -export default { +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +let directives = [ + { + filter: ['==', ['get', 'admin_level'], "1"], + 'line-color': 'rgb(207, 155, 203)', + }, + { + filter: ['==', ['get', 'admin_level'], "2"], + 'line-color': 'rgb(207, 155, 203)', + }, + { + filter: ['==', ['get', 'admin_level'], "3"], + 'line-color': 'rgb(207, 155, 203)', + }, + { + filter: ['==', ['get', 'admin_level'], "4"], + 'line-color': 'rgb(207, 155, 203)', + }, +]; + +export default asLayerObject(withSortKeys(directives), { id: 'boundary', type: 'line', source: 'baremaps', @@ -9,23 +30,4 @@ export default { paint: { 'line-dasharray': [4, 1, 1, 1], }, - directives: [ - { - filter: ['==', ['get', 'admin_level'], "1"], - 'line-color': 'rgb(207, 155, 203)', - }, - { - filter: ['==', ['get', 'admin_level'], "2"], - 'line-color': 'rgb(207, 155, 203)', - }, - { - filter: ['==', ['get', 'admin_level'], "3"], - 'line-color': 'rgb(207, 155, 203)', - }, - { - filter: ['==', ['get', 'admin_level'], "4"], - 'line-color': 'rgb(207, 155, 203)', - }, - ], - -} +}); diff --git a/basemap/layers/highway/bridge_line.js b/basemap/layers/highway/bridge_line.js index 44994b40d..16f737b40 100644 --- a/basemap/layers/highway/bridge_line.js +++ b/basemap/layers/highway/bridge_line.js @@ -1,4 +1,93 @@ -export default { +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +let directives = [ + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'motorway'], + ['==', ['get', 'highway'], 'motorway_link'], + ], + 'line-color': 'rgb(227, 113, 134)', + 'road-width': 12, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'trunk'], + ['==', ['get', 'highway'], 'trunk_link'], + ], + 'line-color': 'rgb(248, 163, 132)', + 'road-width': 8, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'primary'], + ['==', ['get', 'highway'], 'primary_link'], + ], + 'line-color': 'rgb(252, 202, 137)', + 'road-width': 10, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'secondary'], + ['==', ['get', 'highway'], 'secondary_link'], + ], + 'line-color': 'rgb(243, 246, 161)', + 'road-width': 8, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'tertiary'], + ['==', ['get', 'highway'], 'tertiary_link'], + ], + 'line-color': 'rgb(229, 229, 229)', + 'road-width': 8, + }, + { + filter: ['==', ['get', 'highway'], 'unclassified'], + 'line-color': 'rgb(229, 229, 229)', + 'road-width': 4, + }, + { + filter: ['==', ['get', 'highway'], 'residential'], + 'line-color': 'rgb(229, 229, 229)', + 'road-width': 4, + }, + { + filter: ['==', ['get', 'highway'], 'living_street'], + 'line-color': 'rgb(213, 213, 213)', + 'road-width': 4, + }, + { + filter: ['==', ['get', 'highway'], 'service'], + 'line-color': 'rgb(229, 229, 229)', + 'road-width': 4, + }, + { + filter: ['==', ['get', 'highway'], 'track'], + 'line-color': 'rgb(159, 126, 57)', + 'road-width': 2, + }, + { + filter: ['==', ['get', 'highway'], 'raceway'], + 'line-color': 'rgb(255, 147, 166)', + 'road-width': 4, + }, + { + filter: [ + 'all', + ['==', ['get', 'highway'], 'pedestrian'], + ['!=', ['get', '$type'], 'Polygon'], + ], + 'line-color': 'rgb(194, 194, 212)', + 'road-width': 2, + }, +] + +export default asLayerObject(withSortKeys(directives), { id: 'bridge_line', source: 'baremaps', 'source-layer': 'highway', @@ -9,109 +98,4 @@ export default { 'line-join': 'miter', }, filter: ['any', ['==', ['get', 'bridge'], 'yes']], - directives: [ - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'motorway'], - ['==', ['get', 'highway'], 'motorway_link'], - ], - 'line-color': 'rgb(227, 113, 134)', - 'road-width': 12, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'trunk'], - ['==', ['get', 'highway'], 'trunk_link'], - ], - 'line-color': 'rgb(248, 163, 132)', - 'road-width': 8, - 'line-sort-key': 9, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'primary'], - ['==', ['get', 'highway'], 'primary_link'], - ], - 'line-color': 'rgb(252, 202, 137)', - 'road-width': 10, - 'line-sort-key': 8, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'secondary'], - ['==', ['get', 'highway'], 'secondary_link'], - ], - 'line-color': 'rgb(243, 246, 161)', - 'road-width': 8, - 'line-sort-key': 7, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'tertiary'], - ['==', ['get', 'highway'], 'tertiary_link'], - ], - 'line-color': 'rgb(229, 229, 229)', - 'road-width': 8, - 'line-sort-key': 6, - }, - { - filter: ['==', ['get', 'highway'], 'unclassified'], - 'line-color': 'rgb(229, 229, 229)', - 'road-width': 4, - 'line-sort-key': 5, - }, - { - filter: ['==', ['get', 'highway'], 'residential'], - 'line-color': 'rgb(229, 229, 229)', - 'road-width': 4, - 'line-sort-key': 4, - }, - { - filter: ['==', ['get', 'highway'], 'living_street'], - 'line-color': 'rgb(213, 213, 213)', - 'road-width': 4, - 'line-sort-key': 3, - }, - { - filter: ['==', ['get', 'highway'], 'service'], - 'line-color': 'rgb(229, 229, 229)', - 'road-width': 4, - 'line-sort-key': 2, - }, - { - filter: [ - 'all', - ['==', ['get', 'highway'], 'pedestrian'], - ['!=', ['get', '$type'], 'Polygon'], - ], - 'line-color': 'rgb(194, 194, 212)', - 'road-width': 2, - 'line-sort-key': 1, - }, - { - filter: ['==', ['get', 'highway'], 'raceway'], - 'line-color': 'rgb(255, 147, 166)', - 'road-width': 2, - 'line-sort-key': 1, - }, - { - filter: ['==', ['get', 'highway'], 'track'], - 'line-color': 'rgb(159, 126, 57)', - 'road-width': 2, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'footway'], - ['==', ['get', 'highway'], 'path'], - ], - 'line-color': 'rgb(255, 255, 255)', - 'road-width': 2, - }, - ], -} +}); diff --git a/basemap/layers/highway/bridge_outline.js b/basemap/layers/highway/bridge_outline.js index 866be43b0..0dc79e900 100644 --- a/basemap/layers/highway/bridge_outline.js +++ b/basemap/layers/highway/bridge_outline.js @@ -1,4 +1,93 @@ -export default { +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +let directives = [ + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'motorway'], + ['==', ['get', 'highway'], 'motorway_link'], + ], + 'line-color': 'rgb(223, 55, 106)', + 'road-gap-width': 12, + 'road-width': 2, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'trunk'], + ['==', ['get', 'highway'], 'trunk_link'], + ], + 'line-color': 'rgb(212, 91, 54)', + 'road-gap-width': 8, + 'road-width': 2, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'primary'], + ['==', ['get', 'highway'], 'primary_link'], + ], + 'line-color': 'rgb(173, 132, 56)', + 'road-gap-width': 10, + 'road-width': 2, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'secondary'], + ['==', ['get', 'highway'], 'secondary_link'], + ], + 'line-color': 'rgb(139, 149, 60)', + 'road-gap-width': 8, + 'road-width': 2, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'tertiary'], + ['==', ['get', 'highway'], 'tertiary_link'], + ], + 'line-color': 'rgb(171, 170, 169)', + 'road-gap-width': 8, + 'road-width': 2, + }, + { + filter: ['==', ['get', 'highway'], 'unclassified'], + 'line-color': 'rgb(191, 185, 184)', + 'road-gap-width': 4, + 'road-width': 2, + }, + { + filter: ['==', ['get', 'highway'], 'residential'], + 'line-color': 'rgb(191, 185, 184)', + 'road-gap-width': 4, + 'road-width': 2, + }, + { + filter: ['==', ['get', 'highway'], 'living_street'], + 'line-color': 'rgb(186, 186, 186)', + 'road-gap-width': 4, + 'road-width': 2, + }, + { + filter: ['==', ['get', 'highway'], 'service'], + 'line-color': 'rgb(192, 189, 189)', + 'road-gap-width': 4, + 'road-width': 2, + }, + { + filter: [ + 'all', + ['==', ['get', 'highway'], 'pedestrian'], + ['!=', ['get', '$type'], 'Polygon'], + ], + 'line-color': 'rgb(166, 165, 163)', + 'road-gap-width': 2, + 'road-width': 2, + }, +]; + +export default asLayerObject(withSortKeys(directives), { id: 'bridge_outline', source: 'baremaps', 'source-layer': 'highway', @@ -9,100 +98,4 @@ export default { 'line-join': 'miter', }, filter: ['any', ['==', ['get', 'bridge'], 'yes']], - directives: [ - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'motorway'], - ['==', ['get', 'highway'], 'motorway_link'], - ], - 'line-color': 'rgb(223, 55, 106)', - 'road-gap-width': 12, - 'road-width': 2, - 'line-sort-key': 10, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'trunk'], - ['==', ['get', 'highway'], 'trunk_link'], - ], - 'line-color': 'rgb(212, 91, 54)', - 'road-gap-width': 8, - 'road-width': 2, - 'line-sort-key': 9, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'primary'], - ['==', ['get', 'highway'], 'primary_link'], - ], - 'line-color': 'rgb(173, 132, 56)', - 'road-gap-width': 10, - 'road-width': 2, - 'line-sort-key': 8, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'secondary'], - ['==', ['get', 'highway'], 'secondary_link'], - ], - 'line-color': 'rgb(139, 149, 60)', - 'road-gap-width': 8, - 'road-width': 2, - 'line-sort-key': 7, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'tertiary'], - ['==', ['get', 'highway'], 'tertiary_link'], - ], - 'line-color': 'rgb(171, 170, 169)', - 'road-gap-width': 8, - 'road-width': 2, - 'line-sort-key': 6, - }, - { - filter: ['==', ['get', 'highway'], 'unclassified'], - 'line-color': 'rgb(191, 185, 184)', - 'road-gap-width': 4, - 'road-width': 2, - 'line-sort-key': 5, - }, - { - filter: ['==', ['get', 'highway'], 'residential'], - 'line-color': 'rgb(191, 185, 184)', - 'road-gap-width': 4, - 'road-width': 2, - 'line-sort-key': 4, - }, - { - filter: ['==', ['get', 'highway'], 'living_street'], - 'line-color': 'rgb(186, 186, 186)', - 'road-gap-width': 4, - 'road-width': 2, - 'line-sort-key': 3, - }, - { - filter: ['==', ['get', 'highway'], 'service'], - 'line-color': 'rgb(192, 189, 189)', - 'road-gap-width': 4, - 'road-width': 2, - 'line-sort-key': 2, - }, - { - filter: [ - 'all', - ['==', ['get', 'highway'], 'pedestrian'], - ['!=', ['get', '$type'], 'Polygon'], - ], - 'line-color': 'rgb(166, 165, 163)', - 'road-gap-width': 2, - 'road-width': 2, - 'line-sort-key': 1, - }, - ], -} +}); diff --git a/basemap/layers/highway/highway_dash.js b/basemap/layers/highway/highway_dash.js index 535b9a132..b63e38adf 100644 --- a/basemap/layers/highway/highway_dash.js +++ b/basemap/layers/highway/highway_dash.js @@ -1,4 +1,71 @@ -export default { +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +let directives = [ + { + filter: ['==', ['get', 'highway'], 'bridleway'], + 'line-color': 'rgb(68, 159, 66)', + 'road-width': 1, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'cycleway'], + [ + 'all', + ['==', ['get', 'highway'], 'path'], + ['==', ['get', 'bicycle'], 'designated'], + ], + ], + 'line-color': 'rgba(28, 27, 254, 1)', + 'road-width': 1, + }, + { + filter: [ + 'any', + [ + 'all', + ['==', ['get', 'highway'], 'footway'], + ['==', ['get', 'access'], 'private'], + ], + [ + 'all', + ['==', ['get', 'highway'], 'service'], + ['in', ['get', 'access'], ['literal', ['private', 'no']]], + ], + ], + 'line-color': 'rgb(192, 192, 192)', + 'road-width': 1, + }, + { + filter: [ + 'any', + [ + 'in', + ['get', 'highway'], + ['literal', ['sidewalk', 'crossing', 'steps']], + ], + [ + 'all', + ['==', ['get', 'highway'], 'footway'], + ['!=', ['get', 'access'], 'private'], + ], + [ + 'all', + ['==', ['get', 'highway'], 'path'], + ['!=', ['get', 'bicycle'], 'designated'], + ], + ], + 'line-color': 'rgb(250, 132, 117)', + 'road-width': 1, + }, + { + filter: ['all', ['==', ['get', 'highway'], 'track']], + 'line-color': 'rgb(177, 140, 63)', + 'road-width': 1, + }, +]; + +export default asLayerObject(withSortKeys(directives), { id: 'highway_dash', type: 'line', source: 'baremaps', @@ -11,68 +78,4 @@ export default { paint: { 'line-dasharray': [2, 2], }, - directives: [ - { - filter: ['==', ['get', 'highway'], 'bridleway'], - 'line-color': 'rgb(68, 159, 66)', - 'road-width': 1, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'cycleway'], - [ - 'all', - ['==', ['get', 'highway'], 'path'], - ['==', ['get', 'bicycle'], 'designated'], - ], - ], - 'line-color': 'rgba(28, 27, 254, 1)', - 'road-width': 1, - }, - { - filter: [ - 'any', - [ - 'all', - ['==', ['get', 'highway'], 'footway'], - ['==', ['get', 'access'], 'private'], - ], - [ - 'all', - ['==', ['get', 'highway'], 'service'], - ['in', ['get', 'access'], ['literal', ['private', 'no']]], - ], - ], - 'line-color': 'rgb(192, 192, 192)', - 'road-width': 1, - }, - { - filter: [ - 'any', - [ - 'in', - ['get', 'highway'], - ['literal', ['sidewalk', 'crossing', 'steps']], - ], - [ - 'all', - ['==', ['get', 'highway'], 'footway'], - ['!=', ['get', 'access'], 'private'], - ], - [ - 'all', - ['==', ['get', 'highway'], 'path'], - ['!=', ['get', 'bicycle'], 'designated'], - ], - ], - 'line-color': 'rgb(250, 132, 117)', - 'road-width': 1, - }, - { - filter: ['all', ['==', ['get', 'highway'], 'track']], - 'line-color': 'rgb(177, 140, 63)', - 'road-width': 1, - }, - ], -} +}); diff --git a/basemap/layers/highway/highway_line.js b/basemap/layers/highway/highway_line.js index e5af008d4..cd7a9de80 100644 --- a/basemap/layers/highway/highway_line.js +++ b/basemap/layers/highway/highway_line.js @@ -1,4 +1,88 @@ -export default { +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +let directives = [ + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'motorway'], + ['==', ['get', 'highway'], 'motorway_link'], + ], + 'line-color': 'rgb(233, 144, 161)', + 'road-width': 12, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'trunk'], + ['==', ['get', 'highway'], 'trunk_link'], + ], + 'line-color': 'rgb(250, 193, 172)', + 'road-width': 8, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'primary'], + ['==', ['get', 'highway'], 'primary_link'], + ], + 'line-color': 'rgb(253, 221, 179)', + 'road-width': 10, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'secondary'], + ['==', ['get', 'highway'], 'secondary_link'], + ], + 'line-color': 'rgb(248, 250, 202)', + 'road-width': 8, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'tertiary'], + ['==', ['get', 'highway'], 'tertiary_link'], + ], + 'line-color': 'rgb(254, 254, 254)', + 'road-width': 8, + }, + { + filter: ['==', ['get', 'highway'], 'unclassified'], + 'line-color': 'rgb(254, 254, 254)', + 'road-width': 4, + }, + { + filter: ['==', ['get', 'highway'], 'residential'], + 'line-color': 'rgb(254, 254, 254)', + 'road-width': 4, + }, + { + filter: ['==', ['get', 'highway'], 'living_street'], + 'line-color': 'rgb(237, 237, 237)', + 'road-width': 4, + }, + { + filter: ['==', ['get', 'highway'], 'service'], + 'line-color': 'rgb(254, 254, 254)', + 'road-width': 4, + }, + { + filter: ['==', ['get', 'highway'], 'raceway'], + 'line-color': 'rgb(255, 192, 203)', + 'road-width': 4, + }, + { + filter: [ + 'all', + ['==', ['get', 'highway'], 'pedestrian'], + ['!=', ['get', 'area'], 'yes'], + ], + 'line-color': 'rgb(221, 221, 231)', + 'road-width': 2, + }, +]; + +export default asLayerObject(withSortKeys(directives), { id: 'highway_line', source: 'baremaps', 'source-layer': 'highway', @@ -15,97 +99,4 @@ export default { ['!=', ['get', 'layer'], '-1'], ['!=', ['get', 'covered'], 'yes'], ], - directives: [ - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'motorway'], - ['==', ['get', 'highway'], 'motorway_link'], - ], - 'line-color': 'rgb(233, 144, 161)', - 'road-width': 12, - 'line-sort-key': 10, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'trunk'], - ['==', ['get', 'highway'], 'trunk_link'], - ], - 'line-color': 'rgb(250, 193, 172)', - 'road-width': 8, - 'line-sort-key': 9, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'primary'], - ['==', ['get', 'highway'], 'primary_link'], - ], - 'line-color': 'rgb(253, 221, 179)', - 'road-width': 10, - 'line-sort-key': 8, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'secondary'], - ['==', ['get', 'highway'], 'secondary_link'], - ], - 'line-color': 'rgb(248, 250, 202)', - 'road-width': 8, - 'line-sort-key': 7, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'tertiary'], - ['==', ['get', 'highway'], 'tertiary_link'], - ], - 'line-color': 'rgb(254, 254, 254)', - 'road-width': 8, - 'line-sort-key': 6, - }, - { - filter: ['==', ['get', 'highway'], 'unclassified'], - 'line-color': 'rgb(254, 254, 254)', - 'road-width': 4, - 'line-sort-key': 5, - }, - { - filter: ['==', ['get', 'highway'], 'residential'], - 'line-color': 'rgb(254, 254, 254)', - 'road-width': 4, - 'line-sort-key': 4, - }, - { - filter: ['==', ['get', 'highway'], 'living_street'], - 'line-color': 'rgb(237, 237, 237)', - 'road-width': 4, - 'line-sort-key': 3, - }, - { - filter: ['==', ['get', 'highway'], 'service'], - 'line-color': 'rgb(254, 254, 254)', - 'road-width': 4, - 'line-sort-key': 2, - }, - { - filter: [ - 'all', - ['==', ['get', 'highway'], 'pedestrian'], - ['!=', ['get', 'area'], 'yes'], - ], - 'line-color': 'rgb(221, 221, 231)', - 'road-width': 2, - 'line-sort-key': 1, - - }, - { - filter: ['==', ['get', 'highway'], 'raceway'], - 'line-color': 'rgb(255, 192, 203)', - 'road-width': 2, - 'line-sort-key': 1, - }, - ], -} +}); diff --git a/basemap/layers/highway/highway_outline.js b/basemap/layers/highway/highway_outline.js index 7d3ba2372..6b7512ff5 100644 --- a/basemap/layers/highway/highway_outline.js +++ b/basemap/layers/highway/highway_outline.js @@ -1,4 +1,102 @@ -export default { +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +let directives =[ + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'motorway'], + ['==', ['get', 'highway'], 'motorway_link'], + ], + 'line-color': 'rgb(227, 82, 126)', + 'road-gap-width': 12, + 'road-width': 2, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'trunk'], + ['==', ['get', 'highway'], 'trunk_link'], + ], + 'line-color': 'rgb(217, 111, 78)', + 'road-gap-width': 8, + 'road-width': 2, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'primary'], + ['==', ['get', 'highway'], 'primary_link'], + ], + 'line-color': 'rgb(192, 147, 62)', + 'road-gap-width': 10, + 'road-width': 2, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'secondary'], + ['==', ['get', 'highway'], 'secondary_link'], + ], + 'line-color': 'rgb(154, 166, 67)', + 'road-gap-width': 8, + 'road-width': 2, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'tertiary'], + ['==', ['get', 'highway'], 'tertiary_link'], + ], + 'line-color': 'rgb(190, 189, 188)', + 'road-gap-width': 8, + 'road-width': 2, + }, + { + filter: ['==', ['get', 'highway'], 'unclassified'], + 'line-color': 'rgb(211, 207, 206)', + 'road-gap-width': 4, + 'road-width': 2, + }, + { + filter: ['==', ['get', 'highway'], 'residential'], + 'line-color': 'rgb(211, 207, 206)', + 'road-gap-width': 4, + 'road-width': 2, + }, + { + filter: ['==', ['get', 'highway'], 'living_street'], + 'line-color': 'rgb(207, 207, 207)', + 'road-gap-width': 4, + 'road-width': 2, + }, + { + filter: ['==', ['get', 'highway'], 'service'], + 'line-color': 'rgb(213, 211, 211)', + 'road-gap-width': 4, + 'road-width': 2, + }, + { + filter: [ + 'all', + ['==', ['get', 'highway'], 'pedestrian'], + ['!=', ['get', 'area'], 'yes'], + ], + 'line-color': 'rgb(184, 183, 182)', + 'road-gap-width': 2, + 'road-width': 2, + }, + { + filter: [ + 'all', + ['==', ['get', 'highway'], 'pedestrian'], + ['==', ['get', 'area'], 'yes'], + ], + 'line-color': 'rgb(184, 183, 182)', + 'road-width': 2, + }, +] + +export default asLayerObject(withSortKeys(directives), { id: 'highway_outline', source: 'baremaps', 'source-layer': 'highway', @@ -15,110 +113,4 @@ export default { ['!=', ['get', 'layer'], '-1'], ['!=', ['get', 'covered'], 'yes'], ], - directives: [ - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'motorway'], - ['==', ['get', 'highway'], 'motorway_link'], - ], - 'line-color': 'rgb(227, 82, 126)', - 'road-gap-width': 12, - 'road-width': 2, - 'line-sort-key': 10, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'trunk'], - ['==', ['get', 'highway'], 'trunk_link'], - ], - 'line-color': 'rgb(217, 111, 78)', - 'road-gap-width': 8, - 'road-width': 2, - 'line-sort-key': 9, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'primary'], - ['==', ['get', 'highway'], 'primary_link'], - ], - 'line-color': 'rgb(192, 147, 62)', - 'road-gap-width': 10, - 'road-width': 2, - 'line-sort-key': 8, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'secondary'], - ['==', ['get', 'highway'], 'secondary_link'], - ], - 'line-color': 'rgb(154, 166, 67)', - 'road-gap-width': 8, - 'road-width': 2, - 'line-sort-key': 7, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'tertiary'], - ['==', ['get', 'highway'], 'tertiary_link'], - ], - 'line-color': 'rgb(190, 189, 188)', - 'road-gap-width': 8, - 'road-width': 2, - 'line-sort-key': 6, - }, - { - filter: ['==', ['get', 'highway'], 'unclassified'], - 'line-color': 'rgb(211, 207, 206)', - 'road-gap-width': 4, - 'road-width': 2, - 'line-sort-key': 5, - }, - { - filter: ['==', ['get', 'highway'], 'residential'], - 'line-color': 'rgb(211, 207, 206)', - 'road-gap-width': 4, - 'road-width': 2, - 'line-sort-key': 4, - }, - { - filter: ['==', ['get', 'highway'], 'living_street'], - 'line-color': 'rgb(207, 207, 207)', - 'road-gap-width': 4, - 'road-width': 2, - 'line-sort-key': 3, - }, - { - filter: ['==', ['get', 'highway'], 'service'], - 'line-color': 'rgb(213, 211, 211)', - 'road-gap-width': 4, - 'road-width': 2, - 'line-sort-key': 2, - }, - { - filter: [ - 'all', - ['==', ['get', 'highway'], 'pedestrian'], - ['!=', ['get', 'area'], 'yes'], - ], - 'line-color': 'rgb(184, 183, 182)', - 'road-gap-width': 2, - 'road-width': 2, - 'line-sort-key': 1, - }, - { - filter: [ - 'all', - ['==', ['get', 'highway'], 'pedestrian'], - ['==', ['get', 'area'], 'yes'], - ], - 'line-color': 'rgb(184, 183, 182)', - 'road-width': 2, - 'line-sort-key': 1, - }, - ], -} +}); diff --git a/basemap/layers/highway/tunnel_line.js b/basemap/layers/highway/tunnel_line.js index 829be2a88..c628c5ffc 100644 --- a/basemap/layers/highway/tunnel_line.js +++ b/basemap/layers/highway/tunnel_line.js @@ -1,4 +1,93 @@ -export default { +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +let directives = [ + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'motorway'], + ['==', ['get', 'highway'], 'motorway_link'], + ], + 'line-color': 'rgba(241, 188, 198, 1)', + 'road-width': 12, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'trunk'], + ['==', ['get', 'highway'], 'trunk_link'], + ], + 'line-color': 'rgba(252, 215, 204, 1)', + 'road-width': 8, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'primary'], + ['==', ['get', 'highway'], 'primary_link'], + ], + 'line-color': 'rgba(254, 237, 213, 1)', + 'road-width': 10, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'secondary'], + ['==', ['get', 'highway'], 'secondary_link'], + ], + 'line-color': 'rgba(249, 253, 215, 1)', + 'road-width': 8, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'tertiary'], + ['==', ['get', 'highway'], 'tertiary_link'], + ], + 'line-color': 'rgba(255, 255, 255, 1)', + 'road-width': 8, + }, + { + filter: ['==', ['get', 'highway'], 'unclassified'], + 'line-color': 'rgba(242, 242, 242, 1)', + 'road-width': 4, + }, + { + filter: ['==', ['get', 'highway'], 'residential'], + 'line-color': 'rgba(211, 207, 206, 1)', + 'road-width': 4, + }, + { + filter: ['==', ['get', 'highway'], 'living_street'], + 'line-color': 'rgba(245, 245, 245, 1)', + 'road-width': 4, + }, + { + filter: ['==', ['get', 'highway'], 'service'], + 'line-color': 'rgba(242, 242, 242, 1)', + 'road-width': 4, + }, + { + filter: [ + 'all', + ['==', ['get', 'highway'], 'pedestrian'], + ['!=', ['get', '$type'], 'Polygon'], + ], + 'line-color': 'rgba(221, 221, 232, 1)', + 'road-width': 2, + }, + { + filter: ['==', ['get', 'highway'], 'raceway'], + 'line-color': 'rgba(255, 192, 203, 1)', + 'road-width': 2, + }, + { + filter: ['==', ['get', 'highway'], 'track'], + 'line-color': 'rgb(177, 140, 63)', + 'road-width': 2, + }, +]; + +export default asLayerObject(withSortKeys(directives), { id: 'tunnel_line', source: 'baremaps', 'source-layer': 'highway', @@ -14,102 +103,4 @@ export default { ['==', ['get', 'layer'], '-1'], ['==', ['get', 'covered'], 'yes'], ], - directives: [ - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'motorway'], - ['==', ['get', 'highway'], 'motorway_link'], - ], - 'line-color': 'rgba(241, 188, 198, 1)', - 'road-width': 12, - 'line-sort-key': 10, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'trunk'], - ['==', ['get', 'highway'], 'trunk_link'], - ], - 'line-color': 'rgba(252, 215, 204, 1)', - 'road-width': 8, - 'line-sort-key': 9, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'primary'], - ['==', ['get', 'highway'], 'primary_link'], - ], - 'line-color': 'rgba(254, 237, 213, 1)', - 'road-width': 10, - 'line-sort-key': 8, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'secondary'], - ['==', ['get', 'highway'], 'secondary_link'], - ], - 'line-color': 'rgba(249, 253, 215, 1)', - 'road-width': 8, - 'line-sort-key': 7, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'tertiary'], - ['==', ['get', 'highway'], 'tertiary_link'], - ], - 'line-color': 'rgba(255, 255, 255, 1)', - 'road-width': 8, - 'line-sort-key': 6, - }, - { - filter: ['==', ['get', 'highway'], 'unclassified'], - 'line-color': 'rgba(242, 242, 242, 1)', - 'road-width': 4, - 'line-sort-key': 5, - }, - { - filter: ['==', ['get', 'highway'], 'residential'], - 'line-color': 'rgba(211, 207, 206, 1)', - 'road-width': 4, - 'line-sort-key': 4, - }, - { - filter: ['==', ['get', 'highway'], 'living_street'], - 'line-color': 'rgba(245, 245, 245, 1)', - 'road-width': 4, - 'line-sort-key': 3, - }, - { - filter: ['==', ['get', 'highway'], 'service'], - 'line-color': 'rgba(242, 242, 242, 1)', - 'road-width': 4, - 'line-sort-key': 2, - }, - { - filter: [ - 'all', - ['==', ['get', 'highway'], 'pedestrian'], - ['!=', ['get', '$type'], 'Polygon'], - ], - 'line-color': 'rgba(221, 221, 232, 1)', - 'road-width': 2, - 'line-sort-key': 1, - }, - { - filter: ['==', ['get', 'highway'], 'raceway'], - 'line-color': 'rgba(255, 192, 203, 1)', - 'road-width': 2, - 'line-sort-key': 0, - }, - { - filter: ['==', ['get', 'highway'], 'track'], - 'line-color': 'rgb(177, 140, 63)', - 'road-width': 2, - 'line-sort-key': 0, - }, - ], -} +}); diff --git a/basemap/layers/highway/tunnel_outline.js b/basemap/layers/highway/tunnel_outline.js index 6d94d462c..6ce219595 100644 --- a/basemap/layers/highway/tunnel_outline.js +++ b/basemap/layers/highway/tunnel_outline.js @@ -1,4 +1,93 @@ -export default { +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +let directives = [ + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'motorway'], + ['==', ['get', 'highway'], 'motorway_link'], + ], + 'line-color': 'rgba(227, 82, 126, 1)', + 'road-gap-width': 12, + 'road-width': 2, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'trunk'], + ['==', ['get', 'highway'], 'trunk_link'], + ], + 'line-color': 'rgba(217, 111, 78, 1)', + 'road-gap-width': 8, + 'road-width': 2, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'primary'], + ['==', ['get', 'highway'], 'primary_link'], + ], + 'line-color': 'rgba(192, 147, 62, 1)', + 'road-gap-width': 10, + 'road-width': 2, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'secondary'], + ['==', ['get', 'highway'], 'secondary_link'], + ], + 'line-color': 'rgba(154, 166, 67, 1)', + 'road-gap-width': 8, + 'road-width': 2, + }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'tertiary'], + ['==', ['get', 'highway'], 'tertiary_link'], + ], + 'line-color': 'rgba(190, 189, 188, 1)', + 'road-gap-width': 8, + 'road-width': 2, + }, + { + filter: ['==', ['get', 'highway'], 'unclassified'], + 'line-color': 'rgba(211, 207, 206, 1)', + 'road-gap-width': 4, + 'road-width': 2, + }, + { + filter: ['==', ['get', 'highway'], 'residential'], + 'line-color': 'rgba(211, 207, 206, 1)', + 'road-gap-width': 4, + 'road-width': 2, + }, + { + filter: ['==', ['get', 'highway'], 'living_street'], + 'line-color': 'rgba(207, 207, 207, 1)', + 'road-gap-width': 4, + 'road-width': 2, + }, + { + filter: ['==', ['get', 'highway'], 'service'], + 'line-color': 'rgba(213, 211, 211, 1)', + 'road-gap-width': 4, + 'road-width': 2, + }, + { + filter: [ + 'all', + ['==', ['get', 'highway'], 'pedestrian'], + ['!=', ['get', '$type'], 'Polygon'], + ], + 'line-color': 'rgba(184, 183, 182, 1)', + 'road-gap-width': 2, + 'road-width': 2, + }, +]; + +export default asLayerObject(withSortKeys(directives), { id: 'tunnel_outline', source: 'baremaps', 'source-layer': 'highway', @@ -17,100 +106,4 @@ export default { paint: { 'line-dasharray': [1, 1], }, - directives: [ - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'motorway'], - ['==', ['get', 'highway'], 'motorway_link'], - ], - 'line-color': 'rgba(227, 82, 126, 1)', - 'road-gap-width': 12, - 'road-width': 2, - 'line-sort-key': 10, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'trunk'], - ['==', ['get', 'highway'], 'trunk_link'], - ], - 'line-color': 'rgba(217, 111, 78, 1)', - 'road-gap-width': 8, - 'road-width': 2, - 'line-sort-key': 9, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'primary'], - ['==', ['get', 'highway'], 'primary_link'], - ], - 'line-color': 'rgba(192, 147, 62, 1)', - 'road-gap-width': 10, - 'road-width': 2, - 'line-sort-key': 8, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'secondary'], - ['==', ['get', 'highway'], 'secondary_link'], - ], - 'line-color': 'rgba(154, 166, 67, 1)', - 'road-gap-width': 8, - 'road-width': 2, - 'line-sort-key': 7, - }, - { - filter: [ - 'any', - ['==', ['get', 'highway'], 'tertiary'], - ['==', ['get', 'highway'], 'tertiary_link'], - ], - 'line-color': 'rgba(190, 189, 188, 1)', - 'road-gap-width': 8, - 'road-width': 2, - 'line-sort-key': 6, - }, - { - filter: ['==', ['get', 'highway'], 'unclassified'], - 'line-color': 'rgba(211, 207, 206, 1)', - 'road-gap-width': 4, - 'road-width': 2, - 'line-sort-key': 5, - }, - { - filter: ['==', ['get', 'highway'], 'residential'], - 'line-color': 'rgba(211, 207, 206, 1)', - 'road-gap-width': 4, - 'road-width': 2, - 'line-sort-key': 4, - }, - { - filter: ['==', ['get', 'highway'], 'living_street'], - 'line-color': 'rgba(207, 207, 207, 1)', - 'road-gap-width': 4, - 'road-width': 2, - 'line-sort-key': 3, - }, - { - filter: ['==', ['get', 'highway'], 'service'], - 'line-color': 'rgba(213, 211, 211, 1)', - 'road-gap-width': 4, - 'road-width': 2, - 'line-sort-key': 2, - }, - { - filter: [ - 'all', - ['==', ['get', 'highway'], 'pedestrian'], - ['!=', ['get', '$type'], 'Polygon'], - ], - 'line-color': 'rgba(184, 183, 182, 1)', - 'road-gap-width': 2, - 'road-width': 2, - 'line-sort-key': 1, - }, - ], -} +}); diff --git a/basemap/layers/landuse/background.js b/basemap/layers/landuse/background.js index 75c06922b..0e5067fb7 100644 --- a/basemap/layers/landuse/background.js +++ b/basemap/layers/landuse/background.js @@ -1,116 +1,117 @@ +import {withFillSortKey, asLayoutProperty, asPaintProperty} from "../../utils/utils.js"; + +let directives = [ + { + filter: ['==', ['get', 'landuse'], 'village_green'], + 'fill-color': 'rgb(205, 235, 176)', + }, + { + filter: ['==', ['get', 'landuse'], 'salt_pond'], + 'fill-color': 'rgb(170, 211, 223)', + }, + { + filter: ['==', ['get', 'landuse'], 'religious'], + 'fill-color': 'rgb(205, 204, 201)', + }, + { + filter: ['==', ['get', 'landuse'], 'recreation_ground'], + 'fill-color': 'rgb(223, 252, 226)', + }, + { + filter: ['==', ['get', 'landuse'], 'railway'], + 'fill-color': 'rgb(236, 218, 233)', + }, + { + filter: ['==', ['get', 'landuse'], 'quarry'], + 'fill-color': 'rgb(195, 194, 194)', + }, + { + filter: ['==', ['get', 'landuse'], 'plant_nursery'], + 'fill-color': 'rgb(174, 223, 162)', + }, + { + filter: ['==', ['get', 'landuse'], 'military'], + 'fill-color': 'rgb(242, 228, 221)', + }, + { + filter: ['==', ['get', 'landuse'], 'landfill'], + 'fill-color': 'rgb(182, 182, 144)', + }, + { + filter: ['==', ['get', 'landuse'], 'greenfield'], + 'fill-color': 'rgb(242, 238, 232)', + }, + { + filter: ['==', ['get', 'landuse'], 'garages'], + 'fill-color': 'rgb(222, 221, 204)', + }, + { + filter: ['==', ['get', 'landuse'], 'cemetery'], + 'fill-color': 'rgb(170, 203, 175)', + }, + { + filter: ['==', ['get', 'landuse'], 'brownfield'], + 'fill-color': 'rgb(182, 182, 144)', + }, + { + filter: ['==', ['get', 'landuse'], 'basin'], + 'fill-color': 'rgb(170, 211, 223)', + }, + { + filter: ['==', ['get', 'landuse'], 'vineyard'], + 'fill-color': 'rgb(172, 225, 161)', + }, + { + filter: ['==', ['get', 'landuse'], 'meadow'], + 'fill-color': 'rgb(205, 235, 176)', + }, + { + filter: ['==', ['get', 'landuse'], 'farmyard'], + 'fill-color': 'rgb(238, 213, 179)', + }, + { + filter: ['==', ['get', 'landuse'], 'farmland'], + 'fill-color': 'rgb(237, 240, 214)', + }, + { + filter: ['==', ['get', 'landuse'], 'allotments'], + 'fill-color': 'rgb(202, 224, 191)', + }, + { + filter: ['==', ['get', 'landuse'], 'retail'], + 'fill-color': 'rgb(254, 213, 208)', + }, + { + filter: ['==', ['get', 'landuse'], 'industrial'], + 'fill-color': 'rgb(235, 219, 232)', + }, + { + filter: ['==', ['get', 'landuse'], 'residential'], + 'fill-color': 'rgb(225, 225, 225)', + }, + { + filter: ['==', ['get', 'landuse'], 'construction'], + 'fill-color': 'rgb(199, 199, 180)', + }, + { + filter: ['==', ['get', 'landuse'], 'commercial'], + 'fill-color': 'rgb(242, 216, 217)', + }, + { + filter: ['==', ['get', 'landuse'], 'pedestrian'], + 'fill-color': 'rgb(221, 221, 233)', + }, +].map(withFillSortKey); + export default { id: 'landuse_background', type: 'fill', source: 'baremaps', 'source-layer': 'landuse', - layout: { + layout: asLayoutProperty(directives, { visibility: 'visible', - }, - directives: [ - { - filter: ['==', ['get', 'landuse'], 'village_green'], - 'fill-color': 'rgb(205, 235, 176)', - }, - { - filter: ['==', ['get', 'landuse'], 'salt_pond'], - 'fill-color': 'rgb(170, 211, 223)', - }, - { - filter: ['==', ['get', 'landuse'], 'religious'], - 'fill-color': 'rgb(205, 204, 201)', - }, - { - filter: ['==', ['get', 'landuse'], 'recreation_ground'], - 'fill-color': 'rgb(223, 252, 226)', - }, - { - filter: ['==', ['get', 'landuse'], 'railway'], - 'fill-color': 'rgb(236, 218, 233)', - }, - { - filter: ['==', ['get', 'landuse'], 'quarry'], - 'fill-color': 'rgb(195, 194, 194)', - }, - { - filter: ['==', ['get', 'landuse'], 'plant_nursery'], - 'fill-color': 'rgb(174, 223, 162)', - }, - { - filter: ['==', ['get', 'landuse'], 'military'], - 'fill-color': 'rgb(242, 228, 221)', - }, - { - filter: ['==', ['get', 'landuse'], 'landfill'], - 'fill-color': 'rgb(182, 182, 144)', - }, - { - filter: ['==', ['get', 'landuse'], 'greenfield'], - 'fill-color': 'rgb(242, 238, 232)', - }, - { - filter: ['==', ['get', 'landuse'], 'garages'], - 'fill-color': 'rgb(222, 221, 204)', - }, - { - filter: ['==', ['get', 'landuse'], 'cemetery'], - 'fill-color': 'rgb(170, 203, 175)', - }, - { - filter: ['==', ['get', 'landuse'], 'brownfield'], - 'fill-color': 'rgb(182, 182, 144)', - }, - { - filter: ['==', ['get', 'landuse'], 'basin'], - 'fill-color': 'rgb(170, 211, 223)', - }, - { - filter: ['==', ['get', 'landuse'], 'vineyard'], - 'fill-color': 'rgb(172, 225, 161)', - }, - { - filter: ['==', ['get', 'landuse'], 'meadow'], - 'fill-color': 'rgb(205, 235, 176)', - }, - { - filter: ['==', ['get', 'landuse'], 'farmyard'], - 'fill-color': 'rgb(238, 213, 179)', - }, - { - filter: ['==', ['get', 'landuse'], 'farmland'], - 'fill-color': 'rgb(237, 240, 214)', - }, - { - filter: ['==', ['get', 'landuse'], 'allotments'], - 'fill-color': 'rgb(202, 224, 191)', - }, - { - filter: ['==', ['get', 'landuse'], 'retail'], - 'fill-color': 'rgb(254, 213, 208)', - }, - { - filter: ['==', ['get', 'landuse'], 'industrial'], - 'fill-color': 'rgb(235, 219, 232)', - }, - { - filter: ['==', ['get', 'landuse'], 'residential'], - 'fill-color': 'rgb(225, 225, 225)', - }, - { - filter: ['==', ['get', 'landuse'], 'construction'], - 'fill-color': 'rgb(199, 199, 180)', - }, - { - filter: ['==', ['get', 'landuse'], 'commercial'], - 'fill-color': 'rgb(242, 216, 217)', - }, - { - filter: ['==', ['get', 'landuse'], 'pedestrian'], - 'fill-color': 'rgb(221, 221, 233)', - }, - ], - - - paint: { + }), + paint: asPaintProperty(directives, { 'fill-antialias': true, - }, + }), } diff --git a/basemap/layers/landuse/overlay.js b/basemap/layers/landuse/overlay.js index 3dcecac46..b5059eb51 100644 --- a/basemap/layers/landuse/overlay.js +++ b/basemap/layers/landuse/overlay.js @@ -1,4 +1,25 @@ -export default { +import {asLayerObject, withFillSortKey} from "../../utils/utils.js"; + +let directives = [ + { + filter: ['==', ['get', 'landuse'], 'grass'], + 'fill-color': 'rgb(205, 235, 176)', + }, + { + filter: ['==', ['get', 'landuse'], 'forest'], + 'fill-color': 'rgb(171, 210, 156)', + }, + { + filter: ['==', ['get', 'landuse'], 'greenhouse_horticulture'], + 'fill-color': 'rgb(237, 240, 214)', + }, + { + filter: ['==', ['get', 'landuse'], 'orchard'], + 'fill-color': 'rgb(172, 225, 161)', + }, +]; + +export default asLayerObject(withFillSortKey(directives), { id: 'landuse_overlay', type: 'fill', source: 'baremaps', @@ -9,22 +30,4 @@ export default { paint: { 'fill-antialias': true, }, - directives: [ - { - filter: ['==', ['get', 'landuse'], 'grass'], - 'fill-color': 'rgb(205, 235, 176)', - }, - { - filter: ['==', ['get', 'landuse'], 'forest'], - 'fill-color': 'rgb(171, 210, 156)', - }, - { - filter: ['==', ['get', 'landuse'], 'greenhouse_horticulture'], - 'fill-color': 'rgb(237, 240, 214)', - }, - { - filter: ['==', ['get', 'landuse'], 'orchard'], - 'fill-color': 'rgb(172, 225, 161)', - }, - ], -} +}); diff --git a/basemap/layers/leisure/background.js b/basemap/layers/leisure/background.js index c23fbb94c..d7476f398 100644 --- a/basemap/layers/leisure/background.js +++ b/basemap/layers/leisure/background.js @@ -1,78 +1,71 @@ -export default { +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +let directives = [ + { + filter: ['==', ['get', 'leisure'], 'swimming_pool'], + 'fill-color': 'rgb(170, 211, 223)', + 'fill-outline-color': 'rgb(120, 183, 202)', + }, + { + filter: ['==', ['get', 'leisure'], 'miniature_golf'], + 'fill-color': 'rgb(181, 226, 181)', + }, + { + filter: ['==', ['get', 'leisure'], 'ice_rink'], + 'fill-color': 'rgb(221, 236, 236)', + 'fill-outline-color': 'rgb(140, 220, 189)', + }, + { + filter: ['==', ['get', 'leisure'], 'golf_course'], + 'fill-color': 'rgb(181, 226, 181)', + }, + { + filter: ['==', ['get', 'leisure'], 'garden'], + 'fill-color': 'rgb(205, 235, 176)', + }, + { + filter: ['==', ['get', 'leisure'], 'dog_park'], + 'fill-color': 'rgb(224, 252, 227)', + }, + { + filter: ['==', ['get', 'leisure'], 'playground'], + 'fill-color': 'rgb(223, 252, 226)', + 'fill-outline-color': 'rgb(164, 221, 169)', + }, + { + filter: ['==', ['get', 'leisure'], 'pitch'], + 'fill-color': 'rgb(170, 224, 203)', + 'fill-outline-color': 'rgb(151, 212, 186)', + }, + { + filter: ['==', ['get', 'leisure'], 'track'], + 'fill-color': 'rgb(196, 224, 203)', + 'fill-outline-color': 'rgba(101, 206, 166, 1.0)', + }, + { + filter: ['==', ['get', 'leisure'], 'sports_centre'], + 'fill-color': 'rgb(223, 252, 226)', + }, + { + filter: ['==', ['get', 'leisure'], 'stadium'], + 'fill-color': 'rgb(223, 252, 226)', + }, + { + filter: ['==', ['get', 'leisure'], 'park'], + 'fill-color': 'rgb(200, 250, 204)', + }, +]; + +export default asLayerObject(withSortKeys(directives), { id: 'leisure', type: 'fill', source: 'baremaps', 'source-layer': 'leisure', + filter: ['==', ['geometry-type'], 'Polygon'], layout: { visibility: 'visible', }, paint: { 'fill-antialias': true, }, - directives: [ - { - filter: ['==', ['get', 'leisure'], 'swimming_pool'], - 'fill-color': 'rgb(170, 211, 223)', - 'fill-outline-color': 'rgb(120, 183, 202)', - }, - { - filter: ['==', ['get', 'leisure'], 'sports_centre'], - 'fill-color': 'rgb(223, 252, 226)', - }, - { - filter: ['==', ['get', 'leisure'], 'miniature_golf'], - 'fill-color': 'rgb(181, 226, 181)', - }, - { - filter: ['==', ['get', 'leisure'], 'ice_rink'], - 'fill-color': 'rgb(221, 236, 236)', - 'fill-outline-color': 'rgb(140, 220, 189)', - 'fill-sort-key': 10, - }, - { - filter: ['==', ['get', 'leisure'], 'golf_course'], - 'fill-color': 'rgb(181, 226, 181)', - }, - { - filter: ['==', ['get', 'leisure'], 'garden'], - 'fill-color': 'rgb(205, 235, 176)', - }, - { - filter: ['==', ['get', 'leisure'], 'dog_park'], - 'fill-color': 'rgb(224, 252, 227)', - 'fill-sort-key': 10, - }, - { - filter: ['==', ['get', 'leisure'], 'playground'], - 'fill-color': 'rgb(223, 252, 226)', - 'fill-outline-color': 'rgb(164, 221, 169)', - 'fill-sort-key': 20, - }, - { - filter: ['==', ['get', 'leisure'], 'track'], - 'fill-color': 'rgb(196, 224, 203)', - 'fill-sort-key': 10, - }, - { - filter: ['==', ['get', 'leisure'], 'stadium'], - 'fill-color': 'rgb(223, 252, 226)', - }, - { - filter: ['==', ['get', 'leisure'], 'pitch'], - 'fill-color': 'rgb(170, 224, 203)', - 'fill-outline-color': 'rgb(151, 212, 186)', - 'fill-sort-key': 10, - }, - { - filter: ['==', ['get', 'leisure'], 'swimming_pool'], - 'fill-color': 'rgb(170, 211, 223)', - 'fill-outline-color': 'rgb(120, 183, 202)', - 'fill-sort-key': 10, - }, - { - filter: ['==', ['get', 'leisure'], 'park'], - 'fill-color': 'rgb(200, 250, 204)', - 'fill-sort-key': 10, - }, - ], -} +}); diff --git a/basemap/layers/leisure/nature_reserve.js b/basemap/layers/leisure/nature_reserve.js index 02cf89f4c..18cf6990c 100644 --- a/basemap/layers/leisure/nature_reserve.js +++ b/basemap/layers/leisure/nature_reserve.js @@ -1,3 +1,13 @@ +import {withFillSortKey} from "../../utils/utils.js"; + +let directives = [ + { + filter: ['==', 'leisure', 'nature_reserve'], + 'line-width': 5, + 'line-color': 'rgba(230, 233, 222, 0.5)', + }, +]; + export default { id: 'leisure_nature_reserve', type: 'line', @@ -6,11 +16,5 @@ export default { layout: { visibility: 'visible', }, - directives: [ - { - filter: ['==', 'leisure', 'nature_reserve'], - 'line-width': 5, - 'line-color': 'rgba(230, 233, 222, 0.5)', - }, - ], + directives: directives.map(withFillSortKey), } diff --git a/basemap/layers/leisure/overlay.js b/basemap/layers/leisure/overlay.js index c7cf33897..51512ab9d 100644 --- a/basemap/layers/leisure/overlay.js +++ b/basemap/layers/leisure/overlay.js @@ -1,4 +1,14 @@ -export default { +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +let directives = [ + { + filter: ['==', ['get', 'leisure'], 'marina'], + 'fill-color': 'rgb(181, 208, 208)', + 'fill-outline-color': 'rgb(164, 187, 212)', + }, +]; + +export default asLayerObject(withSortKeys(directives), { id: 'leisure_overlay', type: 'fill', source: 'baremaps', @@ -9,11 +19,4 @@ export default { paint: { 'fill-antialias': true, }, - directives: [ - { - filter: ['==', ['get', 'leisure'], 'marina'], - 'fill-color': 'rgb(181, 208, 208)', - 'fill-outline-color': 'rgb(164, 187, 212)', - }, - ], -} +}); diff --git a/basemap/layers/man_made/bridge.js b/basemap/layers/man_made/bridge.js new file mode 100644 index 000000000..3ba32e3c6 --- /dev/null +++ b/basemap/layers/man_made/bridge.js @@ -0,0 +1,21 @@ +import {asLayerObject} from "../../utils/utils.js"; + +let directives = [ + { + filter: ['==', ['get', 'man_made'], 'bridge'], + 'fill-color': 'rgb(184, 184, 184)', + }, +]; + +export default asLayerObject(directives, { + id: 'man_made_bridge', + type: 'fill', + source: 'baremaps', + 'source-layer': 'man_made', + layout: { + visibility: 'visible', + }, + paint: { + 'fill-antialias': true, + }, +}); diff --git a/basemap/layers/man_made/polygon.js b/basemap/layers/man_made/polygon.js deleted file mode 100644 index c048d238c..000000000 --- a/basemap/layers/man_made/polygon.js +++ /dev/null @@ -1,19 +0,0 @@ -export default { - id: 'man_made_bridge', - type: 'fill', - source: 'baremaps', - 'source-layer': 'man_made', - layout: { - visibility: 'visible', - }, - filter: ['==', ['geometry-type'], 'Polygon'], - directives: [ - { - filter: ['in', ['get', 'man_made'], ['literal', ['bridge', 'breakwater']]], - 'fill-color': 'rgb(184, 184, 184)', - }, - ], - paint: { - 'fill-antialias': true, - }, -} diff --git a/basemap/layers/natural/background.js b/basemap/layers/natural/background.js index 9f70bfd59..c002ed01f 100644 --- a/basemap/layers/natural/background.js +++ b/basemap/layers/natural/background.js @@ -1,4 +1,45 @@ -export default { +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +let directives = [ + { + filter: ['==', ['get', 'natural'], 'glacier'], + 'fill-color': 'rgb(221, 236, 236)' + }, + { + filter: ['==', ['get', 'natural'], 'wood'], + 'fill-color': 'rgb(157, 202, 138)' + }, + { + filter: ['==', ['get', 'natural'], 'heath'], + 'fill-color': 'rgb(214, 217, 159)' + }, + { + filter: ['==', ['get', 'natural'], 'grassland'], + 'fill-color': 'rgb(207, 236, 177)' + }, + { + filter: ['==', ['get', 'natural'], 'bare_rock'], + 'fill-color': 'rgb(217, 212, 206)' + }, + { + filter: ['==', ['get', 'natural'], 'scree'], + 'fill-color': 'rgb(232, 223, 216)' + }, + { + filter: ['==', ['get', 'natural'], 'shingle'], + 'fill-color': 'rgb(232, 223, 216)' + }, + { + filter: [ + 'all', + ['==', ['get', 'natural'], 'water'], + ['==', ['get', 'water'], 'lake'], + ], + 'fill-color': 'rgb(170, 211, 223)', + }, +]; + +export default asLayerObject(withSortKeys(directives), { id: 'natural', type: 'fill', //filter: ['==', ['get', 'type'], 'Polygon'], @@ -10,38 +51,4 @@ export default { paint: { 'fill-antialias': true, }, - directives: [ - { - filter: ['==', ['get', 'natural'], 'glacier'], - 'fill-color': 'rgb(221, 236, 236)' - }, - { - filter: ['==', ['get', 'natural'], 'wood'], - 'fill-color': 'rgb(157, 202, 138)' - }, - { - filter: ['==', ['get', 'natural'], 'heath'], - 'fill-color': 'rgb(214, 217, 159)' - }, - { - filter: ['==', ['get', 'natural'], 'grassland'], - 'fill-color': 'rgb(207, 236, 177)' - }, - { - filter: ['==', ['get', 'natural'], 'bare_rock'], - 'fill-color': 'rgb(217, 212, 206)' - }, - { - filter: ['==', ['get', 'natural'], 'scree'], - 'fill-color': 'rgb(232, 223, 216)' - }, - { - filter: ['==', ['get', 'natural'], 'shingle'], - 'fill-color': 'rgb(232, 223, 216)' - }, - { - filter: ['==', ['get', 'natural'], 'sand'], - 'fill-color': 'rgb(240, 229, 196)' - }, - ] -} +}); diff --git a/basemap/layers/natural/overlay.js b/basemap/layers/natural/overlay.js index d2aa693da..c2d42f4c4 100644 --- a/basemap/layers/natural/overlay.js +++ b/basemap/layers/natural/overlay.js @@ -1,4 +1,33 @@ -export default { +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +let directives = [ + { + filter: ['==', ['get', 'natural'], 'beach'], + 'fill-color': 'rgb(255, 241, 186)' + }, + { + filter: ['==', ['get', 'natural'], 'sand'], + 'fill-color': 'rgb(240, 229, 196)' + }, + { + filter: ['==', ['get', 'natural'], 'scrub'], + 'fill-color': 'rgb(201, 216, 173)' + }, + { + filter: [ + 'all', + ['==', ['get', 'natural'], 'water'], + ['!=', ['get', 'water'], 'lake'], + ], + 'fill-color': 'rgb(170, 211, 223)', + }, + { + filter: ['==', ['get', 'natural'], 'wetland'], + 'fill-color': 'rgb(213, 231, 211)' + }, +]; + +export default asLayerObject(withSortKeys(directives), { id: 'natural_overlay', type: 'fill', source: 'baremaps', @@ -9,18 +38,4 @@ export default { paint: { 'fill-antialias': true, }, - directives: [ - { - filter: ['==', ['get', 'natural'], 'beach'], - 'fill-color': 'rgb(255, 241, 186)' - }, - { - filter: ['==', ['get', 'natural'], 'wetland'], - 'fill-color': 'rgb(213, 231, 211)' - }, - { - filter: ['==', ['get', 'natural'], 'scrub'], - 'fill-color': 'rgb(201, 216, 173)' - } - ] -} +}); diff --git a/basemap/layers/ocean/background.js b/basemap/layers/ocean/background.js deleted file mode 100644 index 18f417ff7..000000000 --- a/basemap/layers/ocean/background.js +++ /dev/null @@ -1,19 +0,0 @@ -export default { - id: 'ocean', - type: 'fill', - source: 'baremaps', - 'source-layer': 'ocean', - layout: { - visibility: 'visible', - }, - paint: { - 'fill-antialias': true, - }, - directives: [ - { - filter: ['==', ['get', 'ocean'], 'water'], - 'fill-color': 'rgb(170, 211, 223)', - 'fill-sort-key': 10, - }, - ] -} diff --git a/basemap/layers/ocean/overlay.js b/basemap/layers/ocean/overlay.js new file mode 100644 index 000000000..0d86ebc4d --- /dev/null +++ b/basemap/layers/ocean/overlay.js @@ -0,0 +1,22 @@ +import {withSortKeys, asLayerObject} from "../../utils/utils.js"; + +let directives = [ + { + filter: ['==', ['get', 'ocean'], 'water'], + 'fill-color': 'rgb(170, 211, 223)', + 'fill-sort-key': 10, + }, +]; + +export default asLayerObject(withSortKeys(directives), { + id: 'ocean_overlay', + type: 'fill', + source: 'baremaps', + 'source-layer': 'ocean', + layout: { + visibility: 'visible', + }, + paint: { + 'fill-antialias': true, + }, +}); diff --git a/basemap/layers/point/icon.js b/basemap/layers/point/icon.js index 1acfb3c38..25da68d3c 100644 --- a/basemap/layers/point/icon.js +++ b/basemap/layers/point/icon.js @@ -1,6 +1,874 @@ -import layer from '../../utils/layer.js' +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; -export default { +let directives = [ + // Amenity: sustenance + { + filter: ['==', ['get', 'amenity'], 'bar'], + 'icon-image': 'bar', + 'icon-color': 'rgb(199, 116, 0)', + 'text-color': 'rgb(199, 116, 0)', + }, + { + filter: ['==', ['get', 'amenity'], 'biergarten'], + 'icon-image': 'biergarten', + 'icon-color': 'rgb(199, 116, 0)', + 'text-color': 'rgb(199, 116, 0)', + }, + { + filter: ['==', ['get', 'amenity'], 'cafe'], + 'icon-image': 'cafe', + 'icon-color': 'rgb(199, 116, 0)', + 'text-color': 'rgb(199, 116, 0)', + }, + { + filter: ['==', ['get', 'amenity'], 'fast_food'], + 'icon-image': 'fast_food', + 'icon-color': 'rgb(199, 116, 0)', + 'text-color': 'rgb(199, 116, 0)', + }, + { + filter: ['==', ['get', 'amenity'], 'food_court'], + 'icon-image': 'food_court', + 'icon-color': 'rgb(199, 116, 0)', + 'text-color': 'rgb(199, 116, 0)', + }, + { + filter: ['==', ['get', 'amenity'], 'ice_cream'], + 'icon-image': 'ice_cream', + 'icon-color': 'rgb(199, 116, 0)', + 'text-color': 'rgb(199, 116, 0)', + }, + { + filter: ['==', ['get', 'amenity'], 'pub'], + 'icon-image': 'pub', + 'icon-color': 'rgb(199, 116, 0)', + 'text-color': 'rgb(199, 116, 0)', + }, + { + filter: ['==', ['get', 'amenity'], 'restaurant'], + 'icon-image': 'restaurant', + 'icon-color': 'rgb(199, 116, 0)', + 'text-color': 'rgb(199, 116, 0)', + }, + + // Amenity: education + // { + // filter: ['==', ['get', 'amenity'], 'driving_school'], + // 'icon-image': 'driving_school', + // 'icon-color': 'rgb(172, 58, 173)', + // 'text-color': 'rgb(172, 58, 173)', + // }, + { + filter: ['==', ['get', 'amenity'], 'library'], + 'icon-image': 'library', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + + // Amenity: transportation + { + filter: ['==', ['get', 'amenity'], 'bicycle_parking'], + 'icon-image': 'bicycle_parking', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'amenity'], 'bicycle_repair_station'], + 'icon-image': 'bicycle_repair_station', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'bicycle_rental'], + 'icon-image': 'rental_bicycle', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'amenity'], 'boat_rental'], + 'icon-image': 'boat_rental', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'amenity'], 'bus_station'], + 'icon-image': 'bus_station', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'amenity'], 'car_rental'], + 'icon-image': 'rental_car', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'amenity'], 'car_wash'], + 'icon-image': 'car_wash', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'vehicle_inspection'], + 'icon-image': 'vehicle_inspection', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'charging_station'], + 'icon-image': 'charging_station', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'amenity'], 'ferry_terminal'], + 'icon-image': 'ferry', + 'icon-color': 'rgb(132, 97, 196)', + 'text-color': 'rgb(132, 97, 196)', + }, + { + filter: ['==', ['get', 'amenity'], 'fuel'], + 'icon-image': 'fuel', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'amenity'], 'motorcycle_parking'], + 'icon-image': 'motorcycle_parking', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'amenity'], 'parking'], + 'icon-image': 'parking', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'amenity'], 'parking_entrance'], + 'icon-image': 'entrance', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'amenity'], 'taxi'], + 'icon-image': 'taxi', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + + // Amenity: financial + { + filter: ['==', ['get', 'amenity'], 'atm'], + 'icon-image': 'atm', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'bank'], + 'icon-image': 'bank', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'bureau_de_change'], + 'icon-image': 'bureau_de_change', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + + // Amenity: healthcare + { + filter: ['==', ['get', 'amenity'], 'clinic'], + 'icon-image': 'hospital', + 'icon-color': 'rgb(191, 0, 0)', + 'text-color': 'rgb(191, 0, 0)', + }, + { + filter: ['==', ['get', 'amenity'], 'dentist'], + 'icon-image': 'dentist', + 'icon-color': 'rgb(191, 0, 0)', + 'text-color': 'rgb(191, 0, 0)', + }, + { + filter: ['==', ['get', 'amenity'], 'doctors'], + 'icon-image': 'doctors', + 'icon-color': 'rgb(191, 0, 0)', + 'text-color': 'rgb(191, 0, 0)', + }, + { + filter: ['==', ['get', 'amenity'], 'hospital'], + 'icon-image': 'hospital', + 'icon-color': 'rgb(191, 0, 0)', + 'text-color': 'rgb(191, 0, 0)', + }, + { + filter: ['==', ['get', 'amenity'], 'nursing_home'], + 'icon-image': 'nursing_home', + 'icon-color': 'rgb(76, 76, 0)', + 'text-color': 'rgb(76, 76, 0)', + }, + { + filter: ['==', ['get', 'amenity'], 'pharmacy'], + 'icon-image': 'pharmacy', + 'icon-color': 'rgb(191, 0, 0)', + 'text-color': 'rgb(191, 0, 0)', + }, + { + filter: ['==', ['get', 'amenity'], 'social_facility'], + 'icon-image': 'social_facility', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'veterinary'], + 'icon-image': 'veterinary', + 'icon-color': 'rgb(191, 0, 0)', + 'text-color': 'rgb(191, 0, 0)', + }, + + // Amenity: entertainment, arts & culture + { + filter: ['==', ['get', 'amenity'], 'arts_centre'], + 'icon-image': 'arts_centre', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'casino'], + 'icon-image': 'casino', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'cinema'], + 'icon-image': 'cinema', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'community_centre'], + 'icon-image': 'community_centre', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'fountain'], + 'icon-image': 'fountain', + 'icon-color': 'rgb(87, 104, 236)', + 'text-color': 'rgb(87, 104, 236)', + }, + { + filter: ['==', ['get', 'amenity'], 'nightclub'], + 'icon-image': 'nightclub', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'public_bookcase'], + 'icon-image': 'public_bookcase', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'theatre'], + 'icon-image': 'theatre', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + + // Amenity: public service + { + filter: ['==', ['get', 'amenity'], 'courthouse'], + 'icon-image': 'courthouse', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'fire_station'], + 'icon-image': 'firestation', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'police'], + 'icon-image': 'police', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'post_box'], + 'icon-image': 'post_box', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'post_office'], + 'icon-image': 'post_office', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'prison'], + 'icon-image': 'prison', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'townhall'], + 'icon-image': 'town_hall', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + + // Amenity: facilities + { + filter: ['==', ['get', 'amenity'], 'bbq'], + 'icon-image': 'bbq', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'bench'], + 'icon-image': 'bench', + 'icon-color': 'rgb(102, 102, 102)', + 'text-color': 'rgb(102, 102, 102)', + }, + { + filter: ['==', ['get', 'amenity'], 'drinking_water'], + 'icon-image': 'drinking_water', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'shelter'], + 'icon-image': 'shelter', + 'icon-color': 'rgb(102, 102, 102)', + 'text-color': 'rgb(102, 102, 102)', + }, + { + filter: ['==', ['get', 'amenity'], 'shower'], + 'icon-image': 'shower', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'telephone'], + 'icon-image': 'telephone', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'toilets'], + 'icon-image': 'toilets', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + + // Amenity: waste management + { + filter: ['==', ['get', 'amenity'], 'recycling'], + 'icon-image': 'recycling', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'waste_basket'], + 'icon-image': 'waste_basket', + 'icon-color': 'rgb(102, 102, 102)', + 'text-color': 'rgb(102, 102, 102)', + }, + { + filter: ['==', ['get', 'amenity'], 'waste_disposal'], + 'icon-image': 'waste_disposal', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + + // Amenity: Others + { + filter: ['==', ['get', 'amenity'], 'childcare'], + 'icon-image': 'place-6', + 'icon-color': 'rgb(76, 76, 0)', + 'text-color': 'rgb(76, 76, 0)', + }, + { + filter: ['==', ['get', 'amenity'], 'hunting_stand'], + 'icon-image': 'hunting_stand', + 'icon-color': 'rgb(85, 85, 85)', + 'text-color': 'rgb(85, 85, 85)', + }, + { + filter: ['==', ['get', 'amenity'], 'internet_cafe'], + 'icon-image': 'internet_cafe', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'amenity'], 'marketplace'], + 'icon-image': 'marketplace', + 'icon-color': 'rgb(172, 58, 173)', + 'text-color': 'rgb(172, 58, 173)', + }, + { + filter: ['==', ['get', 'amenity'], 'place_of_worship'], + 'icon-image': 'place_of_worship', + 'icon-color': 'rgb(0, 0, 0)', + 'text-color': 'rgb(0, 0, 0)', + }, + { + filter: ['==', ['get', 'amenity'], 'public_bath'], + 'icon-image': 'public_bath', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + + // Historic + { + filter: ['==', ['get', 'historic'], 'archaeological_site'], + 'icon-image': 'archaeological_site', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'historic'], 'castle'], + 'icon-image': 'castle', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'historic'], 'city_gate'], + 'icon-image': 'city_gate', + 'icon-color': 'rgb(85, 85, 85)', + 'text-color': 'rgb(85, 85, 85)', + }, + { + filter: ['==', ['get', 'historic'], 'fort'], + 'icon-image': 'fort', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'historic'], 'manor'], + 'icon-image': 'manor', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'historic'], 'memorial'], + 'icon-image': 'memorial', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'historic'], 'monument'], + 'icon-image': 'monument', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'historic'], 'wayside_cross'], + 'icon-image': 'wayside_cross', + 'icon-color': 'rgb(85, 85, 85)', + 'text-color': 'rgb(85, 85, 85)', + }, + { + filter: ['==', ['get', 'historic'], 'wayside_shrine'], + 'icon-image': 'wayside_shrine', + 'icon-color': 'rgb(85, 85, 85)', + 'text-color': 'rgb(85, 85, 85)', + }, + + // Leisure + { + filter: ['==', ['get', 'leisure'], 'amusement_arcade'], + 'icon-image': 'amusement_arcade', + 'icon-color': 'rgb(13, 134, 22)', + 'text-color': 'rgb(13, 134, 22)', + }, + { + filter: ['==', ['get', 'leisure'], 'beach_resort'], + 'icon-image': 'beach_resort', + 'icon-color': 'rgb(13, 134, 22)', + 'text-color': 'rgb(13, 134, 22)', + }, + { + filter: ['==', ['get', 'leisure'], 'bird_hide'], + 'icon-image': 'bird_hide', + 'icon-color': 'rgb(13, 134, 22)', + 'text-color': 'rgb(13, 134, 22)', + }, + { + filter: ['==', ['get', 'leisure'], 'bowling_alley'], + 'icon-image': 'bowling_alley', + 'icon-color': 'rgb(13, 134, 22)', + 'text-color': 'rgb(13, 134, 22)', + }, + { + filter: ['==', ['get', 'leisure'], 'firepit'], + 'icon-image': 'firepit', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'leisure'], 'fishing'], + 'icon-image': 'fishing', + 'icon-color': 'rgb(13, 134, 22)', + 'text-color': 'rgb(13, 134, 22)', + }, + { + filter: ['==', ['get', 'leisure'], 'fitness_centre'], + 'icon-image': 'sports', + 'icon-color': 'rgb(13, 134, 22)', + 'text-color': 'rgb(13, 134, 22)', + }, + { + filter: ['==', ['get', 'leisure'], 'fitness_station'], + 'icon-image': 'sports', + 'icon-color': 'rgb(13, 134, 22)', + 'text-color': 'rgb(13, 134, 22)', + }, + { + filter: ['==', ['get', 'leisure'], 'golf_course'], + 'icon-image': 'golf_course', + 'icon-color': 'rgb(13, 134, 22)', + 'text-color': 'rgb(13, 134, 22)', + }, + { + filter: ['==', ['get', 'leisure'], 'miniature_golf'], + 'icon-image': 'miniature_golf', + 'icon-color': 'rgb(13, 134, 22)', + 'text-color': 'rgb(13, 134, 22)', + }, + { + filter: ['==', ['get', 'leisure'], 'outdoor_seating'], + 'icon-image': 'outdoor_seating', + 'icon-color': 'rgb(13, 134, 22)', + 'text-color': 'rgb(13, 134, 22)', + }, + { + filter: ['==', ['get', 'leisure'], 'picnic_table'], + 'icon-image': 'picnic', + 'icon-color': 'rgb(102, 102, 102)', + 'text-color': 'rgb(102, 102, 102)', + }, + { + filter: ['==', ['get', 'leisure'], 'playground'], + 'icon-image': 'playground', + 'icon-color': 'rgb(13, 134, 22)', + 'text-color': 'rgb(13, 134, 22)', + }, + { + filter: ['==', ['get', 'leisure'], 'sauna'], + 'icon-image': 'sauna', + 'icon-color': 'rgb(13, 134, 22)', + 'text-color': 'rgb(13, 134, 22)', + }, + { + filter: ['==', ['get', 'leisure'], 'slipway'], + 'icon-image': 'slipway', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'leisure'], 'swimming_area'], + 'icon-image': 'swimming_area', + 'icon-color': 'rgb(13, 134, 22)', + 'text-color': 'rgb(13, 134, 22)', + }, + { + filter: ['==', ['get', 'leisure'], 'water_park'], + 'icon-image': 'water_park', + 'icon-color': 'rgb(13, 134, 22)', + 'text-color': 'rgb(13, 134, 22)', + }, + + // Man-made + { + filter: ['==', ['get', 'man_made'], 'chimney'], + 'icon-image': 'chimney', + 'icon-color': 'rgb(85, 85, 85)', + 'text-color': 'rgb(85, 85, 85)', + }, + { + filter: ['==', ['get', 'man_made'], 'communications_tower'], + 'icon-image': 'communications_tower', + 'icon-color': 'rgb(85, 85, 85)', + 'text-color': 'rgb(85, 85, 85)', + }, + { + filter: ['==', ['get', 'man_made'], 'crane'], + 'icon-image': 'crane', + 'icon-color': 'rgb(85, 85, 85)', + 'text-color': 'rgb(85, 85, 85)', + }, + { + filter: ['==', ['get', 'man_made'], 'cross'], + 'icon-image': 'cross', + 'icon-color': 'rgb(85, 85, 85)', + 'text-color': 'rgb(85, 85, 85)', + }, + { + filter: ['==', ['get', 'man_made'], 'lighthouse'], + 'icon-image': 'lighthouse', + 'icon-color': 'rgb(85, 85, 85)', + 'text-color': 'rgb(85, 85, 85)', + }, + { + filter: ['==', ['get', 'man_made'], 'mast'], + 'icon-image': 'mast', + 'icon-color': 'rgb(85, 85, 85)', + 'text-color': 'rgb(85, 85, 85)', + }, + { + filter: ['==', ['get', 'man_made'], 'obelisk'], + 'icon-image': 'obelisk', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'man_made'], 'silo'], + 'icon-image': 'silo', + 'icon-color': 'rgb(85, 85, 85)', + 'text-color': 'rgb(85, 85, 85)', + }, + { + filter: ['==', ['get', 'man_made'], 'storage_tank'], + 'icon-image': 'storage_tank', + 'icon-color': 'rgb(85, 85, 85)', + 'text-color': 'rgb(85, 85, 85)', + }, + { + filter: ['==', ['get', 'man_made'], 'telescope'], + 'icon-image': 'telescope', + 'icon-color': 'rgb(85, 85, 85)', + 'text-color': 'rgb(85, 85, 85)', + }, + { + filter: ['==', ['get', 'man_made'], 'tower'], + 'icon-image': 'tower_generic', + 'icon-color': 'rgb(85, 85, 85)', + 'text-color': 'rgb(85, 85, 85)', + }, + { + filter: ['==', ['get', 'man_made'], 'water_tower'], + 'icon-image': 'water_tower', + 'icon-color': 'rgb(85, 85, 85)', + 'text-color': 'rgb(85, 85, 85)', + }, + { + filter: ['==', ['get', 'man_made'], 'windmill'], + 'icon-image': 'windmill', + 'icon-color': 'rgb(85, 85, 85)', + 'text-color': 'rgb(85, 85, 85)', + }, + + // Military + { + filter: ['==', ['get', 'military'], 'bunker'], + 'icon-image': 'bunker', + 'icon-color': 'rgb(85, 85, 85)', + 'text-color': 'rgb(85, 85, 85)', + }, + + // Natural + { + filter: ['==', ['get', 'natural'], 'spring'], + 'icon-image': 'spring', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'natural'], 'cave_entrance'], + 'icon-image': 'entrance', + 'icon-color': 'rgb(85, 85, 85)', + 'text-color': 'rgb(85, 85, 85)', + }, + { + filter: ['==', ['get', 'natural'], 'peak'], + 'icon-image': 'peak', + 'icon-color': 'rgb(209, 144, 85)', + 'text-color': 'rgb(209, 144, 85)', + }, + { + filter: ['==', ['get', 'natural'], 'saddle'], + 'icon-image': 'saddle', + 'icon-color': 'rgb(209, 144, 85)', + 'text-color': 'rgb(209, 144, 85)', + }, + { + filter: ['==', ['get', 'natural'], 'volcano'], + 'icon-image': 'volcano', + 'icon-color': 'rgb(212, 0, 0)', + 'text-color': 'rgb(212, 0, 0)', + }, + + // Railway: stations and stops + { + filter: ['==', ['get', 'railway'], 'halt'], + 'icon-image': 'place-6', + 'icon-color': 'rgb(122, 129, 177)', + 'text-color': 'rgb(122, 129, 177)', + }, + { + filter: ['==', ['get', 'railway'], 'station'], + 'icon-image': 'place-6', + 'icon-color': 'rgb(122, 129, 177)', + 'text-color': 'rgb(122, 129, 177)', + }, + { + filter: ['==', ['get', 'railway'], 'subway_entrance'], + 'icon-image': 'entrance', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'railway'], 'tram_stop'], + 'icon-image': 'tram_stop', + 'icon-color': 'rgb(122, 129, 177)', + 'text-color': 'rgb(122, 129, 177)', + }, + + // Railway: other railways + { + filter: ['==', ['get', 'railway'], 'crossing'], + 'icon-image': 'level_crossing', + 'icon-color': 'rgb(102, 102, 102)', + 'text-color': 'rgb(102, 102, 102)', + }, + { + filter: ['==', ['get', 'railway'], 'level_crossing'], + 'icon-image': 'level_crossing', + 'icon-color': 'rgb(102, 102, 102)', + 'text-color': 'rgb(102, 102, 102)', + }, + + // Tourism + { + filter: ['==', ['get', 'tourism'], 'alpine_hut'], + 'icon-image': 'alpine_hut', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'tourism'], 'apartment'], + 'icon-image': 'apartment', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'tourism'], 'artwork'], + 'icon-image': 'artwork', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'tourism'], 'artwork'], + 'icon-image': 'artwork', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'tourism'], 'camp_site'], + 'icon-image': 'camping', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'tourism'], 'caravan_site'], + 'icon-image': 'caravan_park', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'tourism'], 'chalet'], + 'icon-image': 'chalet', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'tourism'], 'gallery'], + 'icon-image': 'art', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'tourism'], 'guest_house'], + 'icon-image': 'guest_house', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'tourism'], 'hostel'], + 'icon-image': 'hostel', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'tourism'], 'hotel'], + 'icon-image': 'hotel', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'tourism'], 'motel'], + 'icon-image': 'motel', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'tourism'], 'museum'], + 'icon-image': 'museum', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'tourism'], 'picnic_site'], + 'icon-image': 'picnic', + 'icon-color': 'rgb(102, 102, 102)', + 'text-color': 'rgb(102, 102, 102)', + }, + { + filter: ['==', ['get', 'tourism'], 'viewpoint'], + 'icon-image': 'viewpoint', + 'icon-color': 'rgb(115, 74, 7)', + 'text-color': 'rgb(115, 74, 7)', + }, + { + filter: ['==', ['get', 'tourism'], 'wilderness_hut'], + 'icon-image': 'wilderness_hut', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + + // Waterway: barriers on waterways + { + filter: ['==', ['get', 'waterway'], 'dam'], + 'icon-image': 'dam', + 'icon-color': 'rgb(173, 173, 173)', + 'text-color': 'rgb(173, 173, 173)', + }, + { + filter: ['==', ['get', 'waterway'], 'weir'], + 'icon-image': 'weir', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'waterway'], 'waterfall'], + 'icon-image': 'waterfall', + 'icon-color': 'rgb(0, 146, 219)', + 'text-color': 'rgb(0, 146, 219)', + }, + { + filter: ['==', ['get', 'waterway'], 'lock_gate'], + 'icon-image': 'lock_gate', + 'icon-color': 'rgb(173, 173, 173)', + 'text-color': 'rgb(173, 173, 173)', + }, +]; + +export default asLayerObject(withSortKeys(directives), { id: 'icon', type: 'symbol', source: 'baremaps', @@ -25,871 +893,4 @@ export default { 'text-halo-width': 1, 'text-halo-color': 'rgba(255, 255, 255, 0.8)', }, - directives: [ - // Amenity: sustenance - { - filter: ['==', ['get', 'amenity'], 'bar'], - 'icon-image': 'bar', - 'icon-color': 'rgb(199, 116, 0)', - 'text-color': 'rgb(199, 116, 0)', - }, - { - filter: ['==', ['get', 'amenity'], 'biergarten'], - 'icon-image': 'biergarten', - 'icon-color': 'rgb(199, 116, 0)', - 'text-color': 'rgb(199, 116, 0)', - }, - { - filter: ['==', ['get', 'amenity'], 'cafe'], - 'icon-image': 'cafe', - 'icon-color': 'rgb(199, 116, 0)', - 'text-color': 'rgb(199, 116, 0)', - }, - { - filter: ['==', ['get', 'amenity'], 'fast_food'], - 'icon-image': 'fast_food', - 'icon-color': 'rgb(199, 116, 0)', - 'text-color': 'rgb(199, 116, 0)', - }, - { - filter: ['==', ['get', 'amenity'], 'food_court'], - 'icon-image': 'food_court', - 'icon-color': 'rgb(199, 116, 0)', - 'text-color': 'rgb(199, 116, 0)', - }, - { - filter: ['==', ['get', 'amenity'], 'ice_cream'], - 'icon-image': 'ice_cream', - 'icon-color': 'rgb(199, 116, 0)', - 'text-color': 'rgb(199, 116, 0)', - }, - { - filter: ['==', ['get', 'amenity'], 'pub'], - 'icon-image': 'pub', - 'icon-color': 'rgb(199, 116, 0)', - 'text-color': 'rgb(199, 116, 0)', - }, - { - filter: ['==', ['get', 'amenity'], 'restaurant'], - 'icon-image': 'restaurant', - 'icon-color': 'rgb(199, 116, 0)', - 'text-color': 'rgb(199, 116, 0)', - }, - - // Amenity: education - // { - // filter: ['==', ['get', 'amenity'], 'driving_school'], - // 'icon-image': 'driving_school', - // 'icon-color': 'rgb(172, 58, 173)', - // 'text-color': 'rgb(172, 58, 173)', - // }, - { - filter: ['==', ['get', 'amenity'], 'library'], - 'icon-image': 'library', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - - // Amenity: transportation - { - filter: ['==', ['get', 'amenity'], 'bicycle_parking'], - 'icon-image': 'bicycle_parking', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'amenity'], 'bicycle_repair_station'], - 'icon-image': 'bicycle_repair_station', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'bicycle_rental'], - 'icon-image': 'rental_bicycle', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'amenity'], 'boat_rental'], - 'icon-image': 'boat_rental', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'amenity'], 'bus_station'], - 'icon-image': 'bus_station', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'amenity'], 'car_rental'], - 'icon-image': 'rental_car', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'amenity'], 'car_wash'], - 'icon-image': 'car_wash', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'vehicle_inspection'], - 'icon-image': 'vehicle_inspection', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'charging_station'], - 'icon-image': 'charging_station', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'amenity'], 'ferry_terminal'], - 'icon-image': 'ferry', - 'icon-color': 'rgb(132, 97, 196)', - 'text-color': 'rgb(132, 97, 196)', - }, - { - filter: ['==', ['get', 'amenity'], 'fuel'], - 'icon-image': 'fuel', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'amenity'], 'motorcycle_parking'], - 'icon-image': 'motorcycle_parking', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'amenity'], 'parking'], - 'icon-image': 'parking', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'amenity'], 'parking_entrance'], - 'icon-image': 'entrance', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'amenity'], 'taxi'], - 'icon-image': 'taxi', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - - // Amenity: financial - { - filter: ['==', ['get', 'amenity'], 'atm'], - 'icon-image': 'atm', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'bank'], - 'icon-image': 'bank', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'bureau_de_change'], - 'icon-image': 'bureau_de_change', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - - // Amenity: healthcare - { - filter: ['==', ['get', 'amenity'], 'clinic'], - 'icon-image': 'hospital', - 'icon-color': 'rgb(191, 0, 0)', - 'text-color': 'rgb(191, 0, 0)', - }, - { - filter: ['==', ['get', 'amenity'], 'dentist'], - 'icon-image': 'dentist', - 'icon-color': 'rgb(191, 0, 0)', - 'text-color': 'rgb(191, 0, 0)', - }, - { - filter: ['==', ['get', 'amenity'], 'doctors'], - 'icon-image': 'doctors', - 'icon-color': 'rgb(191, 0, 0)', - 'text-color': 'rgb(191, 0, 0)', - }, - { - filter: ['==', ['get', 'amenity'], 'hospital'], - 'icon-image': 'hospital', - 'icon-color': 'rgb(191, 0, 0)', - 'text-color': 'rgb(191, 0, 0)', - }, - { - filter: ['==', ['get', 'amenity'], 'nursing_home'], - 'icon-image': 'nursing_home', - 'icon-color': 'rgb(76, 76, 0)', - 'text-color': 'rgb(76, 76, 0)', - }, - { - filter: ['==', ['get', 'amenity'], 'pharmacy'], - 'icon-image': 'pharmacy', - 'icon-color': 'rgb(191, 0, 0)', - 'text-color': 'rgb(191, 0, 0)', - }, - { - filter: ['==', ['get', 'amenity'], 'social_facility'], - 'icon-image': 'social_facility', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'veterinary'], - 'icon-image': 'veterinary', - 'icon-color': 'rgb(191, 0, 0)', - 'text-color': 'rgb(191, 0, 0)', - }, - - // Amenity: entertainment, arts & culture - { - filter: ['==', ['get', 'amenity'], 'arts_centre'], - 'icon-image': 'arts_centre', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'casino'], - 'icon-image': 'casino', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'cinema'], - 'icon-image': 'cinema', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'community_centre'], - 'icon-image': 'community_centre', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'fountain'], - 'icon-image': 'fountain', - 'icon-color': 'rgb(87, 104, 236)', - 'text-color': 'rgb(87, 104, 236)', - }, - { - filter: ['==', ['get', 'amenity'], 'nightclub'], - 'icon-image': 'nightclub', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'public_bookcase'], - 'icon-image': 'public_bookcase', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'theatre'], - 'icon-image': 'theatre', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - - // Amenity: public service - { - filter: ['==', ['get', 'amenity'], 'courthouse'], - 'icon-image': 'courthouse', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'fire_station'], - 'icon-image': 'firestation', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'police'], - 'icon-image': 'police', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'post_box'], - 'icon-image': 'post_box', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'post_office'], - 'icon-image': 'post_office', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'prison'], - 'icon-image': 'prison', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'townhall'], - 'icon-image': 'town_hall', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - - // Amenity: facilities - { - filter: ['==', ['get', 'amenity'], 'bbq'], - 'icon-image': 'bbq', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'bench'], - 'icon-image': 'bench', - 'icon-color': 'rgb(102, 102, 102)', - 'text-color': 'rgb(102, 102, 102)', - }, - { - filter: ['==', ['get', 'amenity'], 'drinking_water'], - 'icon-image': 'drinking_water', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'shelter'], - 'icon-image': 'shelter', - 'icon-color': 'rgb(102, 102, 102)', - 'text-color': 'rgb(102, 102, 102)', - }, - { - filter: ['==', ['get', 'amenity'], 'shower'], - 'icon-image': 'shower', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'telephone'], - 'icon-image': 'telephone', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'toilets'], - 'icon-image': 'toilets', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - - // Amenity: waste management - { - filter: ['==', ['get', 'amenity'], 'recycling'], - 'icon-image': 'recycling', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'waste_basket'], - 'icon-image': 'waste_basket', - 'icon-color': 'rgb(102, 102, 102)', - 'text-color': 'rgb(102, 102, 102)', - }, - { - filter: ['==', ['get', 'amenity'], 'waste_disposal'], - 'icon-image': 'waste_disposal', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - - // Amenity: Others - { - filter: ['==', ['get', 'amenity'], 'childcare'], - 'icon-image': 'place-6', - 'icon-color': 'rgb(76, 76, 0)', - 'text-color': 'rgb(76, 76, 0)', - }, - { - filter: ['==', ['get', 'amenity'], 'hunting_stand'], - 'icon-image': 'hunting_stand', - 'icon-color': 'rgb(85, 85, 85)', - 'text-color': 'rgb(85, 85, 85)', - }, - { - filter: ['==', ['get', 'amenity'], 'internet_cafe'], - 'icon-image': 'internet_cafe', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'amenity'], 'marketplace'], - 'icon-image': 'marketplace', - 'icon-color': 'rgb(172, 58, 173)', - 'text-color': 'rgb(172, 58, 173)', - }, - { - filter: ['==', ['get', 'amenity'], 'place_of_worship'], - 'icon-image': 'place_of_worship', - 'icon-color': 'rgb(0, 0, 0)', - 'text-color': 'rgb(0, 0, 0)', - }, - { - filter: ['==', ['get', 'amenity'], 'public_bath'], - 'icon-image': 'public_bath', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - - // Historic - { - filter: ['==', ['get', 'historic'], 'archaeological_site'], - 'icon-image': 'archaeological_site', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'historic'], 'castle'], - 'icon-image': 'castle', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'historic'], 'city_gate'], - 'icon-image': 'city_gate', - 'icon-color': 'rgb(85, 85, 85)', - 'text-color': 'rgb(85, 85, 85)', - }, - { - filter: ['==', ['get', 'historic'], 'fort'], - 'icon-image': 'fort', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'historic'], 'manor'], - 'icon-image': 'manor', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'historic'], 'memorial'], - 'icon-image': 'memorial', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'historic'], 'monument'], - 'icon-image': 'monument', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'historic'], 'wayside_cross'], - 'icon-image': 'wayside_cross', - 'icon-color': 'rgb(85, 85, 85)', - 'text-color': 'rgb(85, 85, 85)', - }, - { - filter: ['==', ['get', 'historic'], 'wayside_shrine'], - 'icon-image': 'wayside_shrine', - 'icon-color': 'rgb(85, 85, 85)', - 'text-color': 'rgb(85, 85, 85)', - }, - - // Leisure - { - filter: ['==', ['get', 'leisure'], 'amusement_arcade'], - 'icon-image': 'amusement_arcade', - 'icon-color': 'rgb(13, 134, 22)', - 'text-color': 'rgb(13, 134, 22)', - }, - { - filter: ['==', ['get', 'leisure'], 'beach_resort'], - 'icon-image': 'beach_resort', - 'icon-color': 'rgb(13, 134, 22)', - 'text-color': 'rgb(13, 134, 22)', - }, - { - filter: ['==', ['get', 'leisure'], 'bird_hide'], - 'icon-image': 'bird_hide', - 'icon-color': 'rgb(13, 134, 22)', - 'text-color': 'rgb(13, 134, 22)', - }, - { - filter: ['==', ['get', 'leisure'], 'bowling_alley'], - 'icon-image': 'bowling_alley', - 'icon-color': 'rgb(13, 134, 22)', - 'text-color': 'rgb(13, 134, 22)', - }, - { - filter: ['==', ['get', 'leisure'], 'firepit'], - 'icon-image': 'firepit', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'leisure'], 'fishing'], - 'icon-image': 'fishing', - 'icon-color': 'rgb(13, 134, 22)', - 'text-color': 'rgb(13, 134, 22)', - }, - { - filter: ['==', ['get', 'leisure'], 'fitness_centre'], - 'icon-image': 'sports', - 'icon-color': 'rgb(13, 134, 22)', - 'text-color': 'rgb(13, 134, 22)', - }, - { - filter: ['==', ['get', 'leisure'], 'fitness_station'], - 'icon-image': 'sports', - 'icon-color': 'rgb(13, 134, 22)', - 'text-color': 'rgb(13, 134, 22)', - }, - { - filter: ['==', ['get', 'leisure'], 'golf_course'], - 'icon-image': 'golf_course', - 'icon-color': 'rgb(13, 134, 22)', - 'text-color': 'rgb(13, 134, 22)', - }, - { - filter: ['==', ['get', 'leisure'], 'miniature_golf'], - 'icon-image': 'miniature_golf', - 'icon-color': 'rgb(13, 134, 22)', - 'text-color': 'rgb(13, 134, 22)', - }, - { - filter: ['==', ['get', 'leisure'], 'outdoor_seating'], - 'icon-image': 'outdoor_seating', - 'icon-color': 'rgb(13, 134, 22)', - 'text-color': 'rgb(13, 134, 22)', - }, - { - filter: ['==', ['get', 'leisure'], 'picnic_table'], - 'icon-image': 'picnic', - 'icon-color': 'rgb(102, 102, 102)', - 'text-color': 'rgb(102, 102, 102)', - }, - { - filter: ['==', ['get', 'leisure'], 'playground'], - 'icon-image': 'playground', - 'icon-color': 'rgb(13, 134, 22)', - 'text-color': 'rgb(13, 134, 22)', - }, - { - filter: ['==', ['get', 'leisure'], 'sauna'], - 'icon-image': 'sauna', - 'icon-color': 'rgb(13, 134, 22)', - 'text-color': 'rgb(13, 134, 22)', - }, - { - filter: ['==', ['get', 'leisure'], 'slipway'], - 'icon-image': 'slipway', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'leisure'], 'swimming_area'], - 'icon-image': 'swimming_area', - 'icon-color': 'rgb(13, 134, 22)', - 'text-color': 'rgb(13, 134, 22)', - }, - { - filter: ['==', ['get', 'leisure'], 'water_park'], - 'icon-image': 'water_park', - 'icon-color': 'rgb(13, 134, 22)', - 'text-color': 'rgb(13, 134, 22)', - }, - - // Man-made - { - filter: ['==', ['get', 'man_made'], 'chimney'], - 'icon-image': 'chimney', - 'icon-color': 'rgb(85, 85, 85)', - 'text-color': 'rgb(85, 85, 85)', - }, - { - filter: ['==', ['get', 'man_made'], 'communications_tower'], - 'icon-image': 'communications_tower', - 'icon-color': 'rgb(85, 85, 85)', - 'text-color': 'rgb(85, 85, 85)', - }, - { - filter: ['==', ['get', 'man_made'], 'crane'], - 'icon-image': 'crane', - 'icon-color': 'rgb(85, 85, 85)', - 'text-color': 'rgb(85, 85, 85)', - }, - { - filter: ['==', ['get', 'man_made'], 'cross'], - 'icon-image': 'cross', - 'icon-color': 'rgb(85, 85, 85)', - 'text-color': 'rgb(85, 85, 85)', - }, - { - filter: ['==', ['get', 'man_made'], 'lighthouse'], - 'icon-image': 'lighthouse', - 'icon-color': 'rgb(85, 85, 85)', - 'text-color': 'rgb(85, 85, 85)', - }, - { - filter: ['==', ['get', 'man_made'], 'mast'], - 'icon-image': 'mast', - 'icon-color': 'rgb(85, 85, 85)', - 'text-color': 'rgb(85, 85, 85)', - }, - { - filter: ['==', ['get', 'man_made'], 'obelisk'], - 'icon-image': 'obelisk', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'man_made'], 'silo'], - 'icon-image': 'silo', - 'icon-color': 'rgb(85, 85, 85)', - 'text-color': 'rgb(85, 85, 85)', - }, - { - filter: ['==', ['get', 'man_made'], 'storage_tank'], - 'icon-image': 'storage_tank', - 'icon-color': 'rgb(85, 85, 85)', - 'text-color': 'rgb(85, 85, 85)', - }, - { - filter: ['==', ['get', 'man_made'], 'telescope'], - 'icon-image': 'telescope', - 'icon-color': 'rgb(85, 85, 85)', - 'text-color': 'rgb(85, 85, 85)', - }, - { - filter: ['==', ['get', 'man_made'], 'tower'], - 'icon-image': 'tower_generic', - 'icon-color': 'rgb(85, 85, 85)', - 'text-color': 'rgb(85, 85, 85)', - }, - { - filter: ['==', ['get', 'man_made'], 'water_tower'], - 'icon-image': 'water_tower', - 'icon-color': 'rgb(85, 85, 85)', - 'text-color': 'rgb(85, 85, 85)', - }, - { - filter: ['==', ['get', 'man_made'], 'windmill'], - 'icon-image': 'windmill', - 'icon-color': 'rgb(85, 85, 85)', - 'text-color': 'rgb(85, 85, 85)', - }, - - // Military - { - filter: ['==', ['get', 'military'], 'bunker'], - 'icon-image': 'bunker', - 'icon-color': 'rgb(85, 85, 85)', - 'text-color': 'rgb(85, 85, 85)', - }, - - // Natural - { - filter: ['==', ['get', 'natural'], 'spring'], - 'icon-image': 'spring', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'natural'], 'cave_entrance'], - 'icon-image': 'entrance', - 'icon-color': 'rgb(85, 85, 85)', - 'text-color': 'rgb(85, 85, 85)', - }, - { - filter: ['==', ['get', 'natural'], 'peak'], - 'icon-image': 'peak', - 'icon-color': 'rgb(209, 144, 85)', - 'text-color': 'rgb(209, 144, 85)', - }, - { - filter: ['==', ['get', 'natural'], 'saddle'], - 'icon-image': 'saddle', - 'icon-color': 'rgb(209, 144, 85)', - 'text-color': 'rgb(209, 144, 85)', - }, - { - filter: ['==', ['get', 'natural'], 'volcano'], - 'icon-image': 'volcano', - 'icon-color': 'rgb(212, 0, 0)', - 'text-color': 'rgb(212, 0, 0)', - }, - - // Railway: stations and stops - { - filter: ['==', ['get', 'railway'], 'halt'], - 'icon-image': 'place-6', - 'icon-color': 'rgb(122, 129, 177)', - 'text-color': 'rgb(122, 129, 177)', - }, - { - filter: ['==', ['get', 'railway'], 'station'], - 'icon-image': 'place-6', - 'icon-color': 'rgb(122, 129, 177)', - 'text-color': 'rgb(122, 129, 177)', - }, - { - filter: ['==', ['get', 'railway'], 'subway_entrance'], - 'icon-image': 'entrance', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'railway'], 'tram_stop'], - 'icon-image': 'tram_stop', - 'icon-color': 'rgb(122, 129, 177)', - 'text-color': 'rgb(122, 129, 177)', - }, - - // Railway: other railways - { - filter: ['==', ['get', 'railway'], 'crossing'], - 'icon-image': 'level_crossing', - 'icon-color': 'rgb(102, 102, 102)', - 'text-color': 'rgb(102, 102, 102)', - }, - { - filter: ['==', ['get', 'railway'], 'level_crossing'], - 'icon-image': 'level_crossing', - 'icon-color': 'rgb(102, 102, 102)', - 'text-color': 'rgb(102, 102, 102)', - }, - - // Tourism - { - filter: ['==', ['get', 'tourism'], 'alpine_hut'], - 'icon-image': 'alpine_hut', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'tourism'], 'apartment'], - 'icon-image': 'apartment', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'tourism'], 'artwork'], - 'icon-image': 'artwork', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'tourism'], 'artwork'], - 'icon-image': 'artwork', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'tourism'], 'camp_site'], - 'icon-image': 'camping', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'tourism'], 'caravan_site'], - 'icon-image': 'caravan_park', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'tourism'], 'chalet'], - 'icon-image': 'chalet', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'tourism'], 'gallery'], - 'icon-image': 'art', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'tourism'], 'guest_house'], - 'icon-image': 'guest_house', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'tourism'], 'hostel'], - 'icon-image': 'hostel', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'tourism'], 'hotel'], - 'icon-image': 'hotel', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'tourism'], 'motel'], - 'icon-image': 'motel', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'tourism'], 'museum'], - 'icon-image': 'museum', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'tourism'], 'picnic_site'], - 'icon-image': 'picnic', - 'icon-color': 'rgb(102, 102, 102)', - 'text-color': 'rgb(102, 102, 102)', - }, - { - filter: ['==', ['get', 'tourism'], 'viewpoint'], - 'icon-image': 'viewpoint', - 'icon-color': 'rgb(115, 74, 7)', - 'text-color': 'rgb(115, 74, 7)', - }, - { - filter: ['==', ['get', 'tourism'], 'wilderness_hut'], - 'icon-image': 'wilderness_hut', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - - // Waterway: barriers on waterways - { - filter: ['==', ['get', 'waterway'], 'dam'], - 'icon-image': 'dam', - 'icon-color': 'rgb(173, 173, 173)', - 'text-color': 'rgb(173, 173, 173)', - }, - { - filter: ['==', ['get', 'waterway'], 'weir'], - 'icon-image': 'weir', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'waterway'], 'waterfall'], - 'icon-image': 'waterfall', - 'icon-color': 'rgb(0, 146, 219)', - 'text-color': 'rgb(0, 146, 219)', - }, - { - filter: ['==', ['get', 'waterway'], 'lock_gate'], - 'icon-image': 'lock_gate', - 'icon-color': 'rgb(173, 173, 173)', - 'text-color': 'rgb(173, 173, 173)', - }, - ], -} +}); diff --git a/basemap/layers/point/label.js b/basemap/layers/point/label.js index eea0e3152..0e7fa1fef 100644 --- a/basemap/layers/point/label.js +++ b/basemap/layers/point/label.js @@ -1,4 +1,47 @@ -export default { +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +let directives = [ + { + filter: ['==', ['get', 'place'], 'city'], + 'text-size': 16, + 'text-color': 'rgb(25, 25, 25)', + }, + { + filter: ['==', ['get', 'place'], 'town'], + 'text-size': 14, + 'text-color': 'rgb(50,50,50)', + }, + { + filter: ['==', ['get', 'place'], 'village'], + 'text-size': 12, + 'text-color': 'rgb(75,75,75)', + }, + { + filter: ['==', ['get', 'place'], 'locality'], + 'text-size': 12, + 'text-color': 'rgb(75,75,75)', + }, + // { + // filter: [ + // 'in', + // ['get', 'place'], + // [ + // 'literal', [ + // 'neighbourhood', + // 'quarter', + // 'hamlet', + // 'isolated_dwelling', + // 'islet' + // ] + // ] + // ], + // 'text-size': 11, + // 'text-color': 'rgba(100, 100, 100, 1)', + // }, + +]; + +export default asLayerObject(withSortKeys(directives), { id: 'label', type: 'symbol', source: 'baremaps', @@ -12,44 +55,4 @@ export default { 'text-halo-color': 'rgba(255, 255, 255, 0.8)', 'text-halo-width': 1, }, - directives: [ - { - filter: ['==', ['get', 'place'], 'city'], - 'text-size': 16, - 'text-color': 'rgb(25, 25, 25)', - }, - { - filter: ['==', ['get', 'place'], 'town'], - 'text-size': 14, - 'text-color': 'rgb(50,50,50)', - }, - { - filter: ['==', ['get', 'place'], 'village'], - 'text-size': 12, - 'text-color': 'rgb(75,75,75)', - }, - { - filter: ['==', ['get', 'place'], 'locality'], - 'text-size': 12, - 'text-color': 'rgb(75,75,75)', - }, - // { - // filter: [ - // 'in', - // ['get', 'place'], - // [ - // 'literal', [ - // 'neighbourhood', - // 'quarter', - // 'hamlet', - // 'isolated_dwelling', - // 'islet' - // ] - // ] - // ], - // 'text-size': 11, - // 'text-color': 'rgba(100, 100, 100, 1)', - // }, - - ] -} +}); diff --git a/basemap/layers/power/tower.js b/basemap/layers/power/tower.js index 8fa72cc03..c5b4ff636 100644 --- a/basemap/layers/power/tower.js +++ b/basemap/layers/power/tower.js @@ -14,10 +14,14 @@ export default { "visibility": "visible" }, "paint": { + 'circle-pitch-alignment': 'map', "circle-color": "rgb(171, 171, 171)", "circle-radius": [ - "interpolate", ["exponential", 1], ["zoom"], 13, 1, - 14, 2, 15, 3, 16, 4, 17, 5, 18, 6 + "interpolate", + ["exponential", 1], + ["zoom"], + 14, 1, + 20, 8 ] } } diff --git a/basemap/layers/railway/line.js b/basemap/layers/railway/line.js index 874f1475d..f2c52aa2a 100644 --- a/basemap/layers/railway/line.js +++ b/basemap/layers/railway/line.js @@ -1,4 +1,81 @@ -export default { +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +export let directives = [ + { + 'filter': [ + 'all', + ['==', ['get', 'railway'], 'rail'], + ['!', ['has', 'service']], + ], + 'line-color': 'rgb(112,112,112)', + 'road-width': 10, + }, + { + 'filter': ['all', + ['==', ['get', 'railway'], 'rail'], + ['has', 'service'] + ], + 'line-color': 'rgb(160,160,160)', + 'road-width': 6, + }, + { + 'filter': ['==', ['get', 'railway'], 'subway'], + 'line-color': 'rgb(160,160,160)', + 'road-width': 6, + }, + { + 'filter': ['==', ['get', 'railway'], 'tram'], + 'line-color': 'rgb(77,77,77)', + 'road-width': 6, + }, + { + 'filter': ['==', ['get', 'railway'], 'preserved'], + 'line-color': 'rgb(220,220,220)', + 'road-width': 6, + }, + { + 'filter': ['==', ['get', 'railway'], 'funicular'], + 'line-color': 'rgb(100,100,100)', + 'road-width': 6, + }, + { + 'filter': ['==', ['get', 'railway'], 'monorail'], + 'line-color': 'rgb(126,126,126)', + 'road-width': 6, + }, + { + 'filter': ['==', ['get', 'railway'], 'light_rail'], + 'line-color': 'rgb(100,100,100)', + 'road-width': 6, + }, + { + 'filter': ['==', ['get', 'railway'], 'construction'], + 'line-color': 'rgb(170,170,170)', + 'road-width': 6, + }, + { + 'filter': ['==', ['get', 'railway'], 'abandoned'], + 'line-color': 'rgb(100,100,100)', + 'road-width': 2, + }, + { + 'filter': ['==', ['get', 'railway'], 'disused'], + 'line-color': 'rgb(100,100,100)', + 'road-width': 2, + }, + { + 'filter': ['==', ['get', 'railway'], 'miniature'], + 'line-color': 'rgb(158,158,158)', + 'road-width': 2, + }, + { + 'filter': ['==', ['get', 'railway'], 'narrow_gauge'], + 'line-color': 'rgb(100,100,100)', + 'road-width': 2, + }, +]; + +export default asLayerObject(withSortKeys(directives), { 'id': 'railway_line', 'source': 'baremaps', 'source-layer': 'railway', @@ -9,78 +86,4 @@ export default { 'line-cap': 'round', 'line-join': 'round', }, - 'directives': [ - { - 'filter': ['==', ['get', 'railway'], 'abandoned'], - 'line-color': 'rgb(100,100,100)', - 'road-width': 2, - }, - { - 'filter': ['==', ['get', 'railway'], 'construction'], - 'line-color': 'rgb(170,170,170)', - 'road-width': 6, - }, - { - 'filter': ['==', ['get', 'railway'], 'disused'], - 'line-color': 'rgb(100,100,100)', - 'road-width': 2, - }, - { - 'filter': ['==', ['get', 'railway'], 'funicular'], - 'line-color': 'rgb(100,100,100)', - 'road-width': 6, - }, - { - 'filter': ['==', ['get', 'railway'], 'light_rail'], - 'line-color': 'rgb(100,100,100)', - 'road-width': 6, - }, - { - 'filter': ['==', ['get', 'railway'], 'miniature'], - 'line-color': 'rgb(158,158,158)', - 'road-width': 2, - }, - { - 'filter': ['==', ['get', 'railway'], 'monorail'], - 'line-color': 'rgb(126,126,126)', - 'road-width': 6, - }, - { - 'filter': ['==', ['get', 'railway'], 'narrow_gauge'], - 'line-color': 'rgb(100,100,100)', - 'road-width': 2, - }, - { - 'filter': ['==', ['get', 'railway'], 'preserved'], - 'line-color': 'rgb(220,220,220)', - 'road-width': 6, - }, - { - 'filter': [ - 'all', - ['==', ['get', 'railway'], 'rail'], - ['!', ['has', 'service']], - ], - 'line-color': 'rgb(112,112,112)', - 'road-width': 10, - }, - { - 'filter': ['all', - ['==', ['get', 'railway'], 'rail'], - ['has', 'service'] - ], - 'line-color': 'rgb(160,160,160)', - 'road-width': 6, - }, - { - 'filter': ['==', ['get', 'railway'], 'subway'], - 'line-color': 'rgb(160,160,160)', - 'road-width': 6, - }, - { - 'filter': ['==', ['get', 'railway'], 'tram'], - 'line-color': 'rgb(77,77,77)', - 'road-width': 6, - }, - ] -} +}); diff --git a/basemap/layers/railway/tunnel.js b/basemap/layers/railway/tunnel.js index f366ca38e..0e7335786 100644 --- a/basemap/layers/railway/tunnel.js +++ b/basemap/layers/railway/tunnel.js @@ -1,6 +1,8 @@ -import line from './line.js' +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; -export default { +import {directives} from './line.js' + +export default asLayerObject(withSortKeys(directives), { 'id': 'railway_tunnel', 'source': 'baremaps', 'source-layer': 'railway', @@ -14,5 +16,4 @@ export default { 'paint': { 'line-dasharray': [1,2] }, - 'directives': line.directives -} +}); diff --git a/basemap/layers/route/style.js b/basemap/layers/route/style.js index 78c7b6f5d..1a38b88dc 100644 --- a/basemap/layers/route/style.js +++ b/basemap/layers/route/style.js @@ -1,4 +1,14 @@ -export default { +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; + +let directives = [ + { + filter: ['==', ['get', 'route'], 'ferry'], + 'line-color': 'rgb(112, 181, 201)', + 'line-width': 1 + }, +]; + +export default asLayerObject(withSortKeys(directives), { id: 'route_ferry', type: 'line', source: 'baremaps', @@ -8,11 +18,4 @@ export default { 'line-join': 'round', visibility: 'visible', }, - directives: [ - { - filter: ['==', ['get', 'route'], 'ferry'], - 'line-color': 'rgb(112, 181, 201)', - 'line-width': 1 - }, - ], -} +}); diff --git a/basemap/style.js b/basemap/style.js index 07b233d09..defe59ae2 100644 --- a/basemap/style.js +++ b/basemap/style.js @@ -1,10 +1,11 @@ import config from "./config.js"; -import layer from './utils/layer.js'; - import background from "./layers/background/style.js"; +import aeroway_line from "./layers/aeroway/line.js"; +import aeroway_polygon from "./layers/aeroway/polygon.js"; import amenity_background from "./layers/amenity/background.js"; import amenity_fountain from "./layers/amenity/fountain.js"; +import amenity_overlay from "./layers/amenity/overlay.js"; import boundary_line from "./layers/boundary/line.js" import landuse_background from "./layers/landuse/background.js"; import landuse_overlay from "./layers/landuse/overlay.js"; @@ -12,7 +13,6 @@ import natural_background from "./layers/natural/background.js"; import natural_overlay from "./layers/natural/overlay.js"; import natural_tree from "./layers/natural/tree.js"; import natural_trunk from "./layers/natural/trunk.js"; -import natural_water from "./layers/natural/water.js"; import power_background from "./layers/power/background.js"; import power_tower from "./layers/power/tower.js"; import power_cable from "./layers/power/cable.js"; @@ -29,11 +29,11 @@ import highway_pedestrian_area from './layers/highway/pedestrian_area.js'; import highway_bridge_line from './layers/highway/bridge_line.js'; import highway_bridge_outline from './layers/highway/bridge_outline.js'; import highway_label from './layers/highway/highway_label.js'; -import ocean_background from './layers/ocean/background.js'; +import ocean_overlay from './layers/ocean/overlay.js'; import route_line from "./layers/route/style.js" import building_shape from "./layers/building/shape.js"; import building_number from "./layers/building/number.js"; -import man_made_polygon from "./layers/man_made/polygon.js"; +import man_made_bridge from "./layers/man_made/bridge.js"; import man_made_pier_line from "./layers/man_made/pier_line.js"; import man_made_pier_label from "./layers/man_made/pier_label.js"; import waterway_line from "./layers/waterway/line.js" @@ -58,44 +58,46 @@ export default { "glyphs": "https://tiles.baremaps.com/fonts/{fontstack}/{range}.pbf", "layers": [ background, - layer(natural_water), - layer(power_background), - layer(amenity_background), - layer(landuse_background), - layer(leisure_background), - layer(natural_background), - layer(ocean_background), - layer(landuse_overlay), - layer(leisure_overlay), - layer(natural_overlay), - layer(waterway_line), - layer(waterway_tunnel_casing), - layer(waterway_tunnel_line), - layer(man_made_polygon), - layer(amenity_fountain), - layer(highway_tunnel_outline), - layer(highway_tunnel_line), - layer(railway_tunnel), - layer(highway_bridge_outline), - layer(highway_bridge_line), - layer(highway_outline), - layer(highway_line), - layer(highway_dash), - layer(highway_pedestrian_area), - layer(railway_line), - layer(highway_label), - layer(route_line), - layer(power_cable), - layer(power_tower), - layer(building_shape), - layer(building_number), - layer(man_made_pier_line), - layer(man_made_pier_label), - layer(natural_tree), - layer(natural_trunk), - layer(boundary_line), - layer(waterway_label), - layer(icon), - layer(label), + power_background, + landuse_background, + natural_background, + amenity_background, + leisure_background, + landuse_overlay, + natural_overlay, + amenity_overlay, + leisure_overlay, + ocean_overlay, + waterway_line, + waterway_tunnel_casing, + waterway_tunnel_line, + man_made_bridge, + amenity_fountain, + highway_tunnel_outline, + highway_tunnel_line, + railway_tunnel, + building_shape, + building_number, + highway_outline, + highway_line, + highway_dash, + highway_pedestrian_area, + railway_line, + highway_bridge_outline, + highway_bridge_line, + highway_label, + aeroway_line, + aeroway_polygon, + route_line, + power_cable, + power_tower, + man_made_pier_line, + man_made_pier_label, + natural_tree, + natural_trunk, + boundary_line, + waterway_label, + icon, + label, ], -}; +}; \ No newline at end of file diff --git a/basemap/tileset.js b/basemap/tileset.js index 8908d1459..16a366bf7 100644 --- a/basemap/tileset.js +++ b/basemap/tileset.js @@ -1,6 +1,7 @@ import config from "./config.js"; import aerialway from "./layers/aerialway/tileset.js"; +import aeroway from "./layers/aeroway/tileset.js"; import amenity from "./layers/amenity/tileset.js"; import attraction from "./layers/attraction/tileset.js"; import barrier from "./layers/barrier/tileset.js"; @@ -29,6 +30,7 @@ export default { attribution: '© OpenStreetMap contributors', "vector_layers": [ aerialway, + aeroway, amenity, attraction, barrier, diff --git a/basemap/utils/utils.js b/basemap/utils/utils.js new file mode 100644 index 000000000..c2e128c18 --- /dev/null +++ b/basemap/utils/utils.js @@ -0,0 +1,198 @@ + +export function withSortKeys(directives) { + return directives + .map(withFillSortKey) + .map(withLineSortKey); +} + +export function withFillSortKey(directive, index, array) { + return directive['fill-color'] ?{ + ...directive, + 'fill-sort-key': array.length - index - 1, + } : directive; +} + +export function withLineSortKey(directive, index, array) { + return directive['line-width'] ? { + ...directive, + 'line-sort-key': array.length - index - 1, + } : directive; +} + +export function asLayerObject(directives = [], baseLayer = {}) { + return { + ...baseLayer, + filter: asFilterProperty(directives, baseLayer['filter']), + layout: asLayoutProperty(directives, baseLayer['layout']), + paint: asPaintProperty(directives, baseLayer['paint']), + }; +} + +export function asLayoutProperty(directives = [], baseLayout = {}) { + return Object.assign( + { + ...textFont(directives), + ...textField(directives), + ...textSize(directives), + ...textMaxWidth(directives), + ...iconImage(directives), + ...lineSortKey(directives), + ...fillSortKey(directives), + }, + baseLayout, + ) +} + +export function asPaintProperty(directives = [], basePaint = {}) { + return Object.assign( + { + ...textColor(directives), + ...textHaloColor(directives), + ...textHaloWidth(directives), + ...iconColor(directives), + ...fillColor(directives), + ...fillOutlineColor(directives), + ...lineColor(directives), + ...lineWidth(directives), + ...lineGapWidth(directives), + ...roadWidth(directives), + ...roadGapWidth(directives), + }, + basePaint, + ) +} + +export function asFilterProperty(directives = [], filter = []) { + if (directives.length > 0 && filter.length > 0) { + return [ + 'all', + filter, + ['any', ...directives.map((rule) => rule['filter'])], + ]; + } else if (directives.length > 0) { + return ['any', ...directives.map((rule) => rule['filter'])]; + } else if (filter.length > 0) { + return filter; + } else { + return []; + } +} + +function iconImage(directives) { + return mergeDirectives(directives, 'icon-image', 'none') +} + +function iconColor(directives) { + return mergeDirectives(directives, 'icon-color', 'rgba(0, 0, 0, 0)') +} + +function textFont(directives) { + return mergeDirectives(directives, 'text-font', "Arial") +} + +function textField(directives) { + return mergeDirectives(directives, 'text-field', null) +} + +function textSize(directives) { + return mergeDirectives(directives, 'text-size', 12) +} + +function textMaxWidth(directives) { + return mergeDirectives(directives, 'text-max-width', 4) +} + +function textColor(directives) { + return mergeDirectives(directives, 'text-color', 'rgba(0, 0, 0, 0)') +} + +function textHaloColor(directives) { + return mergeDirectives(directives, 'text-halo-color', 'rgba(0, 0, 0, 0)') +} + +function textHaloWidth(directives) { + return mergeDirectives(directives, 'text-halo-width', 0) +} + +function fillColor(directives) { + return mergeDirectives(directives, 'fill-color', 'rgba(0, 0, 0, 0)') +} + +function fillOutlineColor(directives) { + return mergeDirectives(directives, 'fill-outline-color', 'rgba(0, 0, 0, 0)') +} + +function lineColor(directives) { + return mergeDirectives(directives, 'line-color', 'rgba(0, 0, 0, 0)') +} + +function lineWidth(directives) { + return mergeDirectives(directives, 'line-width', 0) +} + +function lineGapWidth(directives) { + return mergeDirectives(directives, 'line-gap-width', 0) +} + +function lineSortKey(directives) { + return mergeDirectives(directives, 'line-sort-key', 0) +} + +function fillSortKey(directives) { + return mergeDirectives(directives, 'fill-sort-key', 0) +} + +function mergeDirectives(directives, property, value) { + let cases = directives.flatMap((rule) => { + if (rule[property]) { + return [rule['filter'], rule[property]] + } else { + return [] + } + }) + if (cases.length == 0) { + return {} + } + return { + [property]: ['case', ...cases, value], + } +} + +function roadWidth(directives) { + return mergeInterpolatedDirective(directives, 'road-width', 'line-width', 1) +} + +function roadGapWidth(directives) { + return mergeInterpolatedDirective(directives, 'road-gap-width', 'line-gap-width', 1) +} + +function mergeInterpolatedDirective(directives, property, alias, value) { + let cases = directives.flatMap((rule) => { + if (rule[property]) { + return [rule['filter'], rule[property]] + } else { + return [] + } + }) + if (cases.length == 0) { + return {} + } + return { + [alias]: [ + 'interpolate', + ['exponential', 1.2], + ['zoom'], + 5, + 0.2, + 20, + ['case', ...cases, value], + ], + } +} + +function groupBy(xs, key) { + return xs.reduce(function (rv, x) { + ;(rv[x[key]] = rv[x[key]] || []).push(x) + return rv + }, {}) +} \ No newline at end of file