Skip to content

Commit c2ffc79

Browse files
nickswalkernickswalker
committed
LRR map bug fixes
Default to more zoomed to avoid loaded event not firing due to our limited terrain tiles
1 parent 3d6fcc8 commit c2ffc79

File tree

4 files changed

+93
-21
lines changed

4 files changed

+93
-21
lines changed

‎js/RelayMap.js‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ export class RelayMap extends LitElement {
9393
imgBasePath: { type: String, attribute: 'img-base-path' },
9494
pointCollections: { type: Object },
9595
pois: { type: Object },
96+
loading: { type: Boolean },
9697
liveArrivalsSetup: { type: Boolean, state: true }
9798
};
9899

@@ -113,6 +114,7 @@ export class RelayMap extends LitElement {
113114
this.imgBasePath = '';
114115
this.pointCollections = {};
115116
this.pois = null;
117+
this.loading = true;
116118
this.liveArrivalsSetup = false;
117119

118120
this.mapReady = new Promise((resolve) => {
@@ -128,7 +130,16 @@ export class RelayMap extends LitElement {
128130
}
129131

130132
render() {
131-
return html`<div class="map-container"></div>`;
133+
return html`
134+
<div class="map-container">
135+
${this.loading ? html`
136+
<div class="map-loading text-muted">
137+
<div class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></div>
138+
Loading map data...
139+
</div>
140+
` : ''}
141+
</div>
142+
`;
132143
}
133144

134145
createRenderRoot() {
@@ -228,20 +239,19 @@ export class RelayMap extends LitElement {
228239
attributionControl: true,
229240
style: this.styleHref,
230241
center: sessionStorage.getItem('mapCenter') ? JSON.parse(sessionStorage.getItem('mapCenter')) : this.center,
231-
zoom: Number(sessionStorage.getItem('mapZoom')) || 9,
242+
zoom: Number(sessionStorage.getItem('mapZoom')) || 10, // Note that the loading event won't fire if any tile in view can't be loaded. We don't have full terrain, so we need to be zoomed in
232243
pitch: Number(sessionStorage.getItem('mapPitch')) || 0,
233244
bearing: Number(sessionStorage.getItem('mapBearing')) || 0,
234245
minZoom: 8,
235246
maxBounds: maxBounds,
236247
hash: false
237248
});
238-
239-
this.setupMapControls();
240-
this.setupMapEvents();
241-
242249
this.map.on('load', () => {
243250
this._resolveMapReady();
244251
});
252+
253+
this.setupMapControls();
254+
this.setupMapEvents();
245255
}
246256

247257
setupMapControls() {

‎maps/lrr24-map-style.json‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,39 +20,63 @@
2020
"legs": {
2121
"type": "geojson",
2222
"promoteId": "id",
23-
"data": {}
23+
"data": {
24+
"type": "FeatureCollection",
25+
"features": []
26+
}
2427
},
2528
"leg-labels": {
2629
"type": "geojson",
2730
"promoteId": "id",
28-
"data": {}
31+
"data": {
32+
"type": "FeatureCollection",
33+
"features": []
34+
}
2935
},
3036
"leg-splits": {
3137
"type": "geojson",
3238
"promoteId": "id",
33-
"data": {}
39+
"data": {
40+
"type": "FeatureCollection",
41+
"features": []
42+
}
3443
},
3544
"overall-splits": {
3645
"type": "geojson",
3746
"promoteId": "id",
38-
"data": {}
47+
"data": {
48+
"type": "FeatureCollection",
49+
"features": []
50+
}
3951
},
4052
"exchanges": {
4153
"type": "geojson",
4254
"promoteId": "id",
43-
"data": {}
55+
"data": {
56+
"type": "FeatureCollection",
57+
"features": []
58+
}
4459
},
4560
"trains": {
4661
"type": "geojson",
47-
"data": {}
62+
"data": {
63+
"type": "FeatureCollection",
64+
"features": []
65+
}
4866
},
4967
"rail-lines" : {
5068
"type": "geojson",
51-
"data": {}
69+
"data": {
70+
"type": "FeatureCollection",
71+
"features": []
72+
}
5273
},
5374
"pois" : {
5475
"type": "geojson",
55-
"data": {}
76+
"data": {
77+
"type": "FeatureCollection",
78+
"features": []
79+
}
5680
}
5781
},
5882
"state": {

‎pages/light-rail-relay-24.html‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525

2626
<link rel="manifest" href="{{ site.baseurl }}/maps/lrr-24-manifest.json">
2727
<link href="https://cdn.jsdelivr.net/npm/maplibre-gl@5.7.0/dist/maplibre-gl.min.css" rel="stylesheet">
28-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
28+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
2929
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tabulator-tables@6.3.1/dist/css/tabulator.min.css" crossorigin="anonymous">
3030
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tabulator-tables@6.3.1/dist/css/tabulator_bootstrap5.min.css" crossorigin="anonymous">
3131
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css" integrity="sha512-qveKnGrvOChbSzAdtSs8p69eoLegyh+1hwOMbmpCViIwj7rn4oJjdmMvWOuyQlTOZgTlZA0N2PXA7iA8/2TUYA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -71,7 +71,7 @@
7171
<script type="importmap">
7272
{
7373
"imports": {
74-
"bootstrap": "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.6/js/bootstrap.esm.min.js",
74+
"bootstrap": "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/js/bootstrap.esm.min.js",
7575
"d3": "https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm",
7676
"lit": "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js",
7777
"lit-html": "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js",
@@ -272,6 +272,22 @@
272272
}
273273
#map {
274274
height: 70vh;
275+
position: relative;
276+
}
277+
278+
.map-loading {
279+
position: absolute;
280+
top: 50%;
281+
left: 50%;
282+
transform: translate(-50%, -50%);
283+
z-index: 1000;
284+
background: rgba(0, 0, 0, 0.8);
285+
color: white;
286+
padding: 1rem;
287+
border-radius: 4px;
288+
display: flex;
289+
align-items: center;
290+
gap: 0.5rem;
275291
}
276292

277293
.maplibregl-map {
@@ -695,6 +711,7 @@
695711
style-href="{{ site.baseurl }}/maps/lrr24-map-style.json"
696712
use-station-codes="true"
697713
img-base-path="{{ site.baseurl }}/img/lrr24/"
714+
loading
698715
></relay-map>
699716

700717
</section>
@@ -1308,6 +1325,7 @@ <h1 id="epilogue" class="mb-2">Epilogue <a href="#epilogue" class="anchor-link"
13081325
map.exchanges = allExchanges
13091326
map.exchangeNames = exchangeNames
13101327
map.legs = legs
1328+
map.loading = false
13111329
document.querySelector("#relay-map").registerLiveArrivalsSource(allExchanges, vehicleMonitor.getArrivalsForStop.bind(vehicleMonitor))
13121330
})
13131331

‎pages/light-rail-relay-25.html‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828

2929
<link rel="manifest" href="{{ site.baseurl }}/maps/lrr-24-manifest.json">
3030
<link href="https://cdn.jsdelivr.net/npm/maplibre-gl@5.7.0/dist/maplibre-gl.min.css" rel="stylesheet">
31-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
31+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
3232
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tabulator-tables@6.3.1/dist/css/tabulator.min.css" crossorigin="anonymous">
3333
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tabulator-tables@6.3.1/dist/css/tabulator_bootstrap5.min.css" crossorigin="anonymous">
3434
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css" integrity="sha512-qveKnGrvOChbSzAdtSs8p69eoLegyh+1hwOMbmpCViIwj7rn4oJjdmMvWOuyQlTOZgTlZA0N2PXA7iA8/2TUYA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -74,7 +74,7 @@
7474
<script type="importmap">
7575
{
7676
"imports": {
77-
"bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.esm.min.js",
77+
"bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.esm.min.js",
7878
"d3": "https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm",
7979
"lit": "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js",
8080
"lit": "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js",
@@ -85,7 +85,7 @@
8585
"masonry-layout": "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js",
8686
"noUiSlider": "https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.mjs",
8787
"p5": "https://cdn.jsdelivr.net/npm/p5@2.0.4/lib/p5.esm.min.js",
88-
"p5": "https://cdnjs.cloudflare.com/ajax/libs/p5.js/2.0.3/p5.esm.min.js",
88+
"p5": "https://cdnjs.cloudflare.com/ajax/libs/p5.js/2.0.5/p5.esm.min.js",
8989
"photoswipe": "https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe.esm.min.js",
9090
"photoswipe-lightbox": "https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe-lightbox.esm.min.js",
9191
"photoswipe-dynamic-caption": "https://cdnjs.cloudflare.com/ajax/libs/photoswipe-dynamic-caption-plugin/1.2.7/photoswipe-dynamic-caption-plugin.esm.min.js",
@@ -314,6 +314,22 @@
314314
}
315315
#map {
316316
height: 70vh;
317+
position: relative;
318+
}
319+
320+
.map-loading {
321+
position: absolute;
322+
top: 50%;
323+
left: 50%;
324+
transform: translate(-50%, -50%);
325+
z-index: 1000;
326+
background: rgba(0, 0, 0, 0.8);
327+
color: white;
328+
padding: 1rem;
329+
border-radius: 4px;
330+
display: flex;
331+
align-items: center;
332+
gap: 0.5rem;
317333
}
318334

319335
.maplibregl-map {
@@ -791,6 +807,7 @@ <h2 class="d-none">Race Overview</h2>
791807
style-href="{{ site.baseurl }}/maps/lrr24-map-style.json"
792808
use-station-codes="true"
793809
img-base-path="{{ site.baseurl }}/img/lrr24/"
810+
loading
794811
></relay-map>
795812

796813
</section>
@@ -1077,6 +1094,8 @@ <h2 id="results">Results <a href="#results" class="anchor-link" aria-label="Link
10771094
import {TransitVehicleTracker} from '{{ site.baseurl }}/js/TransitVehicleTracker.js';
10781095
import p5 from 'p5'
10791096
import {WavyScene} from "../js/lrr25/WavyScene.js";
1097+
// Friendly errors have a performance penalty.
1098+
p5.disableFriendlyErrors = true;
10801099

10811100
const apiBaseUrl = "https://api.pugetsound.onebusaway.org/api"
10821101
const routeId = "40_100479"
@@ -1166,6 +1185,9 @@ <h2 id="results">Results <a href="#results" class="anchor-link" aria-label="Link
11661185
map.legs = legs
11671186
map.pois = pois
11681187
document.querySelector("#relay-map").registerLiveArrivalsSource(allExchanges, vehicleMonitor.getArrivalsForStop.bind(vehicleMonitor))
1188+
1189+
// Hide loading indicator once data is loaded
1190+
map.loading = false
11691191
})
11701192

11711193
let startTime = new Date("Sept 27, 2025 8:30:00")
@@ -1190,8 +1212,6 @@ <h2 id="results">Results <a href="#results" class="anchor-link" aria-label="Link
11901212
})*/
11911213

11921214
document.addEventListener('DOMContentLoaded', e => {
1193-
// Friendly errors have a performance penalty.
1194-
p5.disableFriendlyErrors = true;
11951215
const greenGradient = [
11961216
[67, 217, 50],
11971217
[61, 174, 43],

0 commit comments

Comments
 (0)