Skip to content

Commit 55db8da

Browse files
nickswalkernickswalker
committed
Update route map styles
Bake custom layers in with openfreemap base style Make map display bigger by default Add filters bar to route search
1 parent 8f72217 commit 55db8da

File tree

6 files changed

+7131
-126
lines changed

6 files changed

+7131
-126
lines changed

‎_layouts/base.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,14 +68,14 @@
6868
</head>
6969
<body>
7070

71-
<header class="container">
72-
<a href="/" class="text-body d-flex flex-wrap align-content-end justify-content-between">
71+
<header class="container constrain-width">
72+
<a href="/" class="text-body d-flex flex-wrap align-content-end justify-content-center justify-content-sm-between">
7373
<h2 class="align-self-center">Race Condition Running</h2>
7474
<img src='{{ site.baseurl }}/img/rcc-logo.png' width='150' alt='RCC Logo'>
7575
</a>
7676
</header>
7777

78-
<nav class="navbar navbar-expand-sm mb-4 container" role="navigation">
78+
<nav class="navbar navbar-expand-sm mb-4 container constrain-width" role="navigation">
7979
<div class="container">
8080
<ul class="navbar-nav justify-content-between">
8181
<li class="nav-item"><a href="{% link index.html %}"{% if page.url == "/" %} class="active"{% endif %}>Schedule</a></li>

‎_layouts/default.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: base
33
---
4-
<div class="container">
4+
<div class="container constrain-width">
55
{% if page.add_h1 %}<h1 class="visually-hidden">{{ page.title }}</h1>{% endif %}
66
{{ content }}
77
</div>

‎_layouts/route.html

Lines changed: 36 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
layout: default
2+
layout: base
33
---
44
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.css" integrity="sha256-V2sIX92Uh6ZaGSFTKMHghsB85b9toJtmazgG09AI2uk=" crossorigin="anonymous">
55

6-
<div class="route">
6+
<div class="route container">
77
<h1 title="{{ page.id }}" class="mb-0 h2">{{ page.title }}</h1>
88
{% assign ascent_ft = page.ascent_m | times: 3.28084 %}
99
{% assign descent_ft = page.descent_m | times: 3.28084 %}
@@ -12,9 +12,8 @@ <h3 class="h5"><span title="{{ page.distance_mi | times: 1.609 | round: 1}}km">{
1212
<a class="btn btn-sm btn-outline-primary" href="{{ page.gpx | relative_url }}" data-goatcounter-click="download-{{ page.id }}">Download GPX</a> {% if page.map %}<a class="btn btn-sm btn-outline-primary" href="{{page.map}}" data-goatcounter-click="ext-map-{{ page.id }}">OnTheGoMap</a>{% endif %}
1313
</div>
1414
<h2 class="visually-hidden">Map</h2>
15-
<div id="map" style="height: 500px;" class="mb-3 w-100"></div>
15+
<div id="map" class="mb-3 w-100"></div>
1616
<elevation-profile class="mb-3"></elevation-profile>
17-
1817
<div><b>Start:</b> {{ page.start }} {% for location in site.data.locations.features %}
1918
{% if location.properties.id == page.start and location.properties.meeting_point_desc %}
2019
<span class="text-secondary ms-1">{{ location.properties.meeting_point_desc }}</span>
@@ -61,6 +60,10 @@ <h2 class="visually-hidden">Map</h2>
6160
</div>
6261

6362
<style>
63+
#map {
64+
height: 60vh;
65+
min-height: 500px;
66+
}
6467
elevation-profile {
6568
--ep-fill-color: darkgray;
6669
--ep-line-color: #ccc;
@@ -147,47 +150,15 @@ <h2 class="visually-hidden">Map</h2>
147150
return bounds.extend(coord);
148151
}, new maplibregl.LngLatBounds(coordinates[0], coordinates[0]));
149152
const map = new maplibregl.Map({
150-
style: 'https://tiles.openfreemap.org/styles/liberty',
153+
style: '{{ site.baseurl }}/maps/route-map-style.json',
151154
container: 'map',
152155
zoom: 9.5,
153156
center: [-122.3321, 47.6062],
154157
bounds: bounds,
155158
fitBoundsOptions: {padding: 50, animate: false}
156159
});
157160
map.on('load', function () {
158-
159-
map.addSource('route', {
160-
'type': 'geojson',
161-
'data': data
162-
});
163-
map.addLayer({
164-
'id': 'route',
165-
'type': 'line',
166-
'source': 'route',
167-
'layout': {
168-
'line-join': 'round',
169-
'line-cap': 'round'
170-
},
171-
'paint': {
172-
'line-color': 'rgba(0, 0, 255, 0.6)',
173-
'line-width': 3
174-
}
175-
});
176-
map.addLayer({
177-
'id': 'route-hover-region',
178-
'type': 'line',
179-
'source': 'route',
180-
'layout': {
181-
'line-join': 'round',
182-
'line-cap': 'round'
183-
},
184-
'paint': {
185-
'line-color': 'rgba(0, 0, 255, 0)',
186-
'line-width': 10
187-
}
188-
});
189-
190-
161+
map.getSource('route').setData(data);
191162
// Frame the route
192163

193164
let totalDistance = 0
@@ -213,91 +184,37 @@ <h2 class="visually-hidden">Map</h2>
213184
}
214185
}
215186

