diff --git a/scripts/taginfo_template.json b/scripts/taginfo_template.json index 9e099e4da..5d7a65eb7 100644 --- a/scripts/taginfo_template.json +++ b/scripts/taginfo_template.json @@ -154,6 +154,62 @@ "doc_url": "https://openmaptiles.org/schema/#class", "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_military_plane.svg" }, + { + "key": "aerialway", + "value": "cable_car", + "object_types": ["way"], + "description": "Cable cars are represented by a solid magenta line that splits in two at high zoom.", + "doc_url": "https://openmaptiles.org/schema/#aerialway" + }, + { + "key": "aerialway", + "value": "chair_lift", + "object_types": ["way"], + "description": "Chairlifts are represented by a solid magenta line that splits in two at high zoom.", + "doc_url": "https://openmaptiles.org/schema/#aerialway" + }, + { + "key": "aerialway", + "value": "gondola", + "object_types": ["way"], + "description": "Aerial gondolas are represented by a solid magenta line that splits in two at high zoom.", + "doc_url": "https://openmaptiles.org/schema/#aerialway" + }, + { + "key": "aerialway", + "value": "mixed_lift", + "object_types": ["way"], + "description": "Mixed aerial lifts are represented by a solid magenta line that splits in two at high zoom.", + "doc_url": "https://openmaptiles.org/schema/#aerialway" + }, + { + "key": "aerialway", + "value": "drag_lift", + "object_types": ["way"], + "description": "Drag lifts are represented by a dashed magenta line that splits in two at high zoom.", + "doc_url": "https://openmaptiles.org/schema/#aerialway" + }, + { + "key": "aerialway", + "value": "platter", + "object_types": ["way"], + "description": "Platter lifts are represented by a dashed magenta line that splits in two at high zoom.", + "doc_url": "https://openmaptiles.org/schema/#aerialway" + }, + { + "key": "aerialway", + "value": "j-bar", + "object_types": ["way"], + "description": "J-bar lifts are represented by a dashed magenta line that splits in two at high zoom.", + "doc_url": "https://openmaptiles.org/schema/#aerialway" + }, + { + "key": "aerialway", + "value": "t-bar", + "object_types": ["way"], + "description": "T-bar lifts are represented by a dashed magenta line that splits in two at high zoom.", + "doc_url": "https://openmaptiles.org/schema/#aerialway" + }, { "key": "aeroway", "value": "runway", diff --git a/src/constants/color.js b/src/constants/color.js index 7b69fc519..c883fbcfa 100644 --- a/src/constants/color.js +++ b/src/constants/color.js @@ -20,6 +20,9 @@ export const parkOutline = "hsla(136, 41%, 70%, 50%)"; export const parkLabel = "hsl(136, 71%, 29%)"; export const parkLabelHalo = "hsl(90, 27%, 94%)"; +export const aerialwayLine = "hsl(310, 41%, 59%)"; +export const aerialwayLabel = "hsl(310, 71%, 29%)"; + export const airportFill = "hsl(250, 41%, 95%)"; export const airportOutline = "hsl(250, 41%, 79%)"; export const airportRunway = "hsl(250, 41%, 79%)"; diff --git a/src/js/legend_config.js b/src/js/legend_config.js index 02e9170e3..645050679 100644 --- a/src/js/legend_config.js +++ b/src/js/legend_config.js @@ -13,6 +13,7 @@ import * as ParkLayers from "../layer/park.js"; import * as BuildingLayers from "../layer/building.js"; import * as WaterLayers from "../layer/water.js"; import * as FerryLayers from "../layer/ferry.js"; +import * as AerialwayLayers from "../layer/aerialway.js"; export const sections = [ { @@ -40,6 +41,10 @@ export const sections = [ name: "Railroads", entries: RailLayers.legendEntries, }, + { + name: "Aerial lifts", + entries: AerialwayLayers.legendEntries, + }, { name: "Aviation", entries: AerowayLayers.legendEntries, diff --git a/src/layer/aerialway.js b/src/layer/aerialway.js new file mode 100644 index 000000000..fead3f0ef --- /dev/null +++ b/src/layer/aerialway.js @@ -0,0 +1,144 @@ +"use strict"; + +import * as Color from "../constants/color.js"; + +// Exponent base for inter-zoom interpolation +let aerialwayExp = 1.2; + +let lineWidth = [ + "interpolate", + ["exponential", aerialwayExp], + ["zoom"], + 12, + 1.2, + 14.9999, + 2.4, + 15, + 1.2, + 16, + 1.2, + 20, + 2.4, +]; +let lineGapWidth = [ + "interpolate", + ["exponential", aerialwayExp], + ["zoom"], + 12, + 0, + 15, + 0, + 16, + 1, + 20, + 16, +]; + +let casingLineWidth = [ + "interpolate", + ["exponential", aerialwayExp], + ["zoom"], + 12, + 2, + 15.9999, + 4, + 16, + 2, + 20, + 4, +]; +let casingLineGapWidth = [ + "interpolate", + ["exponential", aerialwayExp], + ["zoom"], + 12, + 0, + 16, + 0, + 20, + 14.4, +]; + +export const lift = { + id: "lift", + type: "line", + paint: { + "line-color": Color.aerialwayLine, + "line-width": lineWidth, + "line-gap-width": lineGapWidth, + }, + filter: [ + "all", + ["==", ["get", "class"], "aerialway"], + [ + "in", + ["get", "subclass"], + ["literal", ["chair_lift", "cable_car", "gondola", "mixed_lift"]], + ], + ], + layout: { + visibility: "visible", + }, + source: "openmaptiles", + "source-layer": "transportation", +}; + +export const liftCasing = { + id: "lift_casing", + type: "line", + paint: { + "line-color": Color.backgroundFill, + "line-width": casingLineWidth, + "line-gap-width": casingLineGapWidth, + }, + filter: [ + "all", + ["==", ["get", "class"], "aerialway"], + [ + "in", + ["get", "subclass"], + ["literal", ["chair_lift", "cable_car", "gondola", "mixed_lift"]], + ], + ], + layout: { + visibility: "visible", + }, + source: "openmaptiles", + "source-layer": "transportation", +}; + +export const dragLift = { + id: "drag_lift", + type: "line", + paint: { + "line-color": Color.aerialwayLine, + "line-width": lineWidth, + "line-gap-width": lineGapWidth, + "line-dasharray": [5, 1], + }, + filter: [ + "all", + ["==", ["get", "class"], "aerialway"], + [ + "in", + ["get", "subclass"], + ["literal", ["drag_lift", "platter", "j-bar", "t-bar"]], + ], + ], + layout: { + visibility: "visible", + }, + source: "openmaptiles", + "source-layer": "transportation", +}; + +export const legendEntries = [ + { + description: "Aerial tramway or chairlift", + layers: [lift.id], + }, + { + description: "Drag lift", + layers: [dragLift.id], + }, +]; diff --git a/src/layer/index.js b/src/layer/index.js index 1725b7f77..106f5d18d 100644 --- a/src/layer/index.js +++ b/src/layer/index.js @@ -2,6 +2,7 @@ import * as Label from "../constants/label.js"; +import * as lyrAerialway from "./aerialway.js"; import * as lyrAeroway from "./aeroway.js"; import * as lyrBackground from "./background.js"; import * as lyrBoundary from "./boundary.js"; @@ -135,7 +136,9 @@ export function build(locales) { lyrRail.railway.fill(), lyrOneway.road, - lyrOneway.link + lyrOneway.link, + + lyrAerialway.dragLift ); layers.push(lyrBuilding.building); @@ -199,6 +202,9 @@ export function build(locales) { layers.push( //The labels at the end of the list draw on top of the layers at the beginning. + lyrAerialway.liftCasing, + lyrAerialway.lift, + lyrBoundary.countryLabelLeft, lyrBoundary.countryLabelRight, lyrWater.waterwayLabel, diff --git a/src/layer/transportation_label.js b/src/layer/transportation_label.js index e3f45f4a1..af7c087fd 100644 --- a/src/layer/transportation_label.js +++ b/src/layer/transportation_label.js @@ -3,7 +3,7 @@ import * as Label from "../constants/label.js"; import * as Color from "../constants/color.js"; -const highwaySelector = ["match", ["get", "class"]]; +const classSelector = ["match", ["get", "class"]]; const motorwayToTrunk = ["motorway", "trunk"]; const motorwayToPrimary = [...motorwayToTrunk, "primary"]; @@ -25,17 +25,19 @@ export const label = { type: "symbol", paint: { "text-color": [ - ...highwaySelector, + ...classSelector, majorConstruction, "maroon", minorConstruction, "slategray", "ferry", Color.waterLineBold, + "aerialway", + Color.aerialwayLabel, "#333", ], "text-halo-color": [ - ...highwaySelector, + ...classSelector, "ferry", Color.waterFill, Color.backgroundFill, @@ -45,17 +47,17 @@ export const label = { "text-opacity": [ "step", ["zoom"], - [...highwaySelector, "motorway", 1, 0], + [...classSelector, "motorway", 1, 0], 10, - [...highwaySelector, motorwayToTrunk, 1, 0], + [...classSelector, motorwayToTrunk, 1, 0], 11, - [...highwaySelector, motorwayToPrimary, 1, "ferry", 1, 0], + [...classSelector, motorwayToPrimary, 1, "ferry", 1, 0], 12, - [...highwaySelector, motorwayToSecondary, 1, "ferry", 1, 0], + [...classSelector, motorwayToSecondary, 1, ["ferry", "aerialway"], 1, 0], 13, - [...highwaySelector, motorwayToMinor, 1, "ferry", 1, 0], + [...classSelector, motorwayToMinor, 1, ["ferry", "aerialway"], 1, 0], 14, - [...highwaySelector, motorwayToService, 1, "ferry", 1, 0], + [...classSelector, motorwayToService, 1, ["ferry", "aerialway"], 1, 0], 15, 1, ], @@ -70,13 +72,14 @@ export const label = { ...majorConstruction, ...minorConstruction, "ferry", + "aerialway", ], ], ], layout: { "text-font": [ - ...highwaySelector, - "ferry", + ...classSelector, + ["ferry", "aerialway"], ["literal", ["OpenHistorical Italic"]], ["literal", ["OpenHistorical"]], ], @@ -88,33 +91,75 @@ export const label = { ["zoom"], 12, 16, - [...highwaySelector, motorwayToTrunk, 10, 12], + [...classSelector, motorwayToTrunk, 10, 12], 17, - [...highwaySelector, motorwayToSecondary, 10, 12], + [...classSelector, motorwayToSecondary, 10, 12], ], "text-anchor": [ "step", ["zoom"], - "bottom", + [...classSelector, "aerialway", "center", "bottom"], 16, - [...highwaySelector, motorwayToTrunk, "center", "bottom"], + [ + ...classSelector, + "aerialway", + "center", + motorwayToTrunk, + "center", + "bottom", + ], 17, - [...highwaySelector, motorwayToSecondary, "center", "bottom"], + [ + ...classSelector, + "aerialway", + "center", + motorwayToSecondary, + "center", + "bottom", + ], + ], + "text-offset": [ + "interpolate", + ["exponential", 1.2], + ["zoom"], + 15, + [ + ...classSelector, + "aerialway", + ["literal", [0, -0.7]], + ["literal", [0, 0]], + ], + 16, + [ + ...classSelector, + "aerialway", + ["literal", [0, -0.9]], + ["literal", [0, 0]], + ], + 20, + [ + ...classSelector, + "aerialway", + ["literal", [0, -1.5]], + ["literal", [0, 0]], + ], ], "symbol-sort-key": [ // TODO busway - ...highwaySelector, - "motorway", + ...classSelector, + "aerialway", 0, - "trunk", + "motorway", 1, - ["primary", "ferry"], + "trunk", 2, - "secondary", + ["primary", "ferry"], 3, - ["tertiary", "minor"], + "secondary", 4, + ["tertiary", "minor"], 5, + 6, ], }, source: "openmaptiles",