Place road casings below all roads to prevent "bridge" like rendering…

… effect of regular intersections. See protomaps#42
Edefritz · Jun 12, 2023 · 315990c · 315990c
1 parent 844628e
commit 315990c
Showing 1 changed file with 99 additions and 99 deletions.
diff --git a/base/src/base_layers.ts b/base/src/base_layers.ts
@@ -488,28 +488,6 @@ export function nolabels_layers(source: string, c: Theme): any[] {
         "fill-extrusion-opacity": 0.5,
       },
     },
-    {
-      id: "roads_other",
-      type: "line",
-      source: source,
-      "source-layer": "roads",
-      filter: ["all", ["==", "pmap:level", 0], ["==", "pmap:kind", "other"]],
-      paint: {
-        "line-color": c.other,
-        "line-dasharray": [2, 1],
-        "line-width": [
-          "interpolate",
-          ["exponential", 1.6],
-          ["zoom"],
-          14,
-          0,
-          14.5,
-          0.5,
-          20,
-          12,
-        ],
-      },
-    },
     {
       id: "roads_minor_casing",
       type: "line",
@@ -548,84 +526,105 @@ export function nolabels_layers(source: string, c: Theme): any[] {
       },
     },
     {
-      id: "transit_pier",
+      id: "roads_medium_casing",
       type: "line",
       source: source,
-      "source-layer": "transit",
+      "source-layer": "roads",
       filter: [
-        "any",
-        ["==", "pmap:kind", "pier"],
+        "all",
+        ["==", "pmap:level", 0],
+        ["==", "pmap:kind", "medium_road"],
       ],
       paint: {
-        "line-color": c.minor,
-        "line-width": [
+        "line-color": c.medium_casing,
+        "line-gap-width": [
           "interpolate",
           ["exponential", 1.6],
           ["zoom"],
-          12,
+          7,
           0,
-          12.5,
+          7.5,
           0.5,
           20,
-          16,
+          32,
+        ],
+        "line-width": [
+          "interpolate",
+          ["exponential", 1.6],
+          ["zoom"],
+          10,
+          0,
+          10.5,
+          1,
         ],
       },
+      layout: {
+        visibility: casingVisibility,
+      },
     },
     {
-      id: "roads_minor",
+      id: "roads_major_casing",
       type: "line",
       source: source,
       "source-layer": "roads",
       filter: [
         "all",
         ["==", "pmap:level", 0],
-        ["==", "pmap:kind", "minor_road"],
+        ["==", "pmap:kind", "major_road"],
       ],
       paint: {
-        "line-color": c.minor,
-        "line-width": [
+        "line-color": c.major_casing,
+        "line-gap-width": [
           "interpolate",
           ["exponential", 1.6],
           ["zoom"],
-          12,
+          7,
           0,
-          12.5,
+          7.5,
           0.5,
-          20,
+          19,
           32,
         ],
+        "line-width": [
+          "interpolate",
+          ["exponential", 1.6],
+          ["zoom"],
+          9,
+          0,
+          9.5,
+          1,
+        ],
+      },
+      layout: {
+        visibility: casingVisibility,
       },
     },
     {
-      id: "roads_medium_casing",
+      id: "roads_highway_casing",
       type: "line",
       source: source,
       "source-layer": "roads",
-      filter: [
-        "all",
-        ["==", "pmap:level", 0],
-        ["==", "pmap:kind", "medium_road"],
-      ],
+      filter: ["all", ["==", "pmap:level", 0], ["==", "pmap:kind", "highway"]],
       paint: {
-        "line-color": c.medium_casing,
+        "line-color": c.highway_casing,
         "line-gap-width": [
           "interpolate",
           ["exponential", 1.6],
           ["zoom"],
-          7,
+          3,
           0,
-          7.5,
+          3.5,
           0.5,
-          20,
+          18,
           32,
         ],
         "line-width": [
           "interpolate",
           ["exponential", 1.6],
           ["zoom"],
-          10,
+          7,
           0,
-          10.5,
+          7.5,
           1,
         ],
       },
@@ -634,79 +633,88 @@ export function nolabels_layers(source: string, c: Theme): any[] {
       },
     },
     {
-      id: "roads_medium",
+      id: "roads_other",
       type: "line",
       source: source,
       "source-layer": "roads",
-      filter: [
-        "all",
-        ["==", "pmap:level", 0],
-        ["==", "pmap:kind", "medium_road"],
-      ],
+      filter: ["all", ["==", "pmap:level", 0], ["==", "pmap:kind", "other"]],
       paint: {
-        "line-color": c.medium,
+        "line-color": c.other,
+        "line-dasharray": [2, 1],
         "line-width": [
           "interpolate",
           ["exponential", 1.6],
           ["zoom"],
-          7,
+          14,
           0,
-          7.5,
+          14.5,
           0.5,
           20,
-          32,
+          12,
         ],
       },
     },
     {
-      id: "roads_major_casing",
+      id: "transit_pier",
       type: "line",
       source: source,
-      "source-layer": "roads",
+      "source-layer": "transit",
       filter: [
-        "all",
-        ["==", "pmap:level", 0],
-        ["==", "pmap:kind", "major_road"],
+        "any",
+        ["==", "pmap:kind", "pier"],
       ],
       paint: {
-        "line-color": c.major_casing,
-        "line-gap-width": [
+        "line-color": c.minor,
+        "line-width": [
           "interpolate",
           ["exponential", 1.6],
           ["zoom"],
-          7,
+          12,
           0,
-          7.5,
+          12.5,
           0.5,
-          19,
-          32,
+          20,
+          16,
         ],
+      },
+    },
+    {
+      id: "roads_minor",
+      type: "line",
+      source: source,
+      "source-layer": "roads",
+      filter: [
+        "all",
+        ["==", "pmap:level", 0],
+        ["==", "pmap:kind", "minor_road"],
+      ],
+      paint: {
+        "line-color": c.minor,
         "line-width": [
           "interpolate",
           ["exponential", 1.6],
           ["zoom"],
-          9,
+          12,
           0,
-          9.5,
-          1,
+          12.5,
+          0.5,
+          20,
+          32,
         ],
       },
-      layout: {
-        visibility: casingVisibility,
-      },
     },
     {
-      id: "roads_major",
+      id: "roads_medium",
       type: "line",
       source: source,
       "source-layer": "roads",
       filter: [
         "all",
         ["==", "pmap:level", 0],
-        ["==", "pmap:kind", "major_road"],
+        ["==", "pmap:kind", "medium_road"],
       ],
       paint: {
-        "line-color": c.major,
+        "line-color": c.medium,
         "line-width": [
           "interpolate",
           ["exponential", 1.6],
@@ -715,43 +723,35 @@ export function nolabels_layers(source: string, c: Theme): any[] {
           0,
           7.5,
           0.5,
-          19,
+          20,
           32,
         ],
       },
     },
     {
-      id: "roads_highway_casing",
+      id: "roads_major",
       type: "line",
       source: source,
       "source-layer": "roads",
-      filter: ["all", ["==", "pmap:level", 0], ["==", "pmap:kind", "highway"]],
+      filter: [
+        "all",
+        ["==", "pmap:level", 0],
+        ["==", "pmap:kind", "major_road"],
+      ],
       paint: {
-        "line-color": c.highway_casing,
-        "line-gap-width": [
-          "interpolate",
-          ["exponential", 1.6],
-          ["zoom"],
-          3,
-          0,
-          3.5,
-          0.5,
-          18,
-          32,
-        ],
+        "line-color": c.major,
         "line-width": [
           "interpolate",
           ["exponential", 1.6],
           ["zoom"],
           7,
           0,
           7.5,
-          1,
+          0.5,
+          19,
+          32,
         ],
       },
-      layout: {
-        visibility: casingVisibility,
-      },
     },
     {
       id: "roads_highway",