Merge pull request #336 from ZeLonewolf/piers

Add pier styling
osm-americana · May 21, 2022 · 078755a · 078755a
2 parents 63e0223 + 037d920
commit 078755a
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 6 deletions.
diff --git a/style/americana.js b/style/americana.js
@@ -62,6 +62,9 @@ americanaLayers.push(
   lyrWater.waterLabel,
   lyrWater.waterPointLabel,
 
+  lyrBackground.pierArea,
+  lyrBackground.pierLine,
+
   lyrRoad.motorwayTunnel.casing(),
   lyrRoad.trunkExpresswayTunnel.casing(),
   lyrRoad.trunkTunnel.casing(),

diff --git a/style/layer/background.js b/style/layer/background.js
@@ -4,18 +4,55 @@
 
   This is the base color of the map.
 */
+
+let backgroundColor = {
+  stops: [
+    [6, "rgba(253, 251, 242, 1)"],
+    [10, "rgba(253, 251, 242, 1)"],
+    [14, "rgba(250, 246, 242, 1)"],
+    [15, "rgba(250, 246, 242, 1)"],
+  ],
+};
+
 export const base = {
   id: "background",
   type: "background",
   paint: {
-    "background-color": {
+    "background-color": backgroundColor,
+  },
+  layout: { visibility: "visible" },
+};
+
+export const pierArea = {
+  id: "pierArea",
+  type: "fill",
+  source: "openmaptiles",
+  "source-layer": "transportation",
+  filter: ["all", ["==", "class", "pier"], ["==", "$type", "Polygon"]],
+  paint: {
+    "fill-color": backgroundColor,
+  },
+  layout: { visibility: "visible" },
+};
+
+export const pierLine = {
+  id: "pierLine",
+  type: "line",
+  source: "openmaptiles",
+  "source-layer": "transportation",
+  filter: ["all", ["==", "class", "pier"], ["==", "$type", "LineString"]],
+  paint: {
+    "line-color": backgroundColor,
+    "line-width": {
+      base: 1.7,
       stops: [
-        [6, "rgba(253, 251, 242, 1)"],
-        [10, "rgba(253, 251, 242, 1)"],
-        [14, "rgba(250, 246, 242, 1)"],
-        [15, "rgba(250, 246, 242, 1)"],
+        [14, 1],
+        [20, 20],
       ],
     },
   },
-  layout: { visibility: "visible" },
+  layout: {
+    "line-cap": "butt",
+    visibility: "visible",
+  },
 };