From a949f175630cf8c9c39924c9ebe1bf3f7a6efafd Mon Sep 17 00:00:00 2001 From: Kyler Chin <7539174+kylerchin@users.noreply.github.com> Date: Wed, 19 Feb 2025 12:04:48 -0800 Subject: [PATCH] fix a bunch of sizes --- src/components/addLayers/addLiveDots.ts | 42 +++-- src/components/addLayers/addStops.ts | 4 +- src/components/process_realtime_data.ts | 2 +- src/routes/+page.svelte | 220 +++++++++++++----------- 4 files changed, 149 insertions(+), 119 deletions(-) diff --git a/src/components/addLayers/addLiveDots.ts b/src/components/addLayers/addLiveDots.ts index d2c9f84..6fede1e 100644 --- a/src/components/addLayers/addLiveDots.ts +++ b/src/components/addLayers/addLiveDots.ts @@ -67,11 +67,11 @@ export async function makeCircleLayers(map: Map, darkMode: boolean, layerspercat 9, 0.14, 11, - 0.10, + 0.15, 12, - 0.2, + 0.3, 15, - 0.3 + 0.4 ]; const trambearingoffset = [ @@ -251,7 +251,7 @@ export async function makeCircleLayers(map: Map, darkMode: boolean, layerspercat id: layerspercategory.other.pointingshell, source: 'other', type: 'symbol', - filter: ['all', ['==', true, ['get', 'has_bearing']], ['!=', ['get', 'bearing'], 0]], + filter: ['all', ['!=', ['get', 'route_type'], 0],['==', true, ['get', 'has_bearing']], ['!=', ['get', 'bearing'], 0]], paint: { 'icon-opacity': ['interpolate', ['linear'], ['zoom'], 9, 0.3, 11.5, 0.8] }, @@ -310,11 +310,12 @@ export async function makeCircleLayers(map: Map, darkMode: boolean, layerspercat source: 'localrail', minzoom: 4, filter: ["all", ['any', - ["==", ['get', 'routeType'], 0], - ["==", ['get', 'routeType'], 5] + ["==", ['get', 'route_type'], 0], + ["==", ['get', 'route_type'], 5] ]], paint: { - 'circle-radius': ['interpolate', ['linear'], ['zoom'], 6, 2, 8, 2, 10, 2.5, 11, 4.5, 13, 5, 16, 10], + //['interpolate', ['linear'], ['zoom'], 6, 3, 8, 3, 10, 4, 11, 6, 16, 12], + 'circle-radius': ['interpolate', ['linear'], ['zoom'], 6, 2, 8, 2.5, 10, 4, 11, 4.5, 13, 6, 15, 6, 16, 10], 'circle-color': ['get', 'color'], 'circle-stroke-color': darkMode == true ? '#ffffff' : '#3a3a3a', 'circle-stroke-width': ['interpolate', ['linear'], ['zoom'], 8, 0.6, 10, 1], @@ -328,8 +329,8 @@ export async function makeCircleLayers(map: Map, darkMode: boolean, layerspercat source: 'localrail', type: 'symbol', filter: ['all', ['any', - ["==", ['get', 'routeType'], 0], - ["==", ['get', 'routeType'], 5] + ["==", ['get', 'route_type'], 0], + ["==", ['get', 'route_type'], 5] ], ['==', true, ['get', 'has_bearing']], ['!=', ['get', 'bearing'], 0]], paint: { 'icon-color': ['get', 'contrastdarkmodebearing'], @@ -352,8 +353,8 @@ export async function makeCircleLayers(map: Map, darkMode: boolean, layerspercat source: 'localrail', type: 'symbol', filter: ['all', ['any', - ["==", ['get', 'routeType'], 0], - ["==", ['get', 'routeType'], 5] + ["==", ['get', 'route_type'], 0], + ["==", ['get', 'route_type'], 5] ], ['==', true, ['get', 'has_bearing']], ['!=', ['get', 'bearing'], 0]], paint: { 'icon-opacity': ['interpolate', ['linear'], ['zoom'], 9.8, 0.3, 11, 0.4, 11.5, 0.8] @@ -376,8 +377,8 @@ export async function makeCircleLayers(map: Map, darkMode: boolean, layerspercat source: 'localrail', minzoom: 6, filter: ['all', ['any', - ["==", ['get', 'routeType'], 0], - ["==", ['get', 'routeType'], 5] + ["==", ['get', 'route_type'], 0], + ["==", ['get', 'route_type'], 5] ]], layout: { 'text-field': ['get', 'maptag'], @@ -411,7 +412,7 @@ export async function makeCircleLayers(map: Map, darkMode: boolean, layerspercat type: 'circle', source: 'localrail', minzoom: 4, - filter: ['all', ["==", ['get', 'routeType'], 1]], + filter: ['all', ["==", ['get', 'route_type'], 1]], paint: { 'circle-radius': ['interpolate', ['linear'], ['zoom'], 6, 3, 8, 3, 10, 4, 11, 6, 16, 12], 'circle-color': ['get', 'color'], @@ -422,11 +423,16 @@ export async function makeCircleLayers(map: Map, darkMode: boolean, layerspercat } }); + + map.addLayer({ id: layerspercategory.metro.pointing, source: 'localrail', type: 'symbol', - filter: ['all',["==", ['get', 'routeType'], 1], ['==', true, ['get', 'has_bearing']], ['!=', ['get', 'bearing'], 0]], + filter: ['all', + ["==", ['get', 'route_type'], 1], + ['!=', ['get', 'route_type'], 0], + ['==', true, ['get', 'has_bearing']], ['!=', ['get', 'bearing'], 0]], paint: { 'icon-color': ['get', 'contrastdarkmodebearing'], 'icon-opacity': 0.6 @@ -448,7 +454,9 @@ export async function makeCircleLayers(map: Map, darkMode: boolean, layerspercat id: layerspercategory.metro.pointingshell, source: 'localrail', type: 'symbol', - filter: ['all',["==", ['get', 'routeType'], 1], ['==', true, ['get', 'has_bearing']], ['!=', ['get', 'bearing'], 0]], + filter: ['all',["==", ['get', 'route_type'], 1], + ['==', true, ['get', 'has_bearing']], + ['!=', ['get', 'bearing'], 0]], paint: { 'icon-opacity': ['interpolate', ['linear'], ['zoom'], 9.8, 0.3, 11, 0.4, 11.5, 0.8] }, @@ -469,7 +477,7 @@ export async function makeCircleLayers(map: Map, darkMode: boolean, layerspercat type: 'symbol', source: 'localrail', minzoom: 6, - filter: ['all', ["==", ['get', 'routeType'], 1]], + filter: ['all', ["==", ['get', 'route_type'], 1]], layout: { 'text-field': ['get', 'maptag'], /*'text-field': [ diff --git a/src/components/addLayers/addStops.ts b/src/components/addLayers/addStops.ts index 8dae749..728f04d 100644 --- a/src/components/addLayers/addStops.ts +++ b/src/components/addLayers/addStops.ts @@ -200,7 +200,7 @@ export function addStopsLayers(map: Map, darkMode: boolean, layerspercategory: a //'icon-ignore-placement': false, //'text-allow-overlap': true, //'symbol-avoid-edges': false, - 'text-font': ['Barlow-Medium'] + 'text-font': ['step', ['zoom'], ['literal', ['Barlow-Regular']], 12, ['literal', ['Barlow-Medium']]] }, paint: { 'text-color': darkMode ? '#ffffff' : '#2a2a2a', @@ -225,7 +225,7 @@ export function addStopsLayers(map: Map, darkMode: boolean, layerspercategory: a ], ['!', ['in', 2, ['get', 'children_route_types']]], ], - minzoom: 11 + minzoom: 10 }); //INTERCITY RAIL diff --git a/src/components/process_realtime_data.ts b/src/components/process_realtime_data.ts index 104c508..bea61ff 100644 --- a/src/components/process_realtime_data.ts +++ b/src/components/process_realtime_data.ts @@ -414,7 +414,7 @@ export function rerender_category_live_dots(category: string, map: maplibregl.Ma color: colour, chateau: chateau_id, //int representing enum - routeType: vehicle_data.route_type, + route_type: vehicle_data.route_type, //keep to gtfs lookup tripIdLabel: tripIdLabel, //keep to degrees as gtfs specs diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index b139bcf..2161ae7 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -439,118 +439,140 @@ } function changeCategory(category: string, categoryvalues: Record, this_layer_settings: any) { + if (mapglobal) { + + let shape = mapglobal.getLayer(categoryvalues.shapes); - let shape = mapglobal.getLayer(categoryvalues.shapes); +//console.log('processing settings',eachcategory, this_layer_settings) - //console.log('processing settings',eachcategory, this_layer_settings) +if (shape) { + if (this_layer_settings.shapes) { + mapglobal.setLayoutProperty(categoryvalues.shapes, 'visibility', 'visible'); + } else { + mapglobal.setLayoutProperty(categoryvalues.shapes, 'visibility', 'none'); + } - if (shape) { - if (this_layer_settings.shapes) { - mapglobal.setLayoutProperty(categoryvalues.shapes, 'visibility', 'visible'); - } else { - mapglobal.setLayoutProperty(categoryvalues.shapes, 'visibility', 'none'); - } + if (this_layer_settings.labelshapes) { + mapglobal.setLayoutProperty(categoryvalues.labelshapes, 'visibility', 'visible'); + } else { + mapglobal.setLayoutProperty(categoryvalues.labelshapes, 'visibility', 'none'); + } - if (this_layer_settings.labelshapes) { - mapglobal.setLayoutProperty(categoryvalues.labelshapes, 'visibility', 'visible'); - } else { - mapglobal.setLayoutProperty(categoryvalues.labelshapes, 'visibility', 'none'); - } + if (category === 'other') { + if (this_layer_settings.shapes) { + mapglobal.setLayoutProperty('ferryshapes', 'visibility', 'visible'); + } else { + mapglobal.setLayoutProperty('ferryshapes', 'visibility', 'none'); + } + } +} else { + console.error('could not fetch shapes layer', category); +} - if (category === 'other') { - if (this_layer_settings.shapes) { - mapglobal.setLayoutProperty('ferryshapes', 'visibility', 'visible'); - } else { - mapglobal.setLayoutProperty('ferryshapes', 'visibility', 'none'); - } - } - } else { - console.error('could not fetch shapes layer', category); - } +let stoplayer = mapglobal.getLayer(categoryvalues.stops); +if (stoplayer) { - let stoplayer = mapglobal.getLayer(categoryvalues.stops); - if (stoplayer) { + if (this_layer_settings.stops) { + mapglobal.setLayoutProperty(categoryvalues.stops, 'visibility', 'visible'); + } else { + mapglobal.setLayoutProperty(categoryvalues.stops, 'visibility', 'none'); + } +} else { + console.error('no stop layer found for', category); +} + +let stopslabellayer = mapglobal.getLayer(categoryvalues.labelstops); +if (stopslabellayer) { + if (this_layer_settings.stoplabels) { + mapglobal.setLayoutProperty(categoryvalues.labelstops, 'visibility', 'visible'); + } else { + mapglobal.setLayoutProperty(categoryvalues.labelstops, 'visibility', 'none'); + } +} else { + console.error('no stops label layer found for ', category); +} + +let dotcirclelayer = mapglobal.getLayer(categoryvalues.livedots); +let dotlabel = mapglobal.getLayer(categoryvalues.labeldots); + +[ + categoryvalues.pointing, + categoryvalues.pointingshell, + categoryvalues.labeldots, + categoryvalues.livedots +].forEach((x) => { + if (mapglobal?.getLayer(x)) { + let resulting_vis = this_layer_settings.visible ? 'visible' : 'none'; + mapglobal.setLayoutProperty(x, 'visibility', resulting_vis); + } else { + console.error('could not find layer', x); + } +}); - if (this_layer_settings.stops) { - mapglobal.setLayoutProperty(categoryvalues.stops, 'visibility', 'visible'); - } else { - mapglobal.setLayoutProperty(categoryvalues.stops, 'visibility', 'none'); - } - } else { - console.error('no stop layer found for', category); - } +mapglobal.setLayoutProperty( + categoryvalues.labeldots, + 'text-field', + interpretLabelsToCode(this_layer_settings.label, usunits) +); - let stopslabellayer = mapglobal.getLayer(categoryvalues.labelstops); - if (stopslabellayer) { - if (this_layer_settings.stoplabels) { - mapglobal.setLayoutProperty(categoryvalues.labelstops, 'visibility', 'visible'); - } else { - mapglobal.setLayoutProperty(categoryvalues.labelstops, 'visibility', 'none'); - } - } else { - console.error('no stops label layer found for ', category); - } +let pointerfilter = [ + 'all', + ['!=', 0, ['get', 'bearing']], + ['==', true, ['get', 'has_bearing']] +]; - let dotcirclelayer = mapglobal.getLayer(categoryvalues.livedots); - let dotlabel = mapglobal.getLayer(categoryvalues.labeldots); - - [ - categoryvalues.pointing, - categoryvalues.pointingshell, - categoryvalues.labeldots, - categoryvalues.livedots - ].forEach((x) => { - if (mapglobal?.getLayer(x)) { - let resulting_vis = this_layer_settings.visible ? 'visible' : 'none'; - mapglobal.setLayoutProperty(x, 'visibility', resulting_vis); - } else { - console.error('could not find layer', x); - } - }); +let vehicle_filter = ['all']; - mapglobal.setLayoutProperty( - categoryvalues.labeldots, - 'text-field', - interpretLabelsToCode(this_layer_settings.label, usunits) - ); +if (showzombiebuses == false) { + vehicle_filter.push(['!=', '', ['get', 'trip_id']]); + vehicle_filter.push(['has', 'trip_id']); - let hidevehiclecommand = ['all', ['!=', '', ['get', 'trip_id']], ['has', 'trip_id']]; - - let regularpointers = [ - 'all', - ['!=', 0, ['get', 'bearing']], - ['==', true, ['get', 'has_bearing']] - ]; - let hidevehiclecommandpointers = [ - 'all', - ['!=', '', ['get', 'trip_id']], - ['!=', 0, ['get', 'bearing']], - ['==', true, ['get', 'has_bearing']] - ]; - - if (dotcirclelayer && mapglobal) { - if (showzombiebuses === true) { - if (mapglobal.getLayer(categoryvalues.livedots)) { - mapglobal.setFilter(categoryvalues.livedots, undefined); - mapglobal.setFilter(categoryvalues.labeldots, undefined); - } - if (mapglobal.getLayer(categoryvalues.pointing)) { - mapglobal.setFilter(categoryvalues.pointing, regularpointers); - mapglobal.setFilter(categoryvalues.pointingshell, regularpointers); - } - } else { - if (mapglobal.getLayer(categoryvalues.livedots)) { - mapglobal.setFilter(categoryvalues.livedots, hidevehiclecommand); - mapglobal.setFilter(categoryvalues.labeldots, hidevehiclecommand); - } + pointerfilter.push(['==', true, ['get', 'has_bearing']]); +} - if (mapglobal.getLayer(categoryvalues.pointing)) { - mapglobal.setFilter(categoryvalues.pointing, hidevehiclecommandpointers); - mapglobal.setFilter(categoryvalues.pointingshell, hidevehiclecommandpointers); - } - } - } + +if (categoryvalues.livedots === "tram") { + pointerfilter.push(['any', + ['==', ['get', 'route_type'], 0], + ['==', ['get', 'route_type'], 5] + ]) + + vehicle_filter.push(['any', + ['==', ['get', 'route_type'], 0], + ['==', ['get', 'route_type'], 5] + ]) +} else { + if (categoryvalues.livedots === "metro") { + pointerfilter.push(['any', + ['==', ['get', 'route_type'], 1], + ['==', ['get', 'route_type'], 7] + ]) + + vehicle_filter.push(['any', + ['==', ['get', 'route_type'], 1], + ['==', ['get', 'route_type'], 7] + ]) +} +} + + +if (mapglobal.getLayer(categoryvalues.livedots)) { + //console.log('vehicle filter', category, vehicle_filter); + +//console.log('existing filter for category:', category, 'layer', categoryvalues.livedots, mapglobal.getFilter(categoryvalues.livedots)); + +mapglobal?.setFilter(categoryvalues.pointing, pointerfilter); +mapglobal?.setFilter(categoryvalues.pointingshell, pointerfilter); + +mapglobal?.setFilter(categoryvalues.livedots, vehicle_filter); +mapglobal?.setFilter(categoryvalues.labeldots, vehicle_filter); +//console.log('new filter category:', category, 'layer', categoryvalues.livedots, mapglobal.getFilter(categoryvalues.livedots)); +} + + } else { + console.error('no map found'); + } } function runSettingsAdapt() {