m038/intotheeast-com-content
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: migrate trip overview map to MapLibre GL (removes last Leaflet reference)

Browse Source
This commit is contained in:
Mischa
2026-06-19 21:57:12 +02:00
parent b431cfc0ac
commit a363052f5f
1 changed files with 58 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/templates/trip.html.twig
+58 -40
View File
@@ -202,54 +202,72 @@
</div> </div>
</div> </div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-gpx@2.1.2/gpx.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@mapbox/togeojson@0.16.2/togeojson.min.js"></script>
<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
<script> <script>
var TRIP_ENTRIES = {{ map_entries|json_encode|raw }}; var TRIP_ENTRIES = {{ map_entries|json_encode|raw }};
var GPX_URLS = {{ gpx_urls|json_encode|raw }}; var GPX_URLS = {{ gpx_urls|json_encode|raw }};
var map = L.map('trip-map', { minZoom: 2, maxZoom: 18, zoomControl: true }); var tripMap = new maplibregl.Map({
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { container: 'trip-map',
maxZoom: 20, style: MapUtils.MAP_STYLE,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>' center: [20, 20],
}).addTo(map); zoom: 2,
cooperativeGestures: true
GPX_URLS.forEach(function(url) {
new L.GPX(url, {
async: true,
polyline_options: { color: '#1F6B5A', weight: 2, opacity: 0.6 },
marker_options: { startIconUrl: null, endIconUrl: null, shadowUrl: null }
}).addTo(map);
}); });
if (TRIP_ENTRIES.length === 0) { tripMap.on('load', function () {
map.setView([20, 0], 2); GPX_URLS.forEach(function (url, idx) {
} else { fetch(url)
var latLngs = TRIP_ENTRIES.map(function(e) { return [parseFloat(e.lat), parseFloat(e.lng)]; }); .then(function (r) { return r.text(); })
L.polyline(latLngs, { color: '#2A8C73', weight: 3, opacity: 0.7 }).addTo(map); .then(function (text) {
var xml = new DOMParser().parseFromString(text, 'text/xml');
TRIP_ENTRIES.forEach(function(entry, i) { var geojson = toGeoJSON.gpx(xml);
var isLatest = (i === TRIP_ENTRIES.length - 1); var sid = 'gpx-' + idx;
var size = isLatest ? 16 : 10; tripMap.addSource(sid, { type: 'geojson', data: geojson });
var color = isLatest ? '#155244' : '#1F6B5A'; tripMap.addLayer({
var icon = L.divIcon({ id: sid + '-line', type: 'line', source: sid,
className: '', layout: { 'line-join': 'round', 'line-cap': 'round' },
html: '<div style="width:' + size + 'px;height:' + size + 'px;background:' + color + ';border:2px solid #fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,0.35);cursor:pointer;"></div>', paint: { 'line-color': MapUtils.ACCENT, 'line-width': 2, 'line-opacity': 0.7 }
iconSize: [size, size], });
iconAnchor: [size/2, size/2] })
}); .catch(function (err) { console.warn('GPX load failed:', url, err); });
L.marker([parseFloat(entry.lat), parseFloat(entry.lng)], { icon: icon })
.addTo(map)
.on('click', function() {
var card = document.getElementById('entry-' + entry.slug);
if (card) { card.scrollIntoView({ behavior: 'smooth', block: 'center' }); }
});
}); });
map.fitBounds(L.latLngBounds(latLngs), { padding: [20, 20] }); if (TRIP_ENTRIES.length === 0) {
} tripMap.jumpTo({ center: [0, 20], zoom: 2 });
setTimeout(function() { map.invalidateSize(); }, 100); return;
}
var bounds = new maplibregl.LngLatBounds();
var coords = [];
TRIP_ENTRIES.forEach(function (entry, i) {
var isLatest = (i === TRIP_ENTRIES.length - 1);
var lngLat = [parseFloat(entry.lng), parseFloat(entry.lat)];
coords.push(lngLat);
bounds.extend(lngLat);
var el = MapUtils.createDotMarker(isLatest);
el.addEventListener('click', function () {
var card = document.getElementById('entry-' + entry.slug);
if (card) { card.scrollIntoView({ behavior: 'smooth', block: 'center' }); }
});
new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(tripMap);
});
MapUtils.addJourneyLine(tripMap, coords, 'trip-journey');
if (TRIP_ENTRIES.length === 1) {
tripMap.jumpTo({ center: coords[0], zoom: 10 });
} else {
tripMap.fitBounds(bounds, { padding: 20, maxZoom: 11 });
}
});
setTimeout(function () { tripMap.resize(); }, 100);
(function() { (function() {
var filterBtns = document.querySelectorAll('.trip-filter-btn'); var filterBtns = document.querySelectorAll('.trip-filter-btn');