Skip to content

Commit e980474

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 f110445 commit e980474

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/maplibre-gl@4.7.1/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)