diff --git a/src/americana.js b/src/americana.js index a74bc933d..fb2ef9aa5 100644 --- a/src/americana.js +++ b/src/americana.js @@ -75,65 +75,9 @@ americanaLayers.push( lyrConstruction.road, - lyrRoad.motorwayLinkTunnel.casing(), - lyrRoad.trunkLinkTunnel.casing(), - lyrRoad.primaryLinkTunnel.casing(), - lyrRoad.secondaryLinkTunnel.casing(), - lyrRoad.tertiaryLinkTunnel.casing(), - - lyrRoad.primaryLinkTollTunnel.casing(), - lyrRoad.secondaryLinkTollTunnel.casing(), - lyrRoad.tertiaryLinkTollTunnel.casing(), - - lyrRoad.motorwayTunnel.casing(), - lyrRoad.trunkExpresswayTunnel.casing(), - lyrRoad.trunkTunnel.casing(), - lyrRoad.primaryExpresswayTunnel.casing(), - lyrRoad.primaryTunnel.casing(), - lyrRoad.secondaryExpresswayTunnel.casing(), - lyrRoad.secondaryTunnel.casing(), - lyrRoad.tertiaryExpresswayTunnel.casing(), - lyrRoad.tertiaryTunnel.casing(), - lyrRoad.minorTunnel.casing(), - lyrRoad.serviceTunnel.casing(), - lyrRoad.smallServiceTunnel.casing(), - - lyrRoad.primaryTollTunnel.casing(), - lyrRoad.secondaryTollTunnel.casing(), - lyrRoad.tertiaryTollTunnel.casing(), - lyrRoad.minorTollTunnel.casing(), - lyrRoad.serviceTollTunnel.casing(), - lyrRoad.smallServiceTollTunnel.casing(), - - lyrRoad.motorwayLinkTunnel.fill(), - lyrRoad.trunkLinkTunnel.fill(), - lyrRoad.primaryLinkTunnel.fill(), - lyrRoad.secondaryLinkTunnel.fill(), - lyrRoad.tertiaryLinkTunnel.fill(), - - lyrRoad.primaryLinkTollTunnel.fill(), - lyrRoad.secondaryLinkTollTunnel.fill(), - lyrRoad.tertiaryLinkTollTunnel.fill(), - - lyrRoad.motorwayTunnel.fill(), - lyrRoad.trunkExpresswayTunnel.fill(), - lyrRoad.trunkTunnel.fill(), - lyrRoad.primaryExpresswayTunnel.fill(), - lyrRoad.primaryTunnel.fill(), - lyrRoad.secondaryExpresswayTunnel.fill(), - lyrRoad.secondaryTunnel.fill(), - lyrRoad.tertiaryExpresswayTunnel.fill(), - lyrRoad.tertiaryTunnel.fill(), - lyrRoad.minorTunnel.fill(), - lyrRoad.serviceTunnel.fill(), - lyrRoad.smallServiceTunnel.fill(), - - lyrRoad.primaryTollTunnel.fill(), - lyrRoad.secondaryTollTunnel.fill(), - lyrRoad.tertiaryTollTunnel.fill(), - lyrRoad.minorTollTunnel.fill(), - lyrRoad.serviceTollTunnel.fill(), - lyrRoad.smallServiceTollTunnel.fill(), + lyrRoad.roadTunnel.casing(), + + lyrRoad.roadTunnel.fill(), lyrOneway.tunnel, lyrOneway.tunnelLink, @@ -147,94 +91,38 @@ americanaLayers.push( lyrRoad.motorwayLink.casing(), lyrRoad.trunkLink.casing(), - lyrRoad.primaryLink.casing(), - lyrRoad.secondaryLink.casing(), - lyrRoad.tertiaryLink.casing(), - lyrRoad.primaryLinkToll.casing(), - lyrRoad.secondaryLinkToll.casing(), - lyrRoad.tertiaryLinkToll.casing(), + lyrRoad.roadLinkSimpleCasing.casing(), lyrRoad.motorway.casing(), - lyrRoad.trunkExpressway.casing(), lyrRoad.trunk.casing(), lyrRoad.primaryExpressway.casing(), - lyrRoad.primary.casing(), lyrRoad.secondaryExpressway.casing(), - lyrRoad.secondary.casing(), lyrRoad.tertiaryExpressway.casing(), - lyrRoad.tertiary.casing(), - lyrRoad.minor.casing(), - lyrRoad.service.casing(), - lyrRoad.smallService.casing(), - - lyrRoad.primaryToll.casing(), - lyrRoad.secondaryToll.casing(), - lyrRoad.tertiaryToll.casing(), - lyrRoad.minorToll.casing(), - lyrRoad.serviceToll.casing(), - lyrRoad.smallServiceToll.casing(), + + lyrRoad.roadSimpleCasing.casing(), lyrRoad.motorwayLink.fill(), - lyrRoad.trunkLink.fill(), + lyrRoad.roadLinkSimpleFill.fill(), lyrRoad.primaryLink.fill(), - lyrRoad.secondaryLink.fill(), - lyrRoad.tertiaryLink.fill(), - lyrRoad.primaryLinkToll.fill(), + lyrRoad.secondaryLink.fill(), lyrRoad.secondaryLinkToll.fill(), + lyrRoad.tertiaryLink.fill(), lyrRoad.tertiaryLinkToll.fill(), - lyrRoad.smallService.fill(), - lyrRoad.service.fill(), lyrRoad.minor.fill(), - lyrRoad.tertiary.fill(), - lyrRoad.tertiaryExpressway.fill(), - lyrRoad.secondary.fill(), - lyrRoad.secondaryExpressway.fill(), - lyrRoad.primary.fill(), - lyrRoad.primaryExpressway.fill(), - lyrRoad.trunk.fill(), - lyrRoad.trunkExpressway.fill(), - lyrRoad.motorway.fill(), - lyrRoad.interstate.fill(), - - lyrRoad.smallServiceToll.fill(), - lyrRoad.serviceToll.fill(), lyrRoad.minorToll.fill(), + lyrRoad.tertiary.fill(), lyrRoad.tertiaryToll.fill(), + lyrRoad.secondary.fill(), lyrRoad.secondaryToll.fill(), + lyrRoad.primary.fill(), lyrRoad.primaryToll.fill(), + lyrRoad.roadSimpleFill.fill(), + lyrRoad.motorway.fill(), - lyrRoad.motorwayLink.surface(), - lyrRoad.trunkLink.surface(), - lyrRoad.primaryLink.surface(), - lyrRoad.secondaryLink.surface(), - lyrRoad.tertiaryLink.surface(), - - lyrRoad.primaryLinkToll.surface(), - lyrRoad.secondaryLinkToll.surface(), - lyrRoad.tertiaryLinkToll.surface(), - - lyrRoad.smallService.surface(), - lyrRoad.service.surface(), - lyrRoad.minor.surface(), - lyrRoad.tertiary.surface(), - lyrRoad.tertiaryExpressway.surface(), - lyrRoad.secondary.surface(), - lyrRoad.secondaryExpressway.surface(), - lyrRoad.primary.surface(), - lyrRoad.primaryExpressway.surface(), - lyrRoad.trunk.surface(), - lyrRoad.trunkExpressway.surface(), - lyrRoad.motorway.surface(), - - lyrRoad.smallServiceToll.surface(), - lyrRoad.serviceToll.surface(), - lyrRoad.minorToll.surface(), - lyrRoad.tertiaryToll.surface(), - lyrRoad.secondaryToll.surface(), - lyrRoad.primaryToll.surface(), + lyrRoad.road.surface(), lyrRail.rail.dashes(), lyrRail.railService.dashes(), @@ -258,86 +146,40 @@ americanaLayers.push(lyrBuilding.building); var bridgeLayers = [ lyrRail.bridgeCasing, - lyrRoad.tertiaryLinkBridge.casing(), - lyrRoad.secondaryLinkBridge.casing(), - lyrRoad.primaryLinkBridge.casing(), lyrRoad.trunkLinkBridge.casing(), lyrRoad.motorwayLinkBridge.casing(), - lyrRoad.tertiaryLinkTollBridge.casing(), - lyrRoad.secondaryLinkTollBridge.casing(), - lyrRoad.primaryLinkTollBridge.casing(), + lyrRoad.roadLinkSimpleCasingBridge.casing(), - lyrRoad.smallServiceBridge.casing(), - lyrRoad.serviceBridge.casing(), - lyrRoad.minorBridge.casing(), - lyrRoad.tertiaryBridge.casing(), lyrRoad.tertiaryExpresswayBridge.casing(), - lyrRoad.secondaryBridge.casing(), lyrRoad.secondaryExpresswayBridge.casing(), - lyrRoad.primaryBridge.casing(), lyrRoad.primaryExpresswayBridge.casing(), lyrRoad.trunkBridge.casing(), - lyrRoad.trunkExpresswayBridge.casing(), lyrRoad.motorwayBridge.casing(), - lyrRoad.smallServiceTollBridge.casing(), - lyrRoad.serviceTollBridge.casing(), - lyrRoad.minorTollBridge.casing(), - lyrRoad.tertiaryTollBridge.casing(), - lyrRoad.secondaryTollBridge.casing(), - lyrRoad.primaryTollBridge.casing(), + lyrRoad.roadSimpleCasingBridge.casing(), lyrRoad.tertiaryLinkBridge.fill(), - lyrRoad.secondaryLinkBridge.fill(), - lyrRoad.primaryLinkBridge.fill(), - lyrRoad.trunkLinkBridge.fill(), - lyrRoad.motorwayLinkBridge.fill(), - lyrRoad.tertiaryLinkTollBridge.fill(), + lyrRoad.secondaryLinkBridge.fill(), lyrRoad.secondaryLinkTollBridge.fill(), + lyrRoad.primaryLinkBridge.fill(), lyrRoad.primaryLinkTollBridge.fill(), + lyrRoad.roadLinkSimpleFillBridge.fill(), + lyrRoad.motorwayLinkBridge.fill(), - lyrRoad.smallServiceBridge.fill(), - lyrRoad.serviceBridge.fill(), lyrRoad.minorBridge.fill(), - lyrRoad.tertiaryBridge.fill(), - lyrRoad.tertiaryExpresswayBridge.fill(), - lyrRoad.secondaryBridge.fill(), - lyrRoad.secondaryExpresswayBridge.fill(), - lyrRoad.primaryBridge.fill(), - lyrRoad.primaryExpresswayBridge.fill(), - lyrRoad.trunkBridge.fill(), - lyrRoad.trunkExpresswayBridge.fill(), - lyrRoad.motorwayBridge.fill(), - - lyrRoad.smallServiceTollBridge.fill(), - lyrRoad.serviceTollBridge.fill(), lyrRoad.minorTollBridge.fill(), + lyrRoad.tertiaryBridge.fill(), lyrRoad.tertiaryTollBridge.fill(), + lyrRoad.secondaryBridge.fill(), lyrRoad.secondaryTollBridge.fill(), + lyrRoad.primaryBridge.fill(), lyrRoad.primaryTollBridge.fill(), + lyrRoad.roadSimpleFillBridge.fill(), + lyrRoad.motorwayBridge.fill(), - lyrRoad.tertiaryLinkBridge.surface(), - lyrRoad.secondaryLinkBridge.surface(), - lyrRoad.primaryLinkBridge.surface(), - lyrRoad.trunkLinkBridge.surface(), - lyrRoad.motorwayLinkBridge.surface(), - - lyrRoad.tertiaryLinkTollBridge.surface(), - lyrRoad.secondaryLinkTollBridge.surface(), - lyrRoad.primaryLinkTollBridge.surface(), - - lyrRoad.tertiaryBridge.surface(), - lyrRoad.secondaryBridge.surface(), - lyrRoad.primaryBridge.surface(), - lyrRoad.trunkBridge.surface(), - lyrRoad.trunkExpresswayBridge.surface(), - lyrRoad.motorwayBridge.surface(), - - lyrRoad.tertiaryTollBridge.surface(), - lyrRoad.secondaryTollBridge.surface(), - lyrRoad.primaryTollBridge.surface(), + lyrRoad.roadBridge.surface(), lyrRail.railBridge.dashes(), lyrRail.railServiceBridge.dashes(), @@ -359,7 +201,7 @@ var bridgeLayers = [ //Render bridge without layer on the lowest bridge layer bridgeLayers.forEach((layer) => americanaLayers.push( - Util.filteredClone(layer, ["!has", "layer"], "_layer_bottom") + Util.filteredClone(layer, ["!", ["has", "layer"]], "_layer_bottom") ) ); @@ -373,7 +215,11 @@ for (let i = 1; i <= 4; i++) { //If layer is more than 5, just give up and render on a single layer. bridgeLayers.forEach((layer) => americanaLayers.push( - Util.filteredClone(layer, [">=", "layer", 5], "_layer_top") + Util.filteredClone( + layer, + [">=", ["coalesce", ["get", "layer"], 0], 5], + "_layer_top" + ) ) ); diff --git a/src/js/util.js b/src/js/util.js index 58e06b076..d17966d79 100644 --- a/src/js/util.js +++ b/src/js/util.js @@ -3,7 +3,11 @@ //Limit the specified definition to a single numbered layer export function restrictLayer(def, layer) { - return filteredClone(def, ["==", "layer", layer], "_layer_" + layer); + return filteredClone( + def, + ["==", ["coalesce", ["get", "layer"], 0], layer], + "_layer_" + layer + ); } export function cp(obj) { diff --git a/src/layer/aeroway.js b/src/layer/aeroway.js index 7294b7546..b3c7ff124 100644 --- a/src/layer/aeroway.js +++ b/src/layer/aeroway.js @@ -13,7 +13,7 @@ const minorAirport = [ "any", ["!", ["has", "iata"]], ["!", ["has", "icao"]], - ["in", ["get", "class"], ["literal", ["private"]]], + ["==", ["get", "class"], "private"], ]; const iconLayout = { @@ -39,7 +39,7 @@ const iconLayout = { export const fill = { id: "airport_fill", type: "fill", - filter: ["==", "class", "aerodrome"], + filter: ["==", ["get", "class"], "aerodrome"], paint: { "fill-color": Color.airportFill, }, @@ -54,7 +54,7 @@ export const fill = { export const outline = { id: "airport_outline", type: "line", - filter: ["==", "class", "aerodrome"], + filter: ["==", ["get", "class"], "aerodrome"], paint: { "line-color": Color.airportOutline, }, @@ -69,7 +69,11 @@ export const outline = { export const runway = { id: "airport_runway", type: "line", - filter: ["all", ["==", "class", "runway"], ["==", "$type", "LineString"]], + filter: [ + "all", + ["==", ["get", "class"], "runway"], + ["==", ["geometry-type"], "LineString"], + ], paint: { "line-color": Color.airportRunway, "line-width": { @@ -93,7 +97,11 @@ export const runway = { export const runwayArea = { id: "airport_runway_area", type: "fill", - filter: ["all", ["==", "class", "runway"], ["==", "$type", "Polygon"]], + filter: [ + "all", + ["==", ["get", "class"], "runway"], + ["==", ["geometry-type"], "Polygon"], + ], paint: { "fill-color": Color.airportRunway, }, @@ -108,7 +116,11 @@ export const runwayArea = { export const taxiway = { id: "airport_taxiway", type: "line", - filter: ["all", ["==", "class", "taxiway"], ["==", "$type", "LineString"]], + filter: [ + "all", + ["==", ["get", "class"], "taxiway"], + ["==", ["geometry-type"], "LineString"], + ], paint: { "line-color": Color.airportRunway, "line-width": { @@ -132,7 +144,11 @@ export const taxiway = { export const taxiwayArea = { id: "airport_taxiway_area", type: "fill", - filter: ["all", ["==", "class", "taxiway"], ["==", "$type", "Polygon"]], + filter: [ + "all", + ["==", ["get", "class"], "taxiway"], + ["==", ["geometry-type"], "Polygon"], + ], paint: { "fill-color": Color.airportRunway, }, @@ -161,7 +177,6 @@ export const airportRefLabel = { "text-field": ["coalesce", ["get", "iata"], ["get", "icao"]], "text-font": ["Metropolis Bold"], "text-size": 10, - "symbol-sort-key": ["get", "rank"], ...iconLayout, }, source: "openmaptiles", @@ -186,7 +201,6 @@ export const minorAirportRefLabel = { "text-field": ["coalesce", ["get", "iata"], ["get", "icao"]], "text-font": ["Metropolis Bold"], "text-size": 10, - "symbol-sort-key": ["get", "rank"], }, source: "openmaptiles", metadata: {}, @@ -210,7 +224,6 @@ export const airportLabel = { "text-field": name_en, "text-font": ["Metropolis Bold"], "text-size": 10, - "symbol-sort-key": ["get", "rank"], ...iconLayout, }, source: "openmaptiles", @@ -235,7 +248,6 @@ export const minorAirportLabel = { "text-field": name_en, "text-font": ["Metropolis Bold"], "text-size": 10, - "symbol-sort-key": ["get", "rank"], }, source: "openmaptiles", metadata: {}, @@ -245,7 +257,7 @@ export const minorAirportLabel = { export const airportGate = { id: "airport_gate_label", type: "symbol", - filter: ["==", "class", "gate"], + filter: ["==", ["get", "class"], "gate"], minzoom: 15, paint: { "text-color": Color.airportLabel, @@ -258,7 +270,6 @@ export const airportGate = { "text-field": "{ref}", "text-font": ["Metropolis Bold"], "text-size": 10, - "symbol-sort-key": ["get", "rank"], }, source: "openmaptiles", metadata: {}, diff --git a/src/layer/background.js b/src/layer/background.js index 7af4870e5..7ccc1caa6 100644 --- a/src/layer/background.js +++ b/src/layer/background.js @@ -24,7 +24,11 @@ export const pierArea = { type: "fill", source: "openmaptiles", "source-layer": "transportation", - filter: ["all", ["==", "class", "pier"], ["==", "$type", "Polygon"]], + filter: [ + "all", + ["==", ["get", "class"], "pier"], + ["==", ["geometry-type"], "Polygon"], + ], paint: { "fill-color": backgroundColor, }, @@ -36,7 +40,11 @@ export const pierLine = { type: "line", source: "openmaptiles", "source-layer": "transportation", - filter: ["all", ["==", "class", "pier"], ["==", "$type", "LineString"]], + filter: [ + "all", + ["==", ["get", "class"], "pier"], + ["==", ["geometry-type"], "LineString"], + ], paint: { "line-color": backgroundColor, "line-width": { diff --git a/src/layer/boundary.js b/src/layer/boundary.js index d9ee5739a..b9dd9b0bf 100644 --- a/src/layer/boundary.js +++ b/src/layer/boundary.js @@ -13,9 +13,9 @@ export const city = { }, filter: [ "all", - ["==", "admin_level", 8], - ["==", "disputed", 0], - ["==", "maritime", 0], + ["==", ["get", "admin_level"], 8], + ["==", ["get", "disputed"], 0], + ["==", ["get", "maritime"], 0], ], minzoom: 11, layout: { @@ -41,9 +41,9 @@ export const countyCasing = { }, filter: [ "all", - ["==", "admin_level", 6], - ["==", "disputed", 0], - ["==", "maritime", 0], + ["==", ["get", "admin_level"], 6], + ["==", ["get", "disputed"], 0], + ["==", ["get", "maritime"], 0], ], minzoom: 11, layout: { @@ -65,9 +65,9 @@ export const county = { }, filter: [ "all", - ["==", "admin_level", 6], - ["==", "disputed", 0], - ["==", "maritime", 0], + ["==", ["get", "admin_level"], 6], + ["==", ["get", "disputed"], 0], + ["==", ["get", "maritime"], 0], ], minzoom: 9, layout: { @@ -99,7 +99,11 @@ export const stateCasing = { ], }, }, - filter: ["all", ["in", "admin_level", 3, 4], ["==", "maritime", 0]], + filter: [ + "all", + ["in", ["get", "admin_level"], ["literal", [3, 4]]], + ["==", ["get", "maritime"], 0], + ], minzoom: 3, layout: { "line-join": "round", @@ -137,7 +141,11 @@ export const state = { }, "line-offset": 0, }, - filter: ["all", ["in", "admin_level", 3, 4], ["==", "maritime", 0]], + filter: [ + "all", + ["in", ["get", "admin_level"], ["literal", [3, 4]]], + ["==", ["get", "maritime"], 0], + ], minzoom: 3, layout: { "line-join": "round", @@ -175,7 +183,11 @@ export const countryCasing = { ], }, }, - filter: ["all", ["in", "admin_level", 2], ["==", "maritime", 0]], + filter: [ + "all", + ["==", ["get", "admin_level"], 2], + ["==", ["get", "maritime"], 0], + ], minzoom: 2, layout: { "line-cap": "round", @@ -219,9 +231,9 @@ export const country = { }, filter: [ "all", - ["in", "admin_level", 2], - ["==", "disputed", 0], - ["==", "maritime", 0], + ["==", ["get", "admin_level"], 2], + ["==", ["get", "disputed"], 0], + ["==", ["get", "maritime"], 0], ], maxzoom: 24, layout: { diff --git a/src/layer/ferry.js b/src/layer/ferry.js index 1e4e43403..2951f1d02 100644 --- a/src/layer/ferry.js +++ b/src/layer/ferry.js @@ -11,7 +11,11 @@ export const ferry = { "line-dasharray": [7, 5], "line-width": 1.5, }, - filter: ["any", ["==", "class", "ferry"], ["==", "subclass", "ferry"]], + filter: [ + "any", + ["==", ["get", "class"], "ferry"], + ["==", ["get", "subclass"], "ferry"], + ], layout: { visibility: "visible", }, diff --git a/src/layer/highway_exit.js b/src/layer/highway_exit.js index a26d46026..fe444e0c1 100644 --- a/src/layer/highway_exit.js +++ b/src/layer/highway_exit.js @@ -1,7 +1,11 @@ export const exits = { id: "highway_exit", type: "symbol", - filter: ["all", ["==", "subclass", "junction"], ["!=", "ref", ""]], + filter: [ + "all", + ["==", ["get", "subclass"], "junction"], + ["!=", ["get", "ref"], ""], + ], source: "openmaptiles", "source-layer": "transportation_name", minzoom: 14, diff --git a/src/layer/oneway.js b/src/layer/oneway.js index ed1b598f0..ea8438bf9 100644 --- a/src/layer/oneway.js +++ b/src/layer/oneway.js @@ -8,19 +8,24 @@ export const road = { }, filter: [ "all", - ["==", "oneway", 1], - ["!in", "brunnel", "bridge", "tunnel"], - ["!=", "ramp", 1], + ["==", ["get", "oneway"], 1], + ["!", ["in", ["get", "brunnel"], ["literal", ["bridge", "tunnel"]]]], + ["!=", ["get", "ramp"], 1], [ "in", - "class", - "motorway", - // "trunk", - // "primary", - // "secondary", - // "tertiary", - // "minor", - // "service", + ["get", "class"], + [ + "literal", + [ + "motorway", + // "trunk", + // "primary", + // "secondary", + // "tertiary", + // "minor", + // "service", + ], + ], ], ], layout: { @@ -50,19 +55,24 @@ export const tunnel = { }, filter: [ "all", - ["==", "oneway", 1], - ["==", "brunnel", "tunnel"], - ["!=", "ramp", 1], + ["==", ["get", "oneway"], 1], + ["==", ["get", "brunnel"], "tunnel"], + ["!=", ["get", "ramp"], 1], [ "in", - "class", - "motorway", - // "trunk", - // "primary", - // "secondary", - // "tertiary", - // "minor", - // "service", + ["get", "class"], + [ + "literal", + [ + "motorway", + // "trunk", + // "primary", + // "secondary", + // "tertiary", + // "minor", + // "service", + ], + ], ], ], layout: { @@ -93,19 +103,24 @@ export const bridge = { }, filter: [ "all", - ["==", "oneway", 1], - ["==", "brunnel", "bridge"], - ["!=", "ramp", 1], + ["==", ["get", "oneway"], 1], + ["==", ["get", "brunnel"], "bridge"], + ["!=", ["get", "ramp"], 1], [ "in", - "class", - "motorway", - // "trunk", - // "primary", - // "secondary", - // "tertiary", - // "minor", - // "service", + ["get", "class"], + [ + "literal", + [ + "motorway", + // "trunk", + // "primary", + // "secondary", + // "tertiary", + // "minor", + // "service", + ], + ], ], ], layout: { @@ -135,19 +150,24 @@ export const link = { }, filter: [ "all", - ["==", "oneway", 1], - ["!in", "brunnel", "bridge", "tunnel"], - ["==", "ramp", 1], + ["==", ["get", "oneway"], 1], + ["!", ["in", ["get", "brunnel"], ["literal", ["bridge", "tunnel"]]]], + ["==", ["get", "ramp"], 1], [ "in", - "class", - "motorway", - // "trunk", - // "primary", - // "secondary", - // "tertiary", - // "minor", - // "service", + ["get", "class"], + [ + "literal", + [ + "motorway", + // "trunk", + // "primary", + // "secondary", + // "tertiary", + // "minor", + // "service", + ], + ], ], ], layout: { @@ -177,19 +197,24 @@ export const tunnelLink = { }, filter: [ "all", - ["==", "oneway", 1], - ["==", "brunnel", "tunnel"], - ["==", "ramp", 1], + ["==", ["get", "oneway"], 1], + ["==", ["get", "brunnel"], "tunnel"], + ["==", ["get", "ramp"], 1], [ "in", - "class", - "motorway", - // "trunk", - // "primary", - // "secondary", - // "tertiary", - // "minor", - // "service", + ["get", "class"], + [ + "literal", + [ + "motorway", + // "trunk", + // "primary", + // "secondary", + // "tertiary", + // "minor", + // "service", + ], + ], ], ], layout: { @@ -220,19 +245,24 @@ export const bridgeLink = { }, filter: [ "all", - ["==", "oneway", 1], - ["==", "brunnel", "bridge"], - ["==", "ramp", 1], + ["==", ["get", "oneway"], 1], + ["==", ["get", "brunnel"], "bridge"], + ["==", ["get", "ramp"], 1], [ "in", - "class", - "motorway", - // "trunk", - // "primary", - // "secondary", - // "tertiary", - // "minor", - // "service", + ["get", "class"], + [ + "literal", + [ + "motorway", + // "trunk", + // "primary", + // "secondary", + // "tertiary", + // "minor", + // "service", + ], + ], ], ], layout: { diff --git a/src/layer/park.js b/src/layer/park.js index a2bea3004..0e53e70ae 100644 --- a/src/layer/park.js +++ b/src/layer/park.js @@ -63,7 +63,7 @@ export const label = { export const parkFill = { id: "park-fill", type: "fill", - filter: ["==", "subclass", "park"], + filter: ["==", ["get", "subclass"], "park"], paint: { "fill-color": Color.parkFill, }, @@ -78,7 +78,7 @@ export const parkFill = { export const parkOutline = { id: "park-outline", type: "line", - filter: ["==", "subclass", "park"], + filter: ["==", ["get", "subclass"], "park"], paint: { "line-color": Color.parkOutline, }, @@ -93,7 +93,7 @@ export const parkOutline = { export const parkLabel = { id: "park-label", type: "symbol", - filter: ["==", "class", "park"], + filter: ["==", ["get", "class"], "park"], paint: { "text-color": Color.parkLabel, "text-halo-blur": 1, diff --git a/src/layer/place.js b/src/layer/place.js index 0669d8899..57bb566ab 100644 --- a/src/layer/place.js +++ b/src/layer/place.js @@ -211,7 +211,7 @@ export const state = { "text-halo-width": 2, "text-halo-blur": 0.5, }, - filter: ["all", ["==", "class", "state"]], + filter: ["==", ["get", "class"], "state"], layout: { "text-font": ["Metropolis Regular"], "text-size": { @@ -251,7 +251,11 @@ export const countryOther = { "text-halo-color": "rgba(255,255,255,0.8)", "text-halo-width": 2.0, }, - filter: ["all", ["==", "class", "country"], ["!has", "iso_a2"]], + filter: [ + "all", + ["==", ["get", "class"], "country"], + ["!", ["has", "iso_a2"]], + ], layout: { "text-font": ["Metropolis Regular"], "text-size": { @@ -278,8 +282,8 @@ export const country3 = { }, filter: [ "all", - [">=", "rank", 3], - ["==", "class", "country"], + [">=", ["get", "rank"], 3], + ["==", ["get", "class"], "country"], ["has", "iso_a2"], ], layout: { @@ -308,8 +312,8 @@ export const country2 = { }, filter: [ "all", - ["==", "rank", 2], - ["==", "class", "country"], + ["==", ["get", "rank"], 2], + ["==", ["get", "class"], "country"], ["has", "iso_a2"], ], layout: { @@ -338,8 +342,8 @@ export const country1 = { }, filter: [ "all", - ["==", "rank", 1], - ["==", "class", "country"], + ["==", ["get", "rank"], 1], + ["==", ["get", "class"], "country"], ["has", "iso_a2"], ], layout: { @@ -373,7 +377,7 @@ export const continent = { "text-halo-color": "rgba(255,255,255,0.7)", "text-halo-width": 1, }, - filter: ["all", ["==", "class", "continent"]], + filter: ["==", ["get", "class"], "continent"], layout: { "text-font": ["Metropolis Light"], "text-size": 13, diff --git a/src/layer/rail.js b/src/layer/rail.js index c4aa0e149..1f4fd3827 100644 --- a/src/layer/rail.js +++ b/src/layer/rail.js @@ -43,9 +43,9 @@ function filterRail(brunnel) { return [ "all", brunnel === "surface" - ? ["!in", "brunnel", "bridge", "tunnel"] - : ["==", "brunnel", brunnel], - ["in", "class", "rail", "transit"], + ? ["match", ["get", "brunnel"], ["bridge", "tunnel"], false, true] + : ["match", ["get", "brunnel"], brunnel, true, false], + ["in", ["get", "class"], ["literal", ["rail", "transit"]]], ]; } @@ -57,8 +57,8 @@ var defRail = { }; var serviceSelector = ["match", ["get", "service"], ["siding", "spur", "yard"]]; -var isService = ["in", "service", "siding", "spur", "yard"]; -var isNotService = ["!in", "service", "siding", "spur", "yard"]; +var isService = [...serviceSelector, true, false]; +var isNotService = [...serviceSelector, false, true]; var lineColor = [ "match", @@ -108,8 +108,8 @@ export const bridgeCasing = { id: "railway-bridge-casing", filter: [ "all", - ["==", "brunnel", "bridge"], - ["in", "class", "rail", "transit"], + ["==", ["get", "brunnel"], "bridge"], + ["in", ["get", "class"], ["literal", ["rail", "transit"]]], ], minzoom: 13, layout: { @@ -200,7 +200,7 @@ class Railway { if (this.constraints != null) { layer.filter.push(this.constraints); } - layer.filter.push(["!=", "service", "crossover"]); + layer.filter.push(["!=", ["get", "service"], "crossover"]); return layer; }; } @@ -226,7 +226,7 @@ class Rail extends Railway { super(); this.constraints = [ "all", - ["in", "subclass", "rail", "preserved"], + ["in", ["get", "subclass"], ["literal", ["rail", "preserved"]]], isNotService, ]; this.brunnel = "surface"; @@ -241,7 +241,7 @@ class RailService extends Rail { super(); this.constraints = [ "all", - ["in", "subclass", "rail", "preserved"], + ["in", ["get", "subclass"], ["literal", ["rail", "preserved"]]], isService, ]; @@ -255,7 +255,7 @@ class NarrowGauge extends Rail { super(); this.constraints = [ "all", - ["==", "subclass", "narrow_gauge"], + ["==", ["get", "subclass"], "narrow_gauge"], isNotService, ]; @@ -267,7 +267,11 @@ class NarrowGauge extends Rail { class NarrowGaugeService extends NarrowGauge { constructor() { super(); - this.constraints = ["all", ["==", "subclass", "narrow_gauge"], isService]; + this.constraints = [ + "all", + ["==", ["get", "subclass"], "narrow_gauge"], + isService, + ]; this.dashWidthFactor = 3; this.dashArray = [1, 2, 1, 30]; @@ -279,7 +283,7 @@ class LightRailTram extends Railway { super(); this.constraints = [ "all", - ["in", "subclass", "light_rail", "tram"], + ["in", ["get", "subclass"], ["literal", ["light_rail", "tram"]]], isNotService, ]; this.brunnel = "surface"; @@ -295,7 +299,7 @@ class LightRailTramService extends LightRailTram { super(); this.constraints = [ "all", - ["in", "subclass", "light_rail", "tram"], + ["in", ["get", "subclass"], ["literal", ["light_rail", "tram"]]], isService, ]; @@ -307,7 +311,7 @@ class LightRailTramService extends LightRailTram { class Funicular extends Railway { constructor() { super(); - this.constraints = ["==", "subclass", "funicular"]; + this.constraints = ["==", ["get", "subclass"], "funicular"]; this.brunnel = "surface"; this.minZoom = 14; diff --git a/src/layer/road.js b/src/layer/road.js index 5b3c649ef..0c2469af5 100644 --- a/src/layer/road.js +++ b/src/layer/road.js @@ -3,16 +3,25 @@ import * as Util from "../js/util.js"; //At this zoom, render switches from unified to differentiated bridge/tunnel rendering -let minzoomBrunnel = 11; +const minzoomBrunnel = 11; + +const minZoomAllRoads = 4; +const minZoomMotorwayTrunk = 5; +const minZoomPrimary = 7; +const minZoomSecondary = 9; +const minZoomTertiary = 11; +const minZoomMinor = 12; +const minZoomService = 13; +const minZoomSmallService = 15; //Exponent base for inter-zoom interpolation -let roadExp = 1.2; +const roadExp = 1.2; -let roadHue = 0; -let tollRoadHue = 48; +const roadHue = 0; +const tollRoadHue = 48; //Tunnel casing dash pattern -let tunDashArray = [ +const tunDashArray = [ "step", ["zoom"], ["literal", [1]], @@ -20,89 +29,121 @@ let tunDashArray = [ ["literal", [0.5, 0.25]], ]; -let layerSortKey = ["coalesce", ["get", "toll"], 0]; - -//Join styles for fill and casing -let layoutRoadFill = { - "line-cap": "round", - "line-join": "round", - visibility: "visible", - "line-sort-key": layerSortKey, -}; -let layoutRoadCase = { - "line-cap": "round", - "line-join": "round", - visibility: "visible", - "line-sort-key": layerSortKey, -}; -let layoutBridgeCase = { - "line-cap": "butt", - "line-join": "bevel", - visibility: "visible", - "line-sort-key": layerSortKey, -}; -let layoutRoadSurface = { - "line-cap": "butt", - "line-join": "round", - visibility: "visible", - "line-sort-key": layerSortKey, -}; - -let tollRoadSelector = ["match", ["get", "toll"], 1]; - -/* - Road style generation helper functions -*/ +const getBrunnel = ["get", "brunnel"]; +const getClass = ["get", "class"]; +const getExpressway = ["coalesce", ["get", "expressway"], 0]; +const getRamp = ["coalesce", ["get", "ramp"], 0]; +const getToll = ["coalesce", ["get", "toll"], 0]; + +// Common filter expressions +const classSelector = ["match", getClass]; +const tollSelector = ["match", getToll, 1]; +const isToll = ["==", getToll, 1]; +const isNotToll = ["!=", getToll, 1]; +const isLink = ["==", getRamp, 1]; +const isNotLink = ["!=", getRamp, 1]; +const linkSelector = ["match", getRamp, 1]; +const isExpressway = ["==", getExpressway, 1]; +const isNotExpressway = ["!=", getExpressway, 1]; +const expresswaySelector = ["match", getExpressway, 1]; +const smallServiceSelector = [ + "match", + ["get", "service"], + ["parking_aisle", "driveway"], +]; -function roadPaint(color, width) { - return { - "line-color": color, - "line-width": { - base: roadExp, - stops: width, - }, - "line-blur": 0.5, - }; +function combineConstraints(constraint1, constraint2) { + if (constraint1 == null) { + if (constraint2 == null) { + return null; + } + return constraint2; + } + if (constraint2 == null) { + return constraint1; + } + return ["all", constraint1, constraint2]; } -function tunnelCasePaint(color, width) { - return { - "line-color": color, - "line-width": { - base: roadExp, - stops: width, - }, - "line-opacity": 1, - "line-dasharray": tunDashArray, - }; -} +const opacity = [ + "step", + ["zoom"], + [...linkSelector, 0, ["match", ["get", "network"], "us-interstate", 1, 0]], + minZoomMotorwayTrunk, + [...linkSelector, 0, [...classSelector, ["motorway", "trunk"], 1, 0]], + minZoomPrimary, + [...classSelector, ["motorway", "trunk", "primary"], 1, 0], + minZoomSecondary, + [...classSelector, ["motorway", "trunk", "primary", "secondary"], 1, 0], + minZoomTertiary, + [ + ...classSelector, + ["motorway", "trunk", "primary", "secondary", "tertiary"], + 1, + 0, + ], + minZoomMinor, + [...classSelector, "service", 0, 1], + minZoomService, + [...classSelector, "service", [...smallServiceSelector, 0, 1], 1], + minZoomSmallService, + 1, +]; -function roadSurfacePaint(color, width) { - return { - "line-dasharray": [4, 4], - "line-color": color, - "line-width": { - base: roadExp, - stops: width, - }, - "line-blur": 0.5, - }; -} +const layerSortKey = [ + "+", + ["*", -28, getRamp], + [ + "*", + 4, + [ + ...classSelector, + "motorway", + 6, + "trunk", + 5, + "primary", + 4, + "secondary", + 3, + "tertiary", + 2, + "minor", + 1, + 0, + ], + ], + ["*", 2, getExpressway], + getToll, +]; //Helper function to create a "filter" block for a particular road class. -function filterRoad(roadClass, ramp, brunnel) { - let brunnelFilter = - brunnel === "ignore" - ? [] - : brunnel === "surface" - ? [["!in", "brunnel", "bridge", "tunnel"]] - : [["==", "brunnel", brunnel]]; - return [ - "all", - ...brunnelFilter, - ["==", "class", roadClass], - [ramp ? "==" : "!=", "ramp", 1], +function filterRoad(brunnel, constraints) { + var baseFilter = [ + "in", + getClass, + [ + "literal", + [ + "motorway", + "trunk", + "primary", + "secondary", + "tertiary", + "minor", + "service", + ], + ], ]; + baseFilter = combineConstraints(baseFilter, constraints); + if (brunnel == null) { + return baseFilter; + } + let brunnelFilter = + brunnel === "surface" + ? ["!", ["in", getBrunnel, ["literal", ["bridge", "tunnel"]]]] + : ["==", getBrunnel, brunnel]; + return combineConstraints(baseFilter, brunnelFilter); } //Base definition that applies to all roads (fill and casing). @@ -113,8 +154,11 @@ var defRoad = { }; //Generate a unique layer ID -function uniqueLayerID(hwyClass, link, part, brunnel, constraints) { - var layerID = [hwyClass, link ? "link" : "road", part, brunnel].join("_"); +function uniqueLayerID(part, brunnel, constraints) { + var layerID = ["road", part].join("_"); + if (brunnel != null) { + layerID += "_" + brunnel; + } if (constraints != null) { layerID += "_" + constraints.join("_").replaceAll("=", "").replaceAll("-", "_"); @@ -122,20 +166,12 @@ function uniqueLayerID(hwyClass, link, part, brunnel, constraints) { return layerID; } -function baseRoadLayer( - highwayClass, - id, - brunnel, - minzoom, - maxzoom, - link, - constraints -) { - var layer = Util.layerClone( - defRoad, - uniqueLayerID(highwayClass, link, id, brunnel, constraints) - ); - layer.filter = filterRoad(highwayClass, link, brunnel); +function baseRoadLayer(id, brunnel, minzoom, maxzoom, constraints) { + var layer = Util.layerClone(defRoad, uniqueLayerID(id, brunnel, constraints)); + var roadFilter = filterRoad(brunnel, constraints); + if (roadFilter != null) { + layer.filter = roadFilter; + } layer.minzoom = minzoom; if (maxzoom) { layer.maxzoom = maxzoom; @@ -143,106 +179,426 @@ function baseRoadLayer( return layer; } +const widthFactor = [ + ...classSelector, + ["motorway", "trunk"], + [...linkSelector, 0.5, 1], + "primary", + [...linkSelector, 0.45, 0.9], + "secondary", + [...linkSelector, 0.3, [...expresswaySelector, 0.7, 0.6]], + "tertiary", + [...linkSelector, 0.25, 0.5], + "minor", + 0.3, + "service", + [...smallServiceSelector, 0.15, 0.2], + 0.2, +]; + +const roadFillWidth = [ + 4, + ["*", 0.5, widthFactor], + 9, + widthFactor, + 12, + [ + "*", + [...classSelector, "motorway", 3.2, [...expresswaySelector, 3.5, 4]], + widthFactor, + ], + 20, + ["*", [...expresswaySelector, 16, 18], widthFactor], +]; + +const roadCasingWidth = [ + 4, + ["*", [...classSelector, "motorway", 1.5, 0.5], widthFactor], + 9, + [ + "*", + [...classSelector, "motorway", 3, [...expresswaySelector, 3, 1.2]], + widthFactor, + ], + 12, + [ + "*", + [...classSelector, "motorway", 5, [...expresswaySelector, 7, 5]], + widthFactor, + ], + 20, + ["*", [...expresswaySelector, 28, 22], widthFactor], +]; + +const roadCasingColorTunnel = [ + "match", + getBrunnel, + "tunnel", + [ + ...classSelector, + ["motorway", "trunk"], + [ + ...tollSelector, + [ + ...expresswaySelector, + `hsl(${tollRoadHue}, 41%, 85%)`, + `hsl(${tollRoadHue}, 41%, 80%)`, + ], + `hsl(${roadHue}, 41%, 80%)`, + ], + ["primary", "secondary", "tertiary"], + "hsl(0, 0%, 80%)", + "hsl(0, 0%, 90%)", + ], +]; + +const roadCasingColorTrunkExpressway = [ + ...classSelector, + "trunk", + [ + ...tollSelector, + `hsl(${tollRoadHue}, 77%, 50%)`, + `hsl(${roadHue}, 77%, 50%)`, + ], +]; + +const roadCasingColor = [ + "step", + ["zoom"], + [ + ...roadCasingColorTunnel, + [...roadCasingColorTrunkExpressway, `hsl(0, 0%, 90%)`], + ], + 15, + [ + ...roadCasingColorTunnel, + [...roadCasingColorTrunkExpressway, `hsl(0, 0%, 23%)`], + ], +]; + +const roadFillColorTunnel = [ + "match", + getBrunnel, + "tunnel", + [ + ...classSelector, + "motorway", + [ + ...tollSelector, + `hsl(${tollRoadHue}, 71%, 90%)`, + `hsl(${roadHue}, 71%, 90%)`, + ], + "trunk", + [ + ...tollSelector, + `hsl(${tollRoadHue}, 77%, 90%)`, + `hsl(${roadHue}, 77%, 90%)`, + ], + [ + ...tollSelector, + `hsl(${tollRoadHue}, 100%, 95%)`, + `hsl(${roadHue}, 0%, 95%)`, + ], + ], +]; + +const highwayFillColor = [ + ...roadFillColorTunnel, + [ + ...classSelector, + "trunk", + [ + ...expresswaySelector, + [ + ...tollSelector, + `hsl(${tollRoadHue}, 95%, 95%)`, + `hsl(${roadHue}, 95%, 95%)`, + ], + [ + ...tollSelector, + `hsl(${tollRoadHue}, 77%, 50%)`, + `hsl(${roadHue}, 77%, 50%)`, + ], + ], + [ + ...tollSelector, + `hsl(${tollRoadHue}, 100%, 75%)`, + `hsl(${roadHue}, 100%, 100%)`, + ], + ], +]; + +const roadSurfaceColor = [ + ...classSelector, + "motorway", + [ + ...tollSelector, + `hsl(${tollRoadHue}, 50%, 70%)`, + `hsl(${roadHue}, 50%, 70%)`, + ], + "trunk", + [ + ...tollSelector, + `hsl(${tollRoadHue}, 95%, 80%)`, + `hsl(${roadHue}, 95%, 80%)`, + ], + [ + ...tollSelector, + `hsl(${tollRoadHue}, 100%, 40%)`, + `hsl(${roadHue}, 0%, 80%)`, + ], +]; + +function roadFillColor(hue, minZoom, transitionZoom) { + let transitionStop = transitionZoom + ? [transitionZoom, `hsl(${hue}, 0%, 23%)`] + : []; + return [ + "interpolate", + ["exponential", roadExp], + ["zoom"], + minZoom, + `hsl(${hue}, 0%, 75%)`, + ...transitionStop, + 14.9999, + `hsl(${hue}, 0%, 23%)`, + 15, + `hsl(${hue}, 100%, 100%)`, + ]; +} + +function tollRoadFillColor(hue, minZoom, transitionZoom) { + let transitionStop = transitionZoom + ? [transitionZoom, `hsl(${hue}, 100%, 40%)`] + : []; + return [ + "interpolate", + ["exponential", roadExp], + ["zoom"], + minZoom, + `hsl(${hue}, 100%, 75%)`, + ...transitionStop, + 14.9999, + `hsl(${hue}, 100%, 40%)`, + 15, + `hsl(${hue}, 100%, 75%)`, + ]; +} + +function expresswayCasingColor(minZoom, transitionZoom) { + return [ + "interpolate", + ["exponential", roadExp], + ["zoom"], + minZoom, + `hsl(0, 0%, 75%)`, + transitionZoom, + `hsl(0, 0%, 23%)`, + ]; +} + //Base road class class Road { + constructor() { + this.brunnel = "surface"; + this.minZoomFill = 4; + this.minZoomCasing = 4; + this.casingColor = roadCasingColor; + this.fillColor = highwayFillColor; + } fill = function () { var layer = baseRoadLayer( - this.highwayClass, "fill", this.brunnel, this.minZoomFill, this.maxZoomFill, - this.link, this.constraints ); - layer.layout = layoutRoadFill; - layer.paint = roadPaint(this.fillColor, this.fillWidth); - if (this.constraints != null) { - layer.filter.push(this.constraints); - } + layer.layout = { + "line-cap": "round", + "line-join": "round", + visibility: "visible", + "line-sort-key": layerSortKey, + }; + layer.paint = { + "line-opacity": opacity, + "line-color": this.fillColor, + "line-width": [ + "interpolate", + ["exponential", roadExp], + ["zoom"], + ...roadFillWidth, + ], + "line-blur": 0.5, + }; return layer; }; casing = function () { var layer = baseRoadLayer( - this.highwayClass, "casing", this.brunnel, this.minZoomCasing, this.maxZoomCasing, - this.link, this.constraints ); - layer.layout = layoutRoadCase; - if (this.brunnel === "bridge") { - layer.layout = layoutBridgeCase; - } + layer.layout = { + "line-cap": this.brunnel === "bridge" ? "butt" : "round", + "line-join": this.brunnel === "bridge" ? "bevel" : "round", + visibility: "visible", + "line-sort-key": layerSortKey, + }; + layer.paint = { + "line-opacity": opacity, + "line-color": this.casingColor, + "line-width": [ + "interpolate", + ["exponential", roadExp], + ["zoom"], + ...roadCasingWidth, + ], + }; if (this.brunnel === "tunnel") { - layer.paint = tunnelCasePaint(this.casingColor, this.casingWidth); + layer.paint["line-dasharray"] = tunDashArray; } else { - layer.paint = roadPaint(this.casingColor, this.casingWidth); - } - if (this.constraints != null) { - layer.filter.push(this.constraints); + layer.paint["line-blur"] = 0.5; } return layer; }; surface = function () { var layer = baseRoadLayer( - this.highwayClass, "surface", this.brunnel, Math.min(this.minZoomCasing, this.minZoomFill), Math.max(this.maxZoomCasing, this.maxZoomFill), - this.link, this.constraints ); - layer.filter.push(["==", "surface", "unpaved"]); - if (this.constraints != null) { - layer.filter.push(this.constraints); - } - layer.layout = layoutRoadSurface; - layer.paint = roadSurfacePaint(this.surfaceColor, this.fillWidth); + layer.filter = combineConstraints(layer.filter, [ + "==", + ["get", "surface"], + "unpaved", + ]); + layer.layout = { + "line-cap": "butt", + "line-join": "round", + visibility: "visible", + "line-sort-key": layerSortKey, + }; + layer.paint = { + "line-opacity": opacity, + "line-dasharray": [4, 4], + "line-color": roadSurfaceColor, + "line-width": [ + "interpolate", + ["exponential", roadExp], + ["zoom"], + ...roadFillWidth, + ], + "line-blur": 0.5, + }; return layer; }; } -//Highway class styles -function motorwayCasingColor(tollHue, hue) { - return [ - "interpolate", - ["exponential", roadExp], - ["zoom"], - 4, - [...tollRoadSelector, `hsl(${tollHue}, 10%, 85%)`, `hsl(${hue}, 10%, 85%)`], - 6, - [...tollRoadSelector, `hsl(${tollHue}, 60%, 50%)`, `hsl(${hue}, 60%, 50%)`], - minzoomBrunnel - 0.5, - [...tollRoadSelector, `hsl(${tollHue}, 71%, 40%)`, `hsl(${hue}, 71%, 40%)`], - 14, - [...tollRoadSelector, `hsl(${tollHue}, 51%, 9%)`, `hsl(${hue}, 51%, 9%)`], - ]; +class RoadSimpleCasing extends Road { + constructor() { + super(); + this.constraints = [ + "any", + [ + "all", + ["!", ["in", getClass, ["literal", ["motorway", "trunk"]]]], + isNotExpressway, + isNotLink, + ], + ["all", ["==", getClass, "trunk"], isExpressway], + ]; + } } -class Motorway extends Road { +class RoadLinkSimpleCasing extends Road { constructor() { super(); - this.highwayClass = "motorway"; - this.brunnel = "surface"; - this.link = false; - - this.minZoomFill = 5; - this.minZoomCasing = 5; - - this.fillWidth = [ - [4, 0.5], - [9, 1], - [20, 18], + this.constraints = [ + "all", + ["!", ["in", getClass, ["literal", ["motorway", "trunk"]]]], + isNotExpressway, + isLink, ]; - this.casingWidth = [ - [4, 1.5], - [9, 3], - [20, 22], + } +} + +class RoadSimpleFill extends Road { + constructor() { + super(); + this.constraints = [ + "any", + ["all", ["==", getClass, "trunk"], isNotLink], + [ + "all", + ["in", getClass, ["literal", ["primary", "secondary", "tertiary"]]], + isExpressway, + ], ]; + } +} + +class RoadLinkSimpleFill extends Road { + constructor() { + super(); + this.constraints = ["all", ["==", getClass, "trunk"], isLink]; + } +} + +class RoadBridge extends Road { + constructor() { + super(); + this.brunnel = "bridge"; + } +} + +class RoadSimpleCasingBridge extends RoadSimpleCasing { + constructor() { + super(); + this.brunnel = "bridge"; + } +} + +class RoadLinkSimpleCasingBridge extends RoadLinkSimpleCasing { + constructor() { + super(); + this.brunnel = "bridge"; + } +} + +class RoadSimpleFillBridge extends RoadSimpleFill { + constructor() { + super(); + this.brunnel = "bridge"; + } +} + +class RoadLinkSimpleFillBridge extends RoadLinkSimpleFill { + constructor() { + super(); + this.brunnel = "bridge"; + } +} + +class RoadTunnel extends Road { + constructor() { + super(); + this.brunnel = "tunnel"; + } +} + +//Highway class styles +class Motorway extends Road { + constructor() { + super(); + this.constraints = ["all", ["==", getClass, "motorway"], isNotLink]; + + this.minZoomFill = minZoomAllRoads; + this.minZoomCasing = minZoomAllRoads; this.fillColor = [ "interpolate", @@ -250,676 +606,369 @@ class Motorway extends Road { ["zoom"], 4, [ - ...tollRoadSelector, + ...tollSelector, `hsl(${tollRoadHue}, 70%, 76%)`, `hsl(${roadHue}, 70%, 76%)`, ], 6, [ - ...tollRoadSelector, + ...tollSelector, `hsl(${tollRoadHue}, 70%, 66%)`, `hsl(${roadHue}, 70%, 66%)`, ], minzoomBrunnel - 0.5, [ - ...tollRoadSelector, + ...tollSelector, `hsl(${tollRoadHue}, 70%, 60%)`, `hsl(${roadHue}, 70%, 60%)`, ], 14, [ - ...tollRoadSelector, + ...tollSelector, `hsl(${tollRoadHue}, 71%, 45%)`, `hsl(${roadHue}, 71%, 35%)`, ], ]; - this.casingColor = motorwayCasingColor(tollRoadHue, roadHue); - this.surfaceColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 50%, 70%)`, - `hsl(${roadHue}, 50%, 70%)`, + this.casingColor = [ + "interpolate", + ["exponential", roadExp], + ["zoom"], + 4, + [ + ...tollSelector, + `hsl(${tollRoadHue}, 10%, 85%)`, + `hsl(${roadHue}, 10%, 85%)`, + ], + 6, + [ + ...tollSelector, + `hsl(${tollRoadHue}, 60%, 50%)`, + `hsl(${roadHue}, 60%, 50%)`, + ], + minzoomBrunnel - 0.5, + [ + ...tollSelector, + `hsl(${tollRoadHue}, 71%, 40%)`, + `hsl(${roadHue}, 71%, 40%)`, + ], + 14, + [ + ...tollSelector, + `hsl(${tollRoadHue}, 51%, 9%)`, + `hsl(${roadHue}, 51%, 9%)`, + ], ]; } } -class InterstateMotorway extends Motorway { - constructor() { - super(); - this.brunnel = "ignore"; - - this.minZoomFill = 4; - this.minZoomCasing = 4; - this.maxZoomFill = 5; - this.maxZoomCasing = 5; - - this.constraints = ["==", "network", "us-interstate"]; - } -} - -let trunkFillWidth = [ - [4, 0.5], - [9, 1], - [12, 4], - [20, 18], -]; -let trunkCasingWidth = [ - [4, 0.5], - [9, 1.2], - [12, 5], - [20, 22], -]; -function trunkCasingColor(tollHue, hue) { - return [ - "interpolate", - ["exponential", roadExp], - ["zoom"], - 5, - [...tollRoadSelector, `hsl(${tollHue}, 77%, 50%)`, `hsl(${hue}, 77%, 50%)`], - 9, - [...tollRoadSelector, `hsl(${tollHue}, 77%, 50%)`, `hsl(${hue}, 77%, 50%)`], - 15, - [...tollRoadSelector, `hsl(${tollHue}, 70%, 18%)`, `hsl(${hue}, 70%, 18%)`], - ]; -} - class Trunk extends Road { constructor() { super(); - this.highwayClass = "trunk"; - this.brunnel = "surface"; - this.link = false; - - this.minZoomFill = 5; - this.minZoomCasing = 5; - - this.fillWidth = trunkFillWidth; - this.casingWidth = trunkCasingWidth; - - this.fillColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 77%, 50%)`, - `hsl(${roadHue}, 77%, 50%)`, - ]; - this.casingColor = trunkCasingColor(tollRoadHue, roadHue); - this.surfaceColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 95%, 80%)`, - `hsl(${roadHue}, 95%, 80%)`, + this.constraints = [ + "all", + ["==", getClass, "trunk"], + isNotLink, + isNotExpressway, ]; - this.constraints = ["!=", "expressway", 1]; - } -} - -let trunkExpresswayFillWidth = [ - [7, 0.8], - [9, 1], - [12, 3.5], - [20, 16], -]; -let trunkExpresswayCasingWidth = [ - [7, 1.5], - [9, 3], - [12, 7], - [20, 28], -]; - -class TrunkExpressway extends Trunk { - constructor() { - super(); - - this.minZoomFill = 5; - this.minZoomCasing = 5; - - this.fillWidth = trunkExpresswayFillWidth; - this.casingWidth = trunkExpresswayCasingWidth; + this.minZoomFill = minZoomAllRoads; + this.minZoomCasing = minZoomAllRoads; - this.fillColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 95%, 95%)`, - `hsl(${roadHue}, 95%, 95%)`, - ]; + this.fillColor = highwayFillColor; this.casingColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 77%, 50%)`, - `hsl(${roadHue}, 77%, 50%)`, + "interpolate", + ["exponential", roadExp], + ["zoom"], + 5, + [ + ...tollSelector, + `hsl(${tollRoadHue}, 77%, 50%)`, + `hsl(${roadHue}, 77%, 50%)`, + ], + 9, + [ + ...tollSelector, + `hsl(${tollRoadHue}, 77%, 50%)`, + `hsl(${roadHue}, 77%, 50%)`, + ], + 15, + [ + ...tollSelector, + `hsl(${tollRoadHue}, 70%, 18%)`, + `hsl(${roadHue}, 70%, 18%)`, + ], ]; - - this.constraints = ["==", "expressway", 1]; } } -function roadFillColor(hue, minZoom, transitionZoom) { - let transitionStop = transitionZoom - ? [transitionZoom, `hsl(${hue}, 0%, 23%)`] - : []; - return [ - "interpolate", - ["exponential", roadExp], - ["zoom"], - minZoom, - `hsl(${hue}, 0%, 75%)`, - ...transitionStop, - 14.9999, - `hsl(${hue}, 0%, 23%)`, - 15, - `hsl(${hue}, 100%, 100%)`, - ]; -} - -function tollRoadFillColor(hue, minZoom, transitionZoom) { - let transitionStop = transitionZoom - ? [transitionZoom, `hsl(${hue}, 100%, 40%)`] - : []; - return [ - "interpolate", - ["exponential", roadExp], - ["zoom"], - minZoom, - `hsl(${hue}, 100%, 75%)`, - ...transitionStop, - 14.9999, - `hsl(${hue}, 100%, 40%)`, - 15, - `hsl(${hue}, 100%, 75%)`, - ]; -} - -function roadCasingColor(hue, minZoom) { - return [ - "interpolate", - ["exponential", roadExp], - ["zoom"], - minZoom, - `hsl(${hue}, 0%, 90%)`, - 14.9999, - `hsl(${hue}, 0%, 90%)`, - 15, - `hsl(${hue}, 0%, 23%)`, - ]; -} - -function expresswayCasingColor(minZoom, transitionZoom) { - return [ - "interpolate", - ["exponential", roadExp], - ["zoom"], - minZoom, - `hsl(0, 0%, 75%)`, - transitionZoom, - `hsl(0, 0%, 23%)`, - ]; -} - class Primary extends Road { constructor() { super(); - this.highwayClass = "primary"; - this.brunnel = "surface"; - this.link = false; - - this.minZoomFill = 7; - this.minZoomCasing = 7; + this.constraints = [ + "all", + ["==", getClass, "primary"], + isNotLink, + isNotExpressway, + isNotToll, + ]; - this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.9); - this.casingWidth = Util.zoomMultiply(trunkCasingWidth, 0.9); + this.minZoomFill = minZoomPrimary; + this.minZoomCasing = minZoomPrimary; this.fillColor = roadFillColor( roadHue, this.minZoomFill, this.minZoomFill + 2 ); - this.casingColor = roadCasingColor(roadHue, this.minZoomCasing); - this.surfaceColor = `hsl(${roadHue}, 0%, 80%)`; - - this.constraints = ["all", ["!=", "toll", 1], ["!=", "expressway", 1]]; } } class PrimaryToll extends Primary { constructor() { super(); - this.constraints = ["all", ["==", "toll", 1], ["!=", "expressway", 1]]; + this.constraints = [ + "all", + ["==", getClass, "primary"], + isNotLink, + isNotExpressway, + isToll, + ]; this.fillColor = tollRoadFillColor( tollRoadHue, this.minZoomFill, this.minZoomFill + 2 ); - this.casingColor = roadCasingColor(tollRoadHue, this.minZoomCasing); - this.surfaceColor = `hsl(${tollRoadHue}, 0%, 80%)`; } } class PrimaryExpressway extends Primary { constructor() { super(); - - this.fillWidth = Util.zoomMultiply(trunkExpresswayFillWidth, 1.0); - this.casingWidth = Util.zoomMultiply(trunkExpresswayCasingWidth, 0.9); - - this.fillColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 100%, 75%)`, - `hsl(${roadHue}, 100%, 100%)`, + this.constraints = [ + "all", + ["==", getClass, "primary"], + isNotLink, + isExpressway, ]; + + this.fillColor = highwayFillColor; this.casingColor = expresswayCasingColor( this.minZoomCasing, this.minZoomCasing + 2 ); - - this.constraints = ["==", "expressway", 1]; } } class Secondary extends Road { constructor() { super(); - this.highwayClass = "secondary"; - this.brunnel = "surface"; - this.link = false; - - this.minZoomFill = 9; - this.minZoomCasing = 9; + this.constraints = [ + "all", + ["==", getClass, "secondary"], + isNotLink, + isNotExpressway, + isNotToll, + ]; - this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.6); - this.casingWidth = Util.zoomMultiply(trunkCasingWidth, 0.6); + this.minZoomFill = minZoomSecondary; + this.minZoomCasing = minZoomSecondary; this.fillColor = roadFillColor( roadHue, this.minZoomFill, this.minZoomFill + 2 ); - this.casingColor = roadCasingColor(roadHue, this.minZoomCasing); - this.surfaceColor = `hsl(${roadHue}, 0%, 80%)`; - - this.constraints = ["all", ["!=", "toll", 1], ["!=", "expressway", 1]]; } } class SecondaryToll extends Secondary { constructor() { super(); - this.constraints = ["all", ["==", "toll", 1], ["!=", "expressway", 1]]; + this.constraints = [ + "all", + ["==", getClass, "secondary"], + isNotLink, + isNotExpressway, + isToll, + ]; this.fillColor = tollRoadFillColor( tollRoadHue, this.minZoomFill, this.minZoomFill + 2 ); - this.casingColor = roadCasingColor(tollRoadHue, this.minZoomCasing); - this.surfaceColor = `hsl(${tollRoadHue}, 0%, 80%)`; } } class SecondaryExpressway extends Secondary { constructor() { super(); - - this.fillWidth = Util.zoomMultiply(trunkExpresswayFillWidth, 0.7); - this.casingWidth = Util.zoomMultiply(trunkExpresswayCasingWidth, 0.7); - - this.fillColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 100%, 75%)`, - `hsl(${roadHue}, 100%, 100%)`, + this.constraints = [ + "all", + ["==", getClass, "secondary"], + isNotLink, + isExpressway, ]; + + this.fillColor = highwayFillColor; this.casingColor = expresswayCasingColor( this.minZoomCasing, this.minZoomCasing + 2 ); - - this.constraints = ["==", "expressway", 1]; } } class Tertiary extends Road { constructor() { super(); - this.highwayClass = "tertiary"; - this.brunnel = "surface"; - this.link = false; - - this.minZoomFill = 11; - this.minZoomCasing = 11; + this.constraints = [ + "all", + ["==", getClass, "tertiary"], + isNotLink, + isNotExpressway, + isNotToll, + ]; - this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.5); - this.casingWidth = Util.zoomMultiply(trunkCasingWidth, 0.5); + this.minZoomFill = minZoomTertiary; + this.minZoomCasing = minZoomTertiary; this.fillColor = roadFillColor( roadHue, this.minZoomFill, this.minZoomFill + 2 ); - this.casingColor = roadCasingColor(roadHue, this.minZoomCasing); - this.surfaceColor = `hsl(${roadHue}, 0%, 80%)`; - - this.constraints = ["all", ["!=", "toll", 1], ["!=", "expressway", 1]]; } } class TertiaryToll extends Tertiary { constructor() { super(); - this.constraints = ["all", ["==", "toll", 1], ["!=", "expressway", 1]]; + this.constraints = [ + "all", + ["==", getClass, "tertiary"], + isNotLink, + isNotExpressway, + isToll, + ]; this.fillColor = tollRoadFillColor( tollRoadHue, this.minZoomFill, this.minZoomFill + 2 ); - this.casingColor = roadCasingColor(tollRoadHue, this.minZoomCasing); - this.surfaceColor = `hsl(${tollRoadHue}, 0%, 80%)`; } } class TertiaryExpressway extends Tertiary { constructor() { super(); - - this.fillWidth = Util.zoomMultiply(trunkExpresswayFillWidth, 0.5); - this.casingWidth = Util.zoomMultiply(trunkExpresswayCasingWidth, 0.5); - - this.fillColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 100%, 75%)`, - `hsl(${roadHue}, 100%, 100%)`, + this.constraints = [ + "all", + ["==", getClass, "tertiary"], + isNotLink, + isExpressway, ]; + + this.fillColor = highwayFillColor; this.casingColor = expresswayCasingColor( this.minZoomCasing, this.minZoomCasing + 2 ); - - this.constraints = ["==", "expressway", 1]; } } class Minor extends Road { - constructor() { - super(); - this.highwayClass = "minor"; - this.brunnel = "surface"; - this.link = false; - this.constraints = ["!=", "toll", 1]; - - this.minZoomFill = 12; - this.minZoomCasing = 12; - - this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.3); - this.casingWidth = Util.zoomMultiply(trunkCasingWidth, 0.3); - - this.fillColor = roadFillColor(roadHue, this.minZoomFill); - this.casingColor = roadCasingColor(roadHue, this.minZoomCasing); - this.surfaceColor = `hsl(${roadHue}, 0%, 80%)`; - } -} - -class MinorToll extends Minor { - constructor() { - super(); - this.constraints = ["==", "toll", 1]; - - this.fillColor = tollRoadFillColor(tollRoadHue, this.minZoomFill); - this.casingColor = roadCasingColor(tollRoadHue, this.minZoomCasing); - this.surfaceColor = `hsl(${tollRoadHue}, 0%, 80%)`; - } -} - -class Service extends Road { - constructor() { - super(); - this.highwayClass = "service"; - this.brunnel = "surface"; - this.link = false; - - this.minZoomFill = 13; - this.minZoomCasing = 13; - - this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.2); - this.casingWidth = Util.zoomMultiply(trunkCasingWidth, 0.2); - - // Fill color gets interpolated as a fade from light to dark between this - // level's introduction and next road-level introduction. - // It then switches at z15 from dark to light with the casing switching as - // well. - this.fillColor = [ - "interpolate", - ["exponential", roadExp], - ["zoom"], - 13, - `hsl(${roadHue}, 0%, 65%)`, - 14.9999, - `hsl(${roadHue}, 0%, 23%)`, - 15, - `hsl(${roadHue}, 100%, 100%)`, - ]; - this.casingColor = [ - "interpolate", - ["exponential", roadExp], - ["zoom"], - 13, - `hsl(${roadHue}, 0%, 90%)`, - 14.9999, - `hsl(${roadHue}, 0%, 90%)`, - 15, - `hsl(${roadHue}, 0%, 23%)`, - ]; - - this.surfaceColor = `hsl(${roadHue}, 0%, 80%)`; - - this.constraints = [ - "all", - ["!=", "toll", 1], - ["!in", "service", "parking_aisle", "driveway"], - ]; - } -} - -class ServiceToll extends Service { constructor() { super(); this.constraints = [ "all", - ["==", "toll", 1], - ["!in", "service", "parking_aisle", "driveway"], + ["in", getClass, ["literal", ["minor", "service"]]], + isNotToll, ]; - // Fill color gets interpolated as a fade from light to dark between this - // level's introduction and next road-level introduction. - // It then switches at z15 from dark to light with the casing switching as - // well. - this.fillColor = [ - "interpolate", - ["exponential", roadExp], - ["zoom"], - 13, - `hsl(${tollRoadHue}, 100%, 65%)`, - 14.9999, - `hsl(${tollRoadHue}, 100%, 40%)`, - 15, - `hsl(${tollRoadHue}, 100%, 50%)`, - ]; - this.casingColor = [ - "interpolate", - ["exponential", roadExp], - ["zoom"], - 13, - `hsl(${tollRoadHue}, 0%, 90%)`, - 14.9999, - `hsl(${tollRoadHue}, 0%, 90%)`, - 15, - `hsl(${tollRoadHue}, 0%, 23%)`, - ]; - - this.surfaceColor = `hsl(${tollRoadHue}, 0%, 80%)`; - } -} - -class SmallService extends Service { - constructor() { - super(); - - this.minZoomFill = 15; - this.minZoomCasing = 15; - - this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.15); - this.casingWidth = Util.zoomMultiply(trunkCasingWidth, 0.15); + this.minZoomFill = minZoomMinor; + this.minZoomCasing = minZoomMinor; - // Casing color gets interpolated as a fade from light to dark between this - // level's introduction and next road-level introduction. - this.casingColor = [ - "interpolate", - ["exponential", roadExp], - ["zoom"], - 15, - `hsl(${roadHue}, 0%, 65%)`, - 19, - `hsl(${roadHue}, 0%, 23%)`, - ]; - - this.constraints = [ - "all", - ["!=", "toll", 1], - ["in", "service", "parking_aisle", "driveway"], - ]; + this.fillColor = roadFillColor(roadHue, this.minZoomFill); } } -class SmallServiceToll extends ServiceToll { +class MinorToll extends Minor { constructor() { - super(); - - this.minZoomFill = 15; - this.minZoomCasing = 15; - - this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.15); - this.casingWidth = Util.zoomMultiply(trunkCasingWidth, 0.15); - - // Casing color gets interpolated as a fade from light to dark between this - // level's introduction and next road-level introduction. - this.casingColor = [ - "interpolate", - ["exponential", roadExp], - ["zoom"], - 15, - `hsl(${tollRoadHue}, 0%, 65%)`, - 19, - `hsl(${tollRoadHue}, 0%, 23%)`, - ]; - + super(); this.constraints = [ "all", - ["==", "toll", 1], - ["in", "service", "parking_aisle", "driveway"], + ["in", getClass, ["literal", ["minor", "service"]]], + isToll, ]; + + this.fillColor = tollRoadFillColor(tollRoadHue, this.minZoomFill); } } class MotorwayLink extends Motorway { constructor() { super(); - this.link = true; - this.minZoomFill = 7; - this.minZoomCasing = 7; - - this.fillWidth = [ - [7, 1], - [13, 1.5], - [14, 2.5], - [20, 11.5], - ]; - this.casingWidth = [ - [7, 2], - [13, 3], - [14, 4], - [20, 15], - ]; + this.constraints = ["all", ["==", getClass, "motorway"], isLink]; + this.minZoomFill = minZoomPrimary; + this.minZoomCasing = minZoomPrimary; } } class TrunkLink extends Trunk { constructor() { super(); - this.link = true; - this.minZoomFill = 7; - this.minZoomCasing = 7; - - this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.5); - this.casingWidth = Util.zoomMultiply(trunkCasingWidth, 0.5); - - this.constraints = null; + this.constraints = ["all", ["==", getClass, "trunk"], isLink]; + this.minZoomFill = minZoomPrimary; + this.minZoomCasing = minZoomPrimary; } } class PrimaryLink extends Primary { constructor() { super(); - this.link = true; - - this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.45); - this.casingWidth = Util.zoomMultiply(trunkCasingWidth, 0.45); - - this.constraints = ["!=", "toll", 1]; + this.constraints = ["all", ["==", getClass, "primary"], isLink, isNotToll]; } } class PrimaryLinkToll extends PrimaryToll { constructor() { super(); - this.link = true; - - this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.45); - this.casingWidth = Util.zoomMultiply(trunkCasingWidth, 0.45); - - this.constraints = ["==", "toll", 1]; + this.constraints = ["all", ["==", getClass, "primary"], isLink, isToll]; } } class SecondaryLink extends Secondary { constructor() { super(); - this.link = true; - - this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.3); - this.casingWidth = Util.zoomMultiply(trunkCasingWidth, 0.3); - - this.constraints = ["!=", "toll", 1]; + this.constraints = [ + "all", + ["==", getClass, "secondary"], + isLink, + isNotToll, + ]; } } class SecondaryLinkToll extends SecondaryToll { constructor() { super(); - this.link = true; - - this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.3); - this.casingWidth = Util.zoomMultiply(trunkCasingWidth, 0.3); - - this.constraints = ["==", "toll", 1]; + this.constraints = ["all", ["==", getClass, "secondary"], isLink, isToll]; } } class TertiaryLink extends Tertiary { constructor() { super(); - this.link = true; - - this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.25); - this.casingWidth = Util.zoomMultiply(trunkCasingWidth, 0.25); - - this.constraints = ["!=", "toll", 1]; + this.constraints = ["all", ["==", getClass, "tertiary"], isLink, isNotToll]; } } class TertiaryLinkToll extends TertiaryToll { constructor() { super(); - this.link = true; - - this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.25); - this.casingWidth = Util.zoomMultiply(trunkCasingWidth, 0.25); - - this.constraints = ["==", "toll", 1]; + this.constraints = ["all", ["==", getClass, "tertiary"], isLink, isToll]; } } @@ -938,13 +987,6 @@ class TrunkBridge extends Trunk { } } -class TrunkExpresswayBridge extends TrunkExpressway { - constructor() { - super(); - this.brunnel = "bridge"; - } -} - class PrimaryBridge extends Primary { constructor() { //undifferentiated @@ -1033,38 +1075,6 @@ class MinorTollBridge extends MinorToll { } } -class ServiceBridge extends Service { - constructor() { - //undifferentiated - super(); - this.brunnel = "bridge"; - } -} - -class ServiceTollBridge extends ServiceToll { - constructor() { - //undifferentiated - super(); - this.brunnel = "bridge"; - } -} - -class SmallServiceBridge extends SmallService { - constructor() { - //undifferentiated - super(); - this.brunnel = "bridge"; - } -} - -class SmallServiceTollBridge extends SmallServiceToll { - constructor() { - //undifferentiated - super(); - this.brunnel = "bridge"; - } -} - class MotorwayLinkBridge extends MotorwayLink { constructor() { super(); @@ -1129,297 +1139,22 @@ class TertiaryLinkTollBridge extends TertiaryLinkToll { } } -//Tunnels -class MotorwayTunnel extends Motorway { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 41%, 80%)`, - `hsl(${roadHue}, 41%, 80%)`, - ]; - this.fillColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 71%, 90%)`, - `hsl(${roadHue}, 71%, 90%)`, - ]; - } -} - -class TrunkTunnel extends Trunk { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 41%, 80%)`, - `hsl(${roadHue}, 41%, 80%)`, - ]; - this.fillColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 77%, 90%)`, - `hsl(${roadHue}, 77%, 90%)`, - ]; - } -} - -class TrunkExpresswayTunnel extends TrunkExpressway { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 41%, 85%)`, - `hsl(${roadHue}, 41%, 85%)`, - ]; - this.fillColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 77%, 90%)`, - `hsl(${roadHue}, 77%, 90%)`, - ]; - } -} - -class PrimaryTunnel extends Primary { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(${roadHue}, 0%, 80%)`; - this.fillColor = `hsl(${roadHue}, 0%, 95%)`; - } -} - -class PrimaryTollTunnel extends PrimaryToll { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(${tollRoadHue}, 0%, 80%)`; - this.fillColor = `hsl(${tollRoadHue}, 100%, 95%)`; - } -} - -class PrimaryExpresswayTunnel extends PrimaryExpressway { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(0, 0%, 80%)`; - this.fillColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 100%, 95%)`, - `hsl(${roadHue}, 0%, 95%)`, - ]; - } -} - -class SecondaryTunnel extends Secondary { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(${roadHue}, 0%, 80%)`; - this.fillColor = `hsl(${roadHue}, 0%, 95%)`; - } -} - -class SecondaryTollTunnel extends SecondaryToll { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(${tollRoadHue}, 0%, 80%)`; - this.fillColor = `hsl(${tollRoadHue}, 100%, 95%)`; - } -} - -class SecondaryExpresswayTunnel extends SecondaryExpressway { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(0, 0%, 80%)`; - this.fillColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 100%, 95%)`, - `hsl(${roadHue}, 0%, 95%)`, - ]; - } -} - -class TertiaryTunnel extends Tertiary { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(${roadHue}, 0%, 80%)`; - this.fillColor = `hsl(${roadHue}, 0%, 95%)`; - } -} - -class TertiaryTollTunnel extends TertiaryToll { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(${tollRoadHue}, 0%, 80%)`; - this.fillColor = `hsl(${tollRoadHue}, 100%, 95%)`; - } -} - -class TertiaryExpresswayTunnel extends TertiaryExpressway { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(0, 0%, 80%)`; - this.fillColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 100%, 95%)`, - `hsl(${roadHue}, 0%, 95%)`, - ]; - } -} - -class MinorTunnel extends Minor { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(${roadHue}, 0%, 90%)`; - this.fillColor = `hsl(${roadHue}, 0%, 95%)`; - } -} - -class MinorTollTunnel extends MinorToll { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(${tollRoadHue}, 0%, 90%)`; - this.fillColor = `hsl(${tollRoadHue}, 100%, 95%)`; - } -} - -class ServiceTunnel extends Service { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(${roadHue}, 0%, 90%)`; - this.fillColor = `hsl(${roadHue}, 0%, 95%)`; - } -} - -class ServiceTollTunnel extends ServiceToll { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(${tollRoadHue}, 0%, 90%)`; - this.fillColor = `hsl(${tollRoadHue}, 100%, 95%)`; - } -} - -class SmallServiceTunnel extends SmallService { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(${roadHue}, 0%, 90%)`; - this.fillColor = `hsl(${roadHue}, 0%, 95%)`; - } -} - -class SmallServiceTollTunnel extends SmallServiceToll { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(${tollRoadHue}, 0%, 90%)`; - this.fillColor = `hsl(${tollRoadHue}, 100%, 95%)`; - } -} - -class MotorwayLinkTunnel extends MotorwayLink { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 41%, 80%)`, - `hsl(${roadHue}, 41%, 80%)`, - ]; - this.fillColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 71%, 90%)`, - `hsl(${roadHue}, 71%, 90%)`, - ]; - } -} - -class TrunkLinkTunnel extends TrunkLink { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 41%, 80%)`, - `hsl(${roadHue}, 41%, 80%)`, - ]; - this.fillColor = [ - ...tollRoadSelector, - `hsl(${tollRoadHue}, 77%, 90%)`, - `hsl(${roadHue}, 77%, 90%)`, - ]; - } -} - -class PrimaryLinkTunnel extends PrimaryLink { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(${roadHue}, 0%, 80%)`; - this.fillColor = `hsl(${roadHue}, 0%, 95%)`; - } -} - -class PrimaryLinkTollTunnel extends PrimaryLinkToll { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(${tollRoadHue}, 0%, 80%)`; - this.fillColor = `hsl(${tollRoadHue}, 100%, 95%)`; - } -} - -class SecondaryLinkTunnel extends SecondaryLink { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(${roadHue}, 0%, 80%)`; - this.fillColor = `hsl(${roadHue}, 0%, 95%)`; - } -} - -class SecondaryLinkTollTunnel extends SecondaryLinkToll { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(${tollRoadHue}, 0%, 80%)`; - this.fillColor = `hsl(${tollRoadHue}, 100%, 95%)`; - } -} +export const road = new Road(); +export const roadBridge = new RoadBridge(); +export const roadTunnel = new RoadTunnel(); -class TertiaryLinkTunnel extends TertiaryLink { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(${roadHue}, 0%, 80%)`; - this.fillColor = `hsl(${roadHue}, 0%, 95%)`; - } -} +export const roadSimpleCasing = new RoadSimpleCasing(); +export const roadLinkSimpleCasing = new RoadLinkSimpleCasing(); +export const roadSimpleCasingBridge = new RoadSimpleCasingBridge(); +export const roadLinkSimpleCasingBridge = new RoadLinkSimpleCasingBridge(); -class TertiaryLinkTollTunnel extends TertiaryLinkToll { - constructor() { - super(); - this.brunnel = "tunnel"; - this.casingColor = `hsl(${tollRoadHue}, 0%, 80%)`; - this.fillColor = `hsl(${tollRoadHue}, 100%, 95%)`; - } -} +export const roadSimpleFill = new RoadSimpleFill(); +export const roadLinkSimpleFill = new RoadLinkSimpleFill(); +export const roadSimpleFillBridge = new RoadSimpleFillBridge(); +export const roadLinkSimpleFillBridge = new RoadLinkSimpleFillBridge(); -export const interstate = new InterstateMotorway(); export const motorway = new Motorway(); export const trunk = new Trunk(); -export const trunkExpressway = new TrunkExpressway(); export const primary = new Primary(); export const primaryToll = new PrimaryToll(); export const primaryExpressway = new PrimaryExpressway(); @@ -1431,14 +1166,9 @@ export const tertiaryToll = new TertiaryToll(); export const tertiaryExpressway = new TertiaryExpressway(); export const minor = new Minor(); export const minorToll = new MinorToll(); -export const service = new Service(); -export const serviceToll = new ServiceToll(); -export const smallService = new SmallService(); -export const smallServiceToll = new SmallServiceToll(); export const motorwayBridge = new MotorwayBridge(); export const trunkBridge = new TrunkBridge(); -export const trunkExpresswayBridge = new TrunkExpresswayBridge(); export const primaryBridge = new PrimaryBridge(); export const primaryTollBridge = new PrimaryTollBridge(); export const primaryExpresswayBridge = new PrimaryExpresswayBridge(); @@ -1450,29 +1180,6 @@ export const tertiaryTollBridge = new TertiaryTollBridge(); export const tertiaryExpresswayBridge = new TertiaryExpresswayBridge(); export const minorBridge = new MinorBridge(); export const minorTollBridge = new MinorTollBridge(); -export const serviceBridge = new ServiceBridge(); -export const serviceTollBridge = new ServiceTollBridge(); -export const smallServiceBridge = new SmallServiceBridge(); -export const smallServiceTollBridge = new SmallServiceTollBridge(); - -export const motorwayTunnel = new MotorwayTunnel(); -export const trunkTunnel = new TrunkTunnel(); -export const trunkExpresswayTunnel = new TrunkExpresswayTunnel(); -export const primaryTunnel = new PrimaryTunnel(); -export const primaryTollTunnel = new PrimaryTollTunnel(); -export const primaryExpresswayTunnel = new PrimaryExpresswayTunnel(); -export const secondaryTunnel = new SecondaryTunnel(); -export const secondaryTollTunnel = new SecondaryTollTunnel(); -export const secondaryExpresswayTunnel = new SecondaryExpresswayTunnel(); -export const tertiaryTunnel = new TertiaryTunnel(); -export const tertiaryTollTunnel = new TertiaryTollTunnel(); -export const tertiaryExpresswayTunnel = new TertiaryExpresswayTunnel(); -export const minorTunnel = new MinorTunnel(); -export const minorTollTunnel = new MinorTollTunnel(); -export const serviceTunnel = new ServiceTunnel(); -export const serviceTollTunnel = new ServiceTollTunnel(); -export const smallServiceTunnel = new SmallServiceTunnel(); -export const smallServiceTollTunnel = new SmallServiceTollTunnel(); export const motorwayLink = new MotorwayLink(); export const trunkLink = new TrunkLink(); @@ -1491,12 +1198,3 @@ export const secondaryLinkBridge = new SecondaryLinkBridge(); export const secondaryLinkTollBridge = new SecondaryLinkTollBridge(); export const tertiaryLinkBridge = new TertiaryLinkBridge(); export const tertiaryLinkTollBridge = new TertiaryLinkTollBridge(); - -export const motorwayLinkTunnel = new MotorwayLinkTunnel(); -export const trunkLinkTunnel = new TrunkLinkTunnel(); -export const primaryLinkTunnel = new PrimaryLinkTunnel(); -export const primaryLinkTollTunnel = new PrimaryLinkTollTunnel(); -export const secondaryLinkTunnel = new SecondaryLinkTunnel(); -export const secondaryLinkTollTunnel = new SecondaryLinkTollTunnel(); -export const tertiaryLinkTunnel = new TertiaryLinkTunnel(); -export const tertiaryLinkTollTunnel = new TertiaryLinkTollTunnel(); diff --git a/src/layer/transportation_label.js b/src/layer/transportation_label.js index 1d3c056c9..243db3a53 100644 --- a/src/layer/transportation_label.js +++ b/src/layer/transportation_label.js @@ -79,7 +79,12 @@ export const label = { ["literal", ["Metropolis Regular Italic"]], ["literal", ["Metropolis Light"]], ], - "text-field": "{name:latin} {name:nonlatin}", + "text-field": [ + "concat", + ["get", "name:latin"], + " ", + ["get", "name:nonlatin"], + ], "text-max-angle": 20, "symbol-placement": "line", "text-size": [ @@ -127,7 +132,11 @@ export const bridgeSpacer = { type: "symbol", source: "openmaptiles", "source-layer": "transportation", - filter: ["all", ["==", "brunnel", "bridge"], ["in", "$type", "LineString"]], + filter: [ + "all", + ["==", ["get", "brunnel"], "bridge"], + ["in", ["geometry-type"], ["literal", ["LineString"]]], + ], paint: { "icon-opacity": 0, }, diff --git a/src/layer/water.js b/src/layer/water.js index 80c44cfa9..580f5855a 100644 --- a/src/layer/water.js +++ b/src/layer/water.js @@ -94,7 +94,7 @@ export const waterwayLabel = { type: "symbol", source: "openmaptiles", "source-layer": "waterway", - filter: ["!=", "brunnel", "tunnel"], + filter: ["!=", ["get", "brunnel"], "tunnel"], layout: { ...labelLayoutProperties, "text-size": [ @@ -124,7 +124,7 @@ export const waterwayLabel = { export const waterLabel = { id: "water_label", type: "symbol", - filter: ["all", ["==", "$type", "LineString"]], + filter: ["all", ["==", ["geometry-type"], "LineString"]], source: "openmaptiles", "source-layer": "water_name", layout: { @@ -151,7 +151,7 @@ export const waterPointLabel = { type: "symbol", source: "openmaptiles", "source-layer": "water_name", - filter: ["all", ["==", "$type", "Point"]], + filter: ["all", ["==", ["geometry-type"], "Point"]], layout: { "text-field": nameField, "text-font": ["Metropolis Bold Italic"],