feat: ✨ use attachments, add bridges

split the rendering in layers to avoid gaps
dch0ph · Aug 31, 2022 · e88d8cc · e88d8cc
1 parent 542f8bc
commit e88d8cc
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 46 deletions.
diff --git a/project.mml b/project.mml
@@ -1015,8 +1015,10 @@ Layer:
             way,
             tags->'roller_coaster' AS roller_coaster,
             railway,
-            CASE WHEN (tunnel = 'yes' OR tunnel = 'building_passage' OR covered = 'yes') THEN 'yes' ELSE 'no' END AS tunnel
+            CASE WHEN (tunnel = 'yes' OR tunnel = 'building_passage' OR covered = 'yes') THEN 'yes' ELSE 'no' END AS tunnel,
+            CASE WHEN (bridge = 'yes' OR bridge = 'covered' OR bridge = 'viaduct') THEN 'yes' ELSE 'no' END AS bridge
           FROM planet_osm_line
+          WHERE railway IS NULL
           ORDER BY
             COALESCE(layer, 0) -- put bottom layered track first
         ) AS roller_coaster

diff --git a/style/roads.mss b/style/roads.mss
@@ -3520,51 +3520,73 @@ tertiary is rendered from z10 and is not included in osm_planet_roads. */
   }
 }
 
-#roller-coaster {
-  [roller_coaster = 'track'][railway = null] {
-    [zoom >= 14] {
-      line-width: 1;
-      line-color: #707070;
-      line-join: round;
-      b/line-width: 0.5;
-      b/line-color: @road-fill;
-      b/line-dasharray: 0,0.1,0.5,0.1;
-      b/line-join: round;
-      [tunnel = 'yes'] { 
-        line-color: lighten(#707070, 20%);
-        b/line-color: lighten(@road-fill, 5%);
-      }
-    }
-    [zoom >= 15] {
-      line-width: 2;
-      b/line-width: 1;
-      b/line-dasharray: 0,0.2,1,0.2;
-    }
-    [zoom >= 16] {
-      line-width: 3;
-      b/line-width: 1.5;
-      b/line-dasharray: 0,0.3,3,0.3;
-    }
-    [zoom >= 17] {
-      line-width: 4.5;
-      b/line-width: 2.25;
-      b/line-dasharray: 0,0.45,4.5,0.45;
-    }
-    [zoom >= 18] {
-      line-width: 6;
-      b/line-width: 3;
-      b/line-dasharray: 0,0.6,6,0.6;
-    }
-    [zoom >= 19] {
-      line-width: 8;
-      b/line-width: 4;
-      b/line-dasharray: 0,0.8,8,0.8;
-    }
-    [zoom >= 20] {
-      line-width: 12;
-      b/line-width: 6;
-      b/line-dasharray: 0,1.2,12,1.2;
-    }
+#roller-coaster::casing[roller_coaster = 'track'][bridge = 'yes'][zoom >= 14] {
+  line-width: 1 + 2*@casing-width-z14;
+  line-color: darken(#707070, 20%);
+  line-join: round;
+  line-cap: round;
+  [zoom >= 15] { line-width: 2 + 2*@casing-width-z15; }
+  [zoom >= 16] { line-width: 3 + 2*@casing-width-z16; }
+  [zoom >= 17] { line-width: 4.5 + 2*@casing-width-z17; }
+  [zoom >= 18] { line-width: 6 + 2*@casing-width-z18; }
+  [zoom >= 19] { line-width: 8 + 2*@casing-width-z19; }
+  [zoom >= 20] { line-width: 12 + 2*@casing-width-z20; }
+}
+
+#roller-coaster::background[roller_coaster = 'track'][zoom >= 14] {
+  line-width: 1;
+  line-color: #707070;
+  line-join: round;
+  line-cap: round;
+  [zoom >= 15] { line-width: 2; }
+  [zoom >= 16] { line-width: 3; }
+  [zoom >= 17] { line-width: 4.5; }
+  [zoom >= 18] { line-width: 6; }
+  [zoom >= 19] { line-width: 8; }
+  [zoom >= 20] { line-width: 12; }
+}
+
+#roller-coaster[roller_coaster = 'track'][zoom >= 14] {
+  line-width: 1;
+  line-color: #707070;
+  line-join: round;
+  b/line-width: 0.5;
+  b/line-color: @road-fill;
+  b/line-dasharray: 0,0.1,0.5,0.1;
+  b/line-join: round;
+  [tunnel = 'yes'] { 
+    line-color: lighten(#707070, 20%);
+    b/line-color: lighten(@road-fill, 5%);
+  }
+  [zoom >= 15] {
+    line-width: 2;
+    b/line-width: 1;
+    b/line-dasharray: 0,0.2,1,0.2;
+  }
+  [zoom >= 16] {
+    line-width: 3;
+    b/line-width: 1.5;
+    b/line-dasharray: 0,0.3,3,0.3;
+  }
+  [zoom >= 17] {
+    line-width: 4.5;
+    b/line-width: 2.25;
+    b/line-dasharray: 0,0.45,4.5,0.45;
+  }
+  [zoom >= 18] {
+    line-width: 6;
+    b/line-width: 3;
+    b/line-dasharray: 0,0.6,6,0.6;
+  }
+  [zoom >= 19] {
+    line-width: 8;
+    b/line-width: 4;
+    b/line-dasharray: 0,0.8,8,0.8;
+  }
+  [zoom >= 20] {
+    line-width: 12;
+    b/line-width: 6;
+    b/line-dasharray: 0,1.2,12,1.2;
   }
 }