Fix styling issues (#579)

apache · Feb 6, 2023 · cd371f0 · cd371f0
1 parent 8b46bef
commit cd371f0
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 15 deletions.
diff --git a/basemap/layers/highway/bridge_line.js b/basemap/layers/highway/bridge_line.js
@@ -104,5 +104,14 @@ export default {
             '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/man_made/bridge.js → basemap/layers/man_made/polygon.js b/basemap/layers/man_made/bridge.js → basemap/layers/man_made/polygon.js
@@ -6,9 +6,10 @@ export default {
     layout: {
         visibility: 'visible',
     },
+    filter: ['==', ['geometry-type'], 'Polygon'],
     directives: [
         {
-            filter: ['==', ['get', 'man_made'], 'bridge'],
+            filter: ['in', ['get', 'man_made'], ['literal', ['bridge', 'breakwater']]],
             'fill-color': 'rgb(184, 184, 184)',
         },
     ],

diff --git a/basemap/layers/natural/overlay.js b/basemap/layers/natural/overlay.js
@@ -14,11 +14,6 @@ export default {
             filter: ['==', ['get', 'natural'], 'beach'],
             'fill-color': 'rgb(255, 241, 186)'
         },
-        {
-            filter: ['==', ['get', 'natural'], 'water'],
-            'fill-color': 'rgb(170, 211, 223)',
-            'fill-sort-key': 10,
-        },
         {
             filter: ['==', ['get', 'natural'], 'wetland'],
             'fill-color': 'rgb(213, 231, 211)'

diff --git a/basemap/layers/natural/tree.js b/basemap/layers/natural/tree.js
@@ -8,6 +8,7 @@ export default {
         visibility: 'visible',
     },
     paint: {
+        'circle-pitch-alignment': 'map',
         'circle-color': 'rgb(113, 205, 111)',
         'circle-radius': [
             'interpolate',

diff --git a/basemap/layers/natural/trunk.js b/basemap/layers/natural/trunk.js
@@ -8,6 +8,7 @@ export default {
         visibility: 'visible',
     },
     paint: {
+        'circle-pitch-alignment': 'map',
         'circle-color': 'rgb(129, 94, 39)',
         'circle-radius': [
             'interpolate',

diff --git a/basemap/layers/natural/water.js b/basemap/layers/natural/water.js
@@ -0,0 +1,19 @@
+export default {
+    id: 'natural_water',
+    type: 'fill',
+    source: 'baremaps',
+    'source-layer': 'natural',
+    layout: {
+        visibility: 'visible',
+    },
+    paint: {
+        'fill-antialias': true,
+    },
+    directives: [
+        {
+            filter: ['==', ['get', 'natural'], 'water'],
+            'fill-color': 'rgb(170, 211, 223)',
+            'fill-sort-key': 10,
+        }
+    ]
+}
diff --git a/basemap/style.js b/basemap/style.js
@@ -12,6 +12,7 @@ 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";
@@ -32,7 +33,7 @@ import ocean_background from './layers/ocean/background.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_bridge from "./layers/man_made/bridge.js";
+import man_made_polygon from "./layers/man_made/polygon.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"
@@ -57,6 +58,7 @@ 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),
@@ -69,18 +71,18 @@ export default {
         layer(waterway_line),
         layer(waterway_tunnel_casing),
         layer(waterway_tunnel_line),
-        layer(man_made_bridge),
+        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_bridge_outline),
-        layer(highway_bridge_line),
         layer(highway_label),
         layer(route_line),
         layer(power_cable),

diff --git a/basemap/utils/layer.js b/basemap/utils/layer.js
@@ -148,9 +148,9 @@ function roadGapWidth(layer) {
 }
 
 function mergeInterpolatedDirective(layer, property, alias, value) {
-    let cases = layer['directives'].flatMap((rule) => {
-        if (rule[property]) {
-            return [rule['filter'], rule[property]]
+    let cases = layer['directives'].flatMap((directive) => {
+        if (directive[property]) {
+            return [directive['filter'], directive[property]]
         } else {
             return []
         }
@@ -161,10 +161,10 @@ function mergeInterpolatedDirective(layer, property, alias, value) {
     return {
         [alias]: [
             'interpolate',
-            ['exponential', 1.2],
+            ['exponential', 1.1],
             ['zoom'],
             5,
-            0.2,
+            0.1,
             20,
             ['case', ...cases, value],
         ],