216-
map.addSource('terrain_rgb', {
217-
type: 'raster-dem',
218-
url: 'pmtiles://https://static.raceconditionrunning.com/seattle_dem.pmtiles',
219-
tileSize: 512
220-
});
221-
map.addLayer({
222-
id: 'terrain_rgb',
223-
type: 'hillshade',
224-
source: 'terrain_rgb',
225-
minzoom: 0,
226-
maxzoom: 12
227-
});
228-
map.setTerrain({source: 'terrain_rgb', exaggeration: 2.0})
229-
map.addSource('distance-labels', {
230-
type: 'geojson',
231-
data: {
232-
type: 'FeatureCollection',
233-
features: distanceLabels
234-
}
235-
})
236-
map.addLayer({
237-
'id': 'distance-labels',
238-
'type': 'symbol',
239-
'source': 'distance-labels',
240-
"minzoom": 9,
241-
"layout": {
242-
"text-field": ["to-string", ["get", "distance"]],
243-
"text-font": ["Noto Sans Regular"],
244-
"text-size": {
245-
"stops": [
246-
[9, 10],
247-
[10, 11],
248-
[16, 18]
249-
]
250-
},
251-
"text-padding": 4,
252-
"text-justify": "center"
253-
},
254-
"paint": {
255-
"text-color": "#FFF",
256-
"text-halo-color": "rgba(0, 0, 0, 0.8)",
257-
"text-halo-width": 2
258-
}
259-
})
187+
map.getSource('distance-labels').setData({
188+
type: 'FeatureCollection',
189+
features: distanceLabels
190+
});
191+
260192

261-
map.addSource('points', {
262-
type: 'geojson',
263-
data: {
264-
type: 'FeatureCollection',
265-
features: [
266-
{
267-
type: 'Feature',
268-
geometry: {
269-
type: 'Point',
270-
coordinates: coordinates[0]
271-
},
272-
properties: {
273-
color: '#00FF00'
274-
}
193+
map.getSource('points').setData({
194+
type: 'FeatureCollection',
195+
features: [
196+
{
197+
type: 'Feature',
198+
geometry: {
199+
type: 'Point',
200+
coordinates: coordinates[0]
275201
},
276-
{
277-
type: 'Feature',
278-
geometry: {
279-
type: 'Point',
280-
coordinates: coordinates[coordinates.length - 1]
281-
},
282-
properties: {
283-
color: '#FF0000'
284-
}
202+
properties: {
203+
color: '#00FF00'
285204
}
286-
]
287-
}
288-
});
205+
},
206+
{
207+
type: 'Feature',
208+
geometry: {
209+
type: 'Point',
210+
coordinates: coordinates[coordinates.length - 1]
211+
},
212+
properties: {
213+
color: '#FF0000'
214+
}
215+
}
216+
]
289217

290-
map.addLayer({
291-
id: "colored-dots",
292-
type: "circle",
293-
source: "points",
294-
paint: {
295-
"circle-color": ["get", "color"],
296-
"circle-radius": 5,
297-
"circle-opacity": 0.8,
298-
"circle-stroke-color": "#000",
299-
"circle-stroke-width": 1
300-
}
301218
});
302219

303220
// Create a popup, but don't add it to the map yet.

‎css/style.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
body {
66
margin: 1rem auto;
77
}
8-
body .container {
8+
.constrain-width {
99
max-width: 750px;
10-
}
10+
}
1111
h1 {
1212
padding-top: .5rem
1313
}

0 commit comments

Comments
 (0)