diff --git a/src/americana.js b/src/americana.js index 1a51f84e6..e68057f7a 100644 --- a/src/americana.js +++ b/src/americana.js @@ -9,6 +9,7 @@ import * as ShieldDef from "./js/shield_defs.js"; import * as lyrAeroway from "./layer/aeroway.js"; import * as lyrBackground from "./layer/background.js"; import * as lyrBoundary from "./layer/boundary.js"; +import * as lyrConstruction from "./layer/construction.js"; import * as lyrHighwayShield from "./layer/highway_shield.js"; import * as lyrOneway from "./layer/oneway.js"; import * as lyrPark from "./layer/park.js"; @@ -65,6 +66,8 @@ americanaLayers.push( lyrBackground.pierArea, lyrBackground.pierLine, + lyrConstruction.road, + lyrRoad.motorwayLinkTunnel.casing(), lyrRoad.trunkLinkTunnel.casing(), lyrRoad.primaryLinkTunnel.casing(), @@ -408,6 +411,8 @@ americanaLayers.push( lyrRoadLabel.service, lyrRoadLabel.smallService, + lyrConstruction.label, + lyrPark.label, lyrPark.parkLabel, /* The ref label shows up at lower zoom levels and when the long name doesn't fit */ diff --git a/src/layer/construction.js b/src/layer/construction.js new file mode 100644 index 000000000..6771989e1 --- /dev/null +++ b/src/layer/construction.js @@ -0,0 +1,82 @@ +const majorConstruction = [ + "match", + ["get", "class"], + ["motorway_construction", "trunk_construction"], +]; + +const constructionColor = [ + "interpolate-lab", + ["exponential", 2], + ["zoom"], + 10, + [...majorConstruction, "lightcoral", "lightslategray"], + 13, + [...majorConstruction, "maroon", "lightslategray"], + 15, + [...majorConstruction, "maroon", "slategray"], +]; + +const constructionFilter = [ + "in", + ["get", "class"], + [ + "literal", + [ + "motorway_construction", + "trunk_construction", + "primary_construction", + "secondary_construction", + "tertiary_construction", + "minor_construction", + "service_construction", + ], + ], +]; + +export const road = { + id: "highway-construction", + type: "line", + source: "openmaptiles", + "source-layer": "transportation", + filter: constructionFilter, + minzoom: 9, + paint: { + "line-color": constructionColor, + "line-opacity": ["interpolate", ["exponential", 2], ["zoom"], 10, 0, 11, 1], + "line-blur": 0.75, + "line-width": 1, + "line-dasharray": [2.5, 1.25], + "line-offset": 0, + "line-gap-width": [ + "interpolate", + ["exponential", 1.2], + ["zoom"], + 11, + 0, + 20, + 2, + ], + }, +}; + +export const label = { + id: "highway-construction-name", + type: "symbol", + source: "openmaptiles", + "source-layer": "transportation_name", + filter: constructionFilter, + minzoom: 15, + layout: { + "symbol-placement": "line", + "text-font": ["Metropolis Light"], + "text-size": 12, + "text-field": "{name}", + "text-anchor": "bottom", + }, + paint: { + "text-color": constructionColor, + "text-halo-color": "white", + "text-halo-width": 2, + "text-halo-blur": 0.5, + }, +};