diff --git a/import/openrailwaymap.lua b/import/openrailwaymap.lua index 8a3d3501..2abdcd08 100644 --- a/import/openrailwaymap.lua +++ b/import/openrailwaymap.lua @@ -660,7 +660,7 @@ local railway_state_tags = { disused = 'disused:railway', abandoned = 'abandoned:railway', preserved = 'preserved:railway', - -- Razed is not included + razed = 'razed:railway', } function railway_feature_and_state(tags, railway_value_func) for state, railway_tag in pairs(railway_state_tags) do diff --git a/proxy/index.html b/proxy/index.html index 9222e9d8..b91cacc2 100644 --- a/proxy/index.html +++ b/proxy/index.html @@ -103,21 +103,21 @@
Map configuration
-
+
Control the saturation of the background map. The smallest value makes the map grayscale, while the largest value makes the map full color.
-
+
Control the opacity of the background map. The smallest value makes the map transparent, while the largest value makes the map opaque.
-
+
@@ -136,7 +136,7 @@
Map configuration
Vector tiles: A URL specifying a vector style. See the wiki for a list of vector tile providers, for example https://tiles-eu.stadiamaps.com/styles/alidade_smooth.json?api_key=REGISTER_FOR_API_KEY (registration is required for Stadia Maps to get an API key).
-
+
@@ -156,7 +156,48 @@
Map configuration
Control the theme of OpenRailwayMap. The default is to follow the system and browser preferences. A light or dark theme can also be configured.
-
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + Control which future infrastructure should be shown on the map. + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + Control how historical railway infrastructure should be shown on the map.
+ Note: Tagging and non-existing features in OpenStreetMap like demolished railways is discouraged. It is encouraged instead to use the OpenHistoricalMap to create and maintain historical data. + +
+
diff --git a/proxy/js/styles.mjs b/proxy/js/styles.mjs index 6416b541..82c64e66 100644 --- a/proxy/js/styles.mjs +++ b/proxy/js/styles.mjs @@ -341,7 +341,7 @@ const bridge_casing_add = 3; // TODO move to variable const abandoned_dasharray = [2.5, 2.5]; const disused_dasharray = [2.5, 2.5]; -const razed_dasharray = [1.5, 3.5]; +const razed_dasharray = [1, 5]; const construction_dasharray = [4.5, 4.5]; const proposed_dasharray = [1, 4]; const present_dasharray = [1]; @@ -695,8 +695,8 @@ const sources = { }, openhistoricalmap: { type: 'vector', - tiles: [`https://vtiles.openhistoricalmap.org/maps/osm/{z}/{x}/{y}.pbf`], - attribution: 'OpenHistoricalMap', + tiles: ['https://vtiles.openhistoricalmap.org/maps/osm/{z}/{x}/{y}.pbf'], + attribution: 'OpenHistoricalMap', }, }; @@ -725,10 +725,14 @@ const railwayLine = (text, layers) => [ source, 'source-layer': 'railway_line_high', filter: ['all', + state === 'construction' ? ['global-state', 'showConstructionInfrastructure'] : true, + state === 'proposed' ? ['global-state', 'showProposedInfrastructure'] : true, + state === 'abandoned' ? ['global-state', 'showAbandonedInfrastructure'] : true, + state === 'razed' ? ['global-state', 'showRazedInfrastructure'] : true, ['==', ['get', 'state'], state], ['get', 'tunnel'], filter ?? true, - ], + ].filter(it => it !== true), layout: { 'line-join': 'round', 'line-cap': dash ? 'butt' : 'round', @@ -751,10 +755,14 @@ const railwayLine = (text, layers) => [ source, 'source-layer': 'railway_line_high', filter: ['all', + state === 'construction' ? ['global-state', 'showConstructionInfrastructure'] : true, + state === 'proposed' ? ['global-state', 'showProposedInfrastructure'] : true, + state === 'abandoned' ? ['global-state', 'showAbandonedInfrastructure'] : true, + state === 'razed' ? ['global-state', 'showRazedInfrastructure'] : true, ['==', ['get', 'state'], state], ['get', 'tunnel'], filter ?? true, - ], + ].filter(it => it !== true), layout: { 'line-join': 'round', 'line-cap': dash ? 'butt' : 'round', @@ -778,10 +786,16 @@ const railwayLine = (text, layers) => [ source, 'source-layer': 'railway_line_high', filter: ['all', - ['any', ...Object.keys(states).map(state => ['==', ['get', 'state'], state])], + ['any', ...Object.keys(states).map(state => + state === 'construction' ? ['all', ['global-state', 'showConstructionInfrastructure'], ['==', ['get', 'state'], state]] + : state === 'proposed' ? ['all', ['global-state', 'showProposedInfrastructure'], ['==', ['get', 'state'], state]] + : state === 'abandoned' ? ['all', ['global-state', 'showAbandonedInfrastructure'], ['==', ['get', 'state'], state]] + : state === 'razed' ? ['all', ['global-state', 'showRazedInfrastructure'], ['==', ['get', 'state'], state]] + : ['==', ['get', 'state'], state]) + ], ['get', 'tunnel'], filter ?? true, - ], + ].filter(it => it !== true), layout: { 'line-join': 'round', 'line-cap': 'butt', @@ -796,14 +810,20 @@ const railwayLine = (text, layers) => [ preferredDirectionLayer(`${id}_tunnel_preferred_direction`, ['all', ['get', 'tunnel'], - ['any', ...Object.keys(states).map(state => ['==', ['get', 'state'], state])], + ['any', ...Object.keys(states).map(state => + state === 'construction' ? ['all', ['global-state', 'showConstructionInfrastructure'], ['==', ['get', 'state'], state]] + : state === 'proposed' ? ['all', ['global-state', 'showProposedInfrastructure'], ['==', ['get', 'state'], state]] + : state === 'abandoned' ? ['all', ['global-state', 'showAbandonedInfrastructure'], ['==', ['get', 'state'], state]] + : state === 'razed' ? ['all', ['global-state', 'showRazedInfrastructure'], ['==', ['get', 'state'], state]] + : ['==', ['get', 'state'], state]) + ], ['any', ['==', ['get', 'preferred_direction'], 'forward'], ['==', ['get', 'preferred_direction'], 'backward'], ['==', ['get', 'preferred_direction'], 'both'], ], filter ?? true, - ], + ].filter(it => it !== true), color, ), ), @@ -819,11 +839,15 @@ const railwayLine = (text, layers) => [ source, 'source-layer': 'railway_line_high', filter: ['all', + state === 'construction' ? ['global-state', 'showConstructionInfrastructure'] : true, + state === 'proposed' ? ['global-state', 'showProposedInfrastructure'] : true, + state === 'abandoned' ? ['global-state', 'showAbandonedInfrastructure'] : true, + state === 'razed' ? ['global-state', 'showRazedInfrastructure'] : true, ['==', ['get', 'state'], state], ['!', ['get', 'bridge']], ['!', ['get', 'tunnel']], filter ?? true, - ], + ].filter(it => it !== true), layout: { 'line-join': 'round', 'line-cap': 'butt', @@ -846,11 +870,15 @@ const railwayLine = (text, layers) => [ source, 'source-layer': 'railway_line_high', filter: ['all', + state === 'construction' ? ['global-state', 'showConstructionInfrastructure'] : true, + state === 'proposed' ? ['global-state', 'showProposedInfrastructure'] : true, + state === 'abandoned' ? ['global-state', 'showAbandonedInfrastructure'] : true, + state === 'razed' ? ['global-state', 'showRazedInfrastructure'] : true, ['==', ['get', 'state'], state], ['!', ['get', 'bridge']], ['!', ['get', 'tunnel']], filter ?? true, - ], + ].filter(it => it !== true), layout: { 'line-join': 'round', 'line-cap': dash ? 'butt' : 'round', @@ -890,7 +918,7 @@ const railwayLine = (text, layers) => [ ], ], filter ?? true, - ], + ].filter(it => it !== true), layout: { 'line-join': 'round', 'line-cap': 'butt', @@ -920,7 +948,7 @@ const railwayLine = (text, layers) => [ ], ], filter ?? true, - ], + ].filter(it => it !== true), layout: { 'line-join': 'round', 'line-cap': 'butt', @@ -943,10 +971,14 @@ const railwayLine = (text, layers) => [ source, 'source-layer': 'railway_line_high', filter: ['all', + state === 'construction' ? ['global-state', 'showConstructionInfrastructure'] : true, + state === 'proposed' ? ['global-state', 'showProposedInfrastructure'] : true, + state === 'abandoned' ? ['global-state', 'showAbandonedInfrastructure'] : true, + state === 'razed' ? ['global-state', 'showRazedInfrastructure'] : true, ['==', ['get', 'state'], state], ['get', 'bridge'], filter ?? true, - ], + ].filter(it => it !== true), layout: { 'line-join': 'round', 'line-cap': dash ? 'butt' : 'round', @@ -969,7 +1001,13 @@ const railwayLine = (text, layers) => [ preferredDirectionLayer( `${id}_preferred_direction`, ['all', - ['any', ...Object.keys(states).map(state => ['==', ['get', 'state'], state])], + ['any', ...Object.keys(states).map(state => + state === 'construction' ? ['all', ['global-state', 'showConstructionInfrastructure'], ['==', ['get', 'state'], state]] + : state === 'proposed' ? ['all', ['global-state', 'showProposedInfrastructure'], ['==', ['get', 'state'], state]] + : state === 'abandoned' ? ['all', ['global-state', 'showAbandonedInfrastructure'], ['==', ['get', 'state'], state]] + : state === 'razed' ? ['all', ['global-state', 'showRazedInfrastructure'], ['==', ['get', 'state'], state]] + : ['==', ['get', 'state'], state]) + ], ['!', ['get', 'tunnel']], ['any', ['==', ['get', 'preferred_direction'], 'forward'], @@ -977,7 +1015,7 @@ const railwayLine = (text, layers) => [ ['==', ['get', 'preferred_direction'], 'both'], ], filter ?? true, - ], + ].filter(it => it !== true), color, ), ), @@ -994,9 +1032,15 @@ const railwayLine = (text, layers) => [ source, 'source-layer': 'railway_line_high', filter: ['all', - ['any', ...Object.keys(states).map(state => ['==', ['get', 'state'], state])], + ['any', ...Object.keys(states).map(state => + state === 'construction' ? ['all', ['global-state', 'showConstructionInfrastructure'], ['==', ['get', 'state'], state]] + : state === 'proposed' ? ['all', ['global-state', 'showProposedInfrastructure'], ['==', ['get', 'state'], state]] + : state === 'abandoned' ? ['all', ['global-state', 'showAbandonedInfrastructure'], ['==', ['get', 'state'], state]] + : state === 'razed' ? ['all', ['global-state', 'showRazedInfrastructure'], ['==', ['get', 'state'], state]] + : ['==', ['get', 'state'], state]) + ], filter ?? true, - ], + ].filter(it => it !== true), paint: { 'text-color': colors.railwayLine.text, 'text-halo-color': ['case', @@ -1031,11 +1075,12 @@ const historicalRailwayLine = (text, layers) => [ source: 'openhistoricalmap', 'source-layer': 'transport_lines', filter: ['all', + ['global-state', 'openHistoricalMap'], ['<=', ['coalesce', ['get', 'start_decdate'], 0.0], ['global-state', 'date']], ['<=', ['global-state', 'date'], ['coalesce', ['get', 'end_decdate'], 9999.0]], ['==', ['get', 'tunnel'], 1], filter ?? true, - ], + ].filter(it => it !== true), layout: { 'line-join': 'round', 'line-cap': dash ? 'butt' : 'round', @@ -1056,11 +1101,12 @@ const historicalRailwayLine = (text, layers) => [ source: 'openhistoricalmap', 'source-layer': 'transport_lines', filter: ['all', + ['global-state', 'openHistoricalMap'], ['<=', ['coalesce', ['get', 'start_decdate'], 0.0], ['global-state', 'date']], ['<=', ['global-state', 'date'], ['coalesce', ['get', 'end_decdate'], 9999.0]], ['==', ['get', 'tunnel'], 1], filter ?? true, - ], + ].filter(it => it !== true), layout: { 'line-join': 'round', 'line-cap': dash ? 'butt' : 'round', @@ -1083,11 +1129,12 @@ const historicalRailwayLine = (text, layers) => [ source: 'openhistoricalmap', 'source-layer': 'transport_lines', filter: ['all', + ['global-state', 'openHistoricalMap'], ['<=', ['coalesce', ['get', 'start_decdate'], 0.0], ['global-state', 'date']], ['<=', ['global-state', 'date'], ['coalesce', ['get', 'end_decdate'], 9999.0]], ['==', ['get', 'tunnel'], 1], filter ?? true, - ], + ].filter(it => it !== true), layout: { 'line-join': 'round', 'line-cap': 'butt', @@ -1109,12 +1156,13 @@ const historicalRailwayLine = (text, layers) => [ source: 'openhistoricalmap', 'source-layer': 'transport_lines', filter: ['all', + ['global-state', 'openHistoricalMap'], ['<=', ['coalesce', ['get', 'start_decdate'], 0.0], ['global-state', 'date']], ['<=', ['global-state', 'date'], ['coalesce', ['get', 'end_decdate'], 9999.0]], ['!=', ['get', 'bridge'], 1], ['!=', ['get', 'tunnel'], 1], filter ?? true, - ], + ].filter(it => it !== true), layout: { 'line-join': 'round', 'line-cap': 'butt', @@ -1135,12 +1183,13 @@ const historicalRailwayLine = (text, layers) => [ source: 'openhistoricalmap', 'source-layer': 'transport_lines', filter: ['all', + ['global-state', 'openHistoricalMap'], ['<=', ['coalesce', ['get', 'start_decdate'], 0.0], ['global-state', 'date']], ['<=', ['global-state', 'date'], ['coalesce', ['get', 'end_decdate'], 9999.0]], ['!=', ['get', 'bridge'], 1], ['!=', ['get', 'tunnel'], 1], filter ?? true, - ], + ].filter(it => it !== true), layout: { 'line-join': 'round', 'line-cap': dash ? 'butt' : 'round', @@ -1167,11 +1216,12 @@ const historicalRailwayLine = (text, layers) => [ source: 'openhistoricalmap', 'source-layer': 'transport_lines', filter: ['all', + ['global-state', 'openHistoricalMap'], ['<=', ['coalesce', ['get', 'start_decdate'], 0.0], ['global-state', 'date']], ['<=', ['global-state', 'date'], ['coalesce', ['get', 'end_decdate'], 9999.0]], ['==', ['get', 'bridge'], 1], filter ?? true, - ], + ].filter(it => it !== true), layout: { 'line-join': 'round', 'line-cap': 'butt', @@ -1191,11 +1241,12 @@ const historicalRailwayLine = (text, layers) => [ source: 'openhistoricalmap', 'source-layer': 'transport_lines', filter: ['all', + ['global-state', 'openHistoricalMap'], ['<=', ['coalesce', ['get', 'start_decdate'], 0.0], ['global-state', 'date']], ['<=', ['global-state', 'date'], ['coalesce', ['get', 'end_decdate'], 9999.0]], ['==', ['get', 'bridge'], 1], filter ?? true, - ], + ].filter(it => it !== true), layout: { 'line-join': 'round', 'line-cap': 'butt', @@ -1217,11 +1268,12 @@ const historicalRailwayLine = (text, layers) => [ source: 'openhistoricalmap', 'source-layer': 'transport_lines', filter: ['all', + ['global-state', 'openHistoricalMap'], ['<=', ['coalesce', ['get', 'start_decdate'], 0.0], ['global-state', 'date']], ['<=', ['global-state', 'date'], ['coalesce', ['get', 'end_decdate'], 9999.0]], ['==', ['get', 'bridge'], 1], filter ?? true, - ], + ].filter(it => it !== true), layout: { 'line-join': 'round', 'line-cap': dash ? 'butt' : 'round', @@ -1247,10 +1299,11 @@ const historicalRailwayLine = (text, layers) => [ source: 'openhistoricalmap', 'source-layer': 'transport_lines', filter: ['all', + ['global-state', 'openHistoricalMap'], ['<=', ['coalesce', ['get', 'start_decdate'], 0.0], ['global-state', 'date']], ['<=', ['global-state', 'date'], ['coalesce', ['get', 'end_decdate'], 9999.0]], filter ?? true, - ], + ].filter(it => it !== true), paint: { 'text-color': colors.railwayLine.text, 'text-halo-color': ['case', @@ -1388,12 +1441,228 @@ const imageLayerWithOutline = (id, spriteExpression, layer) => [ */ const layers = { standard: [ + ...historicalRailwayLine( + ['step', ['zoom'], + ['coalesce', ['get', 'ref'], ''], + 11, + ['coalesce', ['get', 'name'], ''], + ], + [ + { + id: 'railway_line_historical_miniature', + minzoom: 12, + filter: ['==', ['get', 'type'], 'miniature'], + color: colors.styles.standard.miniature, + dash: abandoned_dasharray, + width: 2, + }, + { + id: 'railway_line_historical_funicular', + minzoom: 12, + filter: ['==', ['get', 'type'], 'funicular'], + color: colors.styles.standard.funicular, + dash: abandoned_dasharray, + width: 2, + }, + { + id: 'railway_line_historical_disused', + minzoom: 11, + filter: ['==', ['get', 'type'], 'disused'], + color: colors.styles.standard.disused, + dash: abandoned_dasharray, + width: 1.5, + }, + { + id: 'railway_line_historical_abandoned', + minzoom: 11, + filter: ['==', ['get', 'type'], 'abandoned'], + color: colors.styles.standard.abandoned, + dash: abandoned_dasharray, + width: 1.5, + }, + // TODO + // { + // id: 'railway_line_historical_construction', + // minzoom: 10, + // filter: ['==', ['get', 'type'], 'construction'], + // color: colors.styles.standard.main, + // dash: construction_dasharray, + // width: 1.5, + // }, + // TODO + // { + // id: 'railway_line_historical_proposed', + // minzoom: 10, + // filter: ['==', ['get', 'type'], 'proposed'], + // color: colors.styles.standard.main, + // dash: proposed_dasharray, + // width: 1.5, + // }, + { + id: 'railway_line_historical_narrow_gauge', + minzoom: 10, + filter: ['all', + ['==', ['get', 'type'], 'narrow_gauge'], + ['!', + // Covered by industrial case + ['==', ['get', 'usage'], 'industrial'], + ], + ], + color: colors.styles.standard.narrowGauge, + dash: abandoned_dasharray, + width: 2, + }, + { + id: 'railway_line_historical_service', + minzoom: 10, + filter: ['all', + ['==', ['get', 'type'], 'rail'], + ['==', ['get', 'usage'], null], + ], + color: ['match', ['get', 'service'], + 'spur', colors.styles.standard.spur, + 'siding', colors.styles.standard.siding, + 'yard', colors.styles.standard.yard, + 'crossover', colors.styles.standard.crossover, + colors.styles.standard.unknown, + ], + dash: abandoned_dasharray, + width: ["interpolate", ["exponential", 1.2], ["zoom"], + 8, ['match', ['get', 'service'], + 'yard', 1, + 1.5, + ], + 15, ['match', ['get', 'service'], + 'yard', 1, + 1.5, + ], + 16, 2, + ], + }, + { + id: 'railway_line_historical_light_rail', + minzoom: 9, + filter: ['any', + ['==', ['get', 'type'], 'subway'], + ['==', ['get', 'type'], 'tram'], + ['==', ['get', 'type'], 'light_rail'], + ['==', ['get', 'type'], 'monorail'], + ], + width: 2, + color: ['match', ['get', 'type'], + 'light_rail', colors.styles.standard.light_rail, + 'monorail', colors.styles.standard.monorail, + 'subway', colors.styles.standard.subway, + 'tram', colors.styles.standard.tram, + colors.styles.standard.unknown, + ], + dash: abandoned_dasharray, + }, + { + id: 'railway_line_historical_test_military', + minzoom: 9, + filter: ['all', + ['==', ['get', 'type'], 'rail'], + ['any', + ['==', ['get', 'usage'], 'test'], + ['==', ['get', 'usage'], 'military'], + ], + ], + width: ["interpolate", ["exponential", 1.2], ["zoom"], + 8, 1.5, + 14, 1.5, + 16, 2, + ], + color: ['match', ['get', 'usage'], + 'test', colors.styles.standard.test, + 'military', colors.styles.standard.military, + colors.styles.standard.unknown, + ], + dash: abandoned_dasharray, + }, + { + id: 'railway_line_historical_tourism', + minzoom: 9, + filter: ['any', + ['all', + ['==', ['get', 'type'], 'rail'], + ['==', ['get', 'usage'], 'tourism'], + ], + ['==', ['get', 'type'], 'preserved'], + ], + width: 2, + color: colors.styles.standard.tourism, + dash: abandoned_dasharray, + }, + { + id: 'railway_line_historical_industrial', + minzoom: 9, + filter: ['all', + ['==', ['get', 'usage'], 'industrial'], + ['any', + ['==', ['get', 'type'], 'rail'], + ['==', ['get', 'type'], 'narrow_gauge'], + ], + ], + width: ["interpolate", ["exponential", 1.2], ["zoom"], + 8, 1.5, + 14, 1.5, + 16, 2, + ], + color: colors.styles.standard.industrial, + dash: abandoned_dasharray, + }, + { + id: 'railway_line_historical_branch', + minzoom: 7, + filter: ['all', + ['==', ['get', 'type'], 'rail'], + ['==', ['get', 'usage'], 'branch'], + ], + width: ["interpolate", ["exponential", 1.2], ["zoom"], + 8, 2, + 14, 2, + 16, 3, + ], + color: colors.styles.standard.branch, + dash: abandoned_dasharray, + }, + { + id: 'railway_line_historical_main', + minzoom: 5, + filter: ['all', + ['==', ['get', 'type'], 'rail'], + ['==', ['get', 'usage'], 'main'], + ], + width: ["interpolate", ["exponential", 1.2], ["zoom"], + 8, 2, + 14, 2, + 16, 3, + ], + color: ['case', + ['==', ['get', 'highspeed'], 'yes'], colors.styles.standard.highspeed, + colors.styles.standard.main, + ], + hoverColor: ['case', + ['==', ['get', 'highspeed'], 'yes'], colors.hover.alternative, + colors.hover.main, + ], + dash: abandoned_dasharray, + }, + ], + ), { id: 'railway_grouped_stations', type: 'fill', minzoom: 13, source: 'openrailwaymap_standard', 'source-layer': 'standard_railway_grouped_stations', + filter: ['match', ['get', 'state'], + 'construction', ['global-state', 'showConstructionInfrastructure'], + 'proposed', ['global-state', 'showProposedInfrastructure'], + 'abandoned', ['global-state', 'showAbandonedInfrastructure'], + true, + ], paint: { 'fill-color': ['case', ['in', ['get', 'state'], ['literal', ['disused', 'abandoned', 'preserved']]], colors.styles.standard.past, @@ -1477,7 +1746,12 @@ const layers = { minzoom: 13, source: 'openrailwaymap_standard', 'source-layer': 'standard_railway_grouped_stations', - filter: ['==', ['get', 'state'], state], + filter: ['all', + state === 'construction' ? ['global-state', 'showConstructionInfrastructure'] : true, + state === 'proposed' ? ['global-state', 'showProposedInfrastructure'] : true, + state === 'abandoned' ? ['global-state', 'showAbandonedInfrastructure'] : true, + ['==', ['get', 'state'], state], + ].filter(it => it !== true), paint: { 'line-color': ['case', // Use outline color of feature, without taking state into account @@ -1601,7 +1875,28 @@ const layers = { // High zooms // ensure that width interpolation matches medium zooms - + { + id: 'railway_line_razed', + minzoom: 12, + source: 'high', + states: { + razed: razed_dasharray, + }, + filter: ['==', ['get', 'state'], 'razed'], + width: 2, + color: colors.styles.standard.razed, + }, + { + id: 'railway_line_abandoned', + minzoom: 12, + source: 'high', + states: { + abandoned: abandoned_dasharray, + }, + filter: ['==', ['get', 'state'], 'abandoned'], + width: 2, + color: colors.styles.standard.abandoned, + }, { id: 'railway_line_miniature', minzoom: 12, @@ -2106,7 +2401,16 @@ const layers = { minzoom: 16, source: 'high', 'source-layer': 'railway_line_high', - filter: ['!=', ['get', 'track_ref'], null], + filter: ['all', + ['!=', ['get', 'track_ref'], null], + ['match', ['get', 'state'], + 'construction', ['global-state', 'showConstructionInfrastructure'], + 'proposed', ['global-state', 'showProposedInfrastructure'], + 'abandoned', ['global-state', 'showAbandonedInfrastructure'], + 'razed', ['global-state', 'showRazedInfrastructure'], + true, + ], + ], paint: { 'text-color': ['case', ['boolean', ['feature-state', 'hover'], false], colors.styles.standard.track.hover, @@ -2225,15 +2529,35 @@ const layers = { ], 10, ['all', + ['match', ['get', 'state'], + 'construction', ['global-state', 'showConstructionInfrastructure'], + 'proposed', ['global-state', 'showProposedInfrastructure'], + 'disused', false, + 'abandoned', false, + true, + ], ['!=', ['get', 'station'], 'tram'], ['!=', ['get', 'station'], 'funicular'], ['!=', ['get', 'station'], 'miniature'], ], 11, ['all', + ['match', ['get', 'state'], + 'construction', ['global-state', 'showConstructionInfrastructure'], + 'proposed', ['global-state', 'showProposedInfrastructure'], + 'abandoned', false, + true, + ], ['!=', ['get', 'station'], 'funicular'], ['!=', ['get', 'station'], 'miniature'], ], + 12, + ['match', ['get', 'state'], + 'construction', ['global-state', 'showConstructionInfrastructure'], + 'proposed', ['global-state', 'showProposedInfrastructure'], + 'abandoned', ['global-state', 'showAbandonedInfrastructure'], + true, + ], ], paint: { 'text-color': ['case', @@ -2246,6 +2570,8 @@ const layers = { ['==', ['get', 'station'], 'light_rail'], colors.styles.standard.lightRailText, ['==', ['get', 'station'], 'monorail'], colors.styles.standard.monorailText, ['==', ['get', 'station'], 'tram'], colors.styles.standard.tramStopText, + ['==', ['get', 'station'], 'miniature'], colors.styles.standard.miniatureText, + ['==', ['get', 'station'], 'funicular'], colors.styles.standard.funicularText, colors.styles.standard.stationsText, ], colors.styles.standard.defaultText, @@ -2265,6 +2591,8 @@ const layers = { ['==', ['get', 'station'], 'light_rail'], colors.styles.standard.lightRailText, ['==', ['get', 'station'], 'monorail'], colors.styles.standard.monorailText, ['==', ['get', 'station'], 'tram'], colors.styles.standard.tramStopText, + ['==', ['get', 'station'], 'miniature'], colors.styles.standard.miniatureText, + ['==', ['get', 'station'], 'funicular'], colors.styles.standard.funicularText, colors.styles.standard.stationsText, ], colors.styles.standard.defaultText, @@ -2305,6 +2633,12 @@ const layers = { minzoom: 13, source: 'openrailwaymap_standard', 'source-layer': 'standard_railway_text_stations', + filter: ['match', ['get', 'state'], + 'construction', ['global-state', 'showConstructionInfrastructure'], + 'proposed', ['global-state', 'showProposedInfrastructure'], + 'abandoned', ['global-state', 'showAbandonedInfrastructure'], + true, + ], paint: { 'text-color': ['case', ['==', ['get', 'feature'], 'yard'], colors.styles.standard.yardText, @@ -2348,6 +2682,55 @@ const layers = { 'text-max-width': 5, }, }, + { + id: 'historical_stations', + type: 'symbol', + minzoom: 14, + source: 'openhistoricalmap', + 'source-layer': 'transport_points_centroids', + filter: ['all', + ['global-state', 'openHistoricalMap'], + ['<=', ['coalesce', ['get', 'start_decdate'], 0.0], ['global-state', 'date']], + ['<=', ['global-state', 'date'], ['coalesce', ['get', 'end_decdate'], 9999.0]], + ['==', ['get', 'class'], 'railway'], + ['any', + ['==', ['get', 'type'], 'station'], + ['==', ['get', 'type'], 'halt'], + ] + ], + paint: { + 'text-color': ['case', + ['==', ['get', 'type'], 'halt'], colors.styles.standard.tramStopText, + colors.styles.standard.stationsText, + ], + 'text-halo-color': ['case', + ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo, + colors.halo, + ], + 'text-halo-width': 1.5, + 'icon-color': ['case', + ['==', ['get', 'type'], 'halt'], colors.styles.standard.tramStopText, + colors.styles.standard.stationsText, + ], + 'icon-halo-width': 1, + 'icon-halo-color': ['case', + ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo, + colors.halo, + ], + }, + layout: { + 'symbol-z-order': 'source', + 'icon-image': 'sdf:general/station-small', + 'icon-overlap': 'always', + 'text-field': '{name}', + 'text-font': font.bold, + 'text-size': 11, + 'text-padding': 10, + 'text-max-width': 5, + 'text-optional': true, + 'text-variable-anchor': ['top', 'bottom', 'left', 'right'], + }, + }, searchResults, ], historical: [ @@ -2556,6 +2939,7 @@ const layers = { source: 'openhistoricalmap', 'source-layer': 'transport_points_centroids', filter: ['all', + ['global-state', 'openHistoricalMap'], ['<=', ['coalesce', ['get', 'start_decdate'], 0.0], ['global-state', 'date']], ['<=', ['global-state', 'date'], ['coalesce', ['get', 'end_decdate'], 9999.0]], ['==', ['get', 'class'], 'railway'], @@ -3726,7 +4110,15 @@ const layers = { minzoom: 13, source: 'openrailwaymap_standard', 'source-layer': 'standard_railway_grouped_stations', - filter: ['!=', ['get', 'operator'], null], + filter: ['all', + ['!=', ['get', 'operator'], null], + ['match', ['get', 'state'], + 'construction', ['global-state', 'showConstructionInfrastructure'], + 'proposed', ['global-state', 'showProposedInfrastructure'], + 'abandoned', ['global-state', 'showAbandonedInfrastructure'], + true, + ], + ], paint: { 'fill-color': ['concat', 'hsl(', ['get', 'operator_hash'], ', 100%, 40%)'], 'fill-opacity': ['case', @@ -3749,9 +4141,12 @@ const layers = { source: 'openrailwaymap_standard', 'source-layer': 'standard_railway_grouped_stations', filter: ['all', + state === 'construction' ? ['global-state', 'showConstructionInfrastructure'] : true, + state === 'proposed' ? ['global-state', 'showProposedInfrastructure'] : true, + state === 'abandoned' ? ['global-state', 'showAbandonedInfrastructure'] : true, ['!=', ['get', 'operator'], null], ['==', ['get', 'state'], state], - ], + ].filter(it => it !== true), paint: { 'line-color': ['concat', 'hsl(', ['get', 'operator_hash'], ', 100%, 40%)'], 'line-opacity': 0.3, @@ -4219,6 +4614,21 @@ const makeStyle = selectedStyle => ({ theme: { default: 'light', }, + showConstructionInfrastructure: { + default: true, + }, + showProposedInfrastructure: { + default: true, + }, + showAbandonedInfrastructure: { + default: false, + }, + showRazedInfrastructure: { + default: false, + }, + openHistoricalMap: { + default: true, + }, }, }); diff --git a/proxy/js/ui.js b/proxy/js/ui.js index 7c072e5b..8ef3caf7 100644 --- a/proxy/js/ui.js +++ b/proxy/js/ui.js @@ -18,6 +18,12 @@ const backgroundUrlControl = document.getElementById('backgroundUrl'); const themeSystemControl = document.getElementById('themeSystem'); const themeDarkControl = document.getElementById('themeDark'); const themeLightControl = document.getElementById('themeLight'); +const historicalInfrastructureNoneControl = document.getElementById('historicalInfrastructureNone'); +const historicalInfrastructureOpenHistoricalMapControl = document.getElementById('historicalInfrastructureOpenHistoricalMap'); +const historicalInfrastructureOpenStreetMapControl = document.getElementById('historicalInfrastructureOpenStreetMap'); +const futureInfrastructureNoneControl = document.getElementById('futureInfrastructureNone'); +const futureInfrastructureConstructionControl = document.getElementById('futureInfrastructureConstruction'); +const futureInfrastructureConstructionProposedControl = document.getElementById('futureInfrastructureConstructionProposed'); const editorIDControl = document.getElementById('editorID'); const editorJOSMControl = document.getElementById('editorJOSM'); const backgroundMapContainer = document.getElementById('background-map'); @@ -242,6 +248,24 @@ function showConfiguration() { themeLightControl.checked = true; } + const futureInfrastructure = configuration.futureInfrastructure ?? defaultConfiguration.futureInfrastructure; + if (futureInfrastructure === 'none') { + futureInfrastructureNoneControl.checked = true; + } else if (futureInfrastructure === 'construction') { + futureInfrastructureConstructionControl.checked = true + } else if (futureInfrastructure === 'construction-proposed') { + futureInfrastructureConstructionProposedControl.checked = true; + } + + const historicalInfrastructure = configuration.historicalInfrastructure ?? defaultConfiguration.historicalInfrastructure; + if (historicalInfrastructure === 'none') { + historicalInfrastructureNoneControl.checked = true; + } else if (historicalInfrastructure === 'openhistoricalmap') { + historicalInfrastructureOpenHistoricalMapControl.checked = true + } else if (historicalInfrastructure === 'openstreetmap') { + historicalInfrastructureOpenStreetMapControl.checked = true; + } + const editor = configuration.editor ?? defaultConfiguration.editor; if (editor === 'josm') { editorJOSMControl.checked = true; @@ -598,6 +622,23 @@ function onEditorChange(editor) { updateConfiguration('editor', editor); } +function onHistoricalInfrastructureChange(historicalInfrastructure) { + updateConfiguration('historicalInfrastructure', historicalInfrastructure); + + map.setGlobalStateProperty('openHistoricalMap', historicalInfrastructure === 'openhistoricalmap'); + map.setGlobalStateProperty('showAbandonedInfrastructure', historicalInfrastructure === 'openstreetmap'); + map.setGlobalStateProperty('showRazedInfrastructure', historicalInfrastructure === 'openstreetmap'); + + onStyleChange(); +} + +function onFutureInfrastructureChange(futureInfrastructure) { + updateConfiguration('futureInfrastructure', futureInfrastructure); + + map.setGlobalStateProperty('showConstructionInfrastructure', futureInfrastructure === 'construction' || futureInfrastructure === 'construction-proposed'); + map.setGlobalStateProperty('showProposedInfrastructure', futureInfrastructure === 'construction-proposed'); +} + function updateBackgroundMapContainer() { backgroundMapContainer.style.filter = `saturate(${clamp(configuration.backgroundSaturation ?? defaultConfiguration.backgroundSaturation, 0.0, 1.0)}) opacity(${clamp(configuration.backgroundOpacity ?? defaultConfiguration.backgroundOpacity, 0.0, 1.0)})`; } @@ -608,6 +649,8 @@ const defaultConfiguration = { backgroundType: 'raster', backgroundUrl: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', theme: 'system', + historicalInfrastructure: 'openhistoricalmap', + futureInfrastructure: 'construction-proposed', editor: 'id', view: {}, }; @@ -719,11 +762,21 @@ function rewriteStylePathsToOrigin(style) { function rewriteGlobalStateDefaults(style) { style.state.date.default = selectedDate; style.state.theme.default = selectedTheme; + + const historicalInfrastructure = configuration.historicalInfrastructure ?? defaultConfiguration.historicalInfrastructure + style.state.openHistoricalMap.default = historicalInfrastructure === 'openhistoricalmap'; + style.state.showAbandonedInfrastructure.default = historicalInfrastructure === 'openstreetmap'; + style.state.showRazedInfrastructure.default = historicalInfrastructure === 'openstreetmap'; + + const futureInfrastructure = configuration.futureInfrastructure ?? defaultConfiguration.futureInfrastructure; + style.state.showConstructionInfrastructure.default = futureInfrastructure === 'construction' || futureInfrastructure === 'construction-proposed'; + style.state.showProposedInfrastructure.default = futureInfrastructure === 'construction-proposed'; } let lastSetMapStyle = null; const onStyleChange = () => { - const supportsDate = knownStyles[selectedStyle].styles.date; + const historicalInfrastructure = configuration.historicalInfrastructure ?? defaultConfiguration.historicalInfrastructure + const supportsDate = knownStyles[selectedStyle].styles.date && historicalInfrastructure === 'openhistoricalmap'; const dateActive = supportsDate && dateControl.active; const mapStyle = dateActive ? knownStyles[selectedStyle].styles.date