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
apache · Feb 11, 2023 · c2c4ea8 · c2c4ea8
1 parent cd371f0
commit c2c4ea8
Show file tree

Hide file tree

Showing 35 changed files with 2,364 additions and 2,097 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)',
-        },
-    ],
-
-}
+});