feat: migrate full map page to MapLibre GL with animated journey line
This commit is contained in:
@@ -34,73 +34,88 @@
|
||||
|
||||
<div class="map-container" id="trip-map"></div>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/leaflet-gpx@2.1.2/gpx.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.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>
|
||||
var ENTRIES = {{ map_entries|json_encode|raw }};
|
||||
var ENTRIES = {{ map_entries|json_encode|raw }};
|
||||
var GPX_URLS = {{ gpx_urls|json_encode|raw }};
|
||||
|
||||
var map = L.map('trip-map', { minZoom: 2, maxZoom: 18 });
|
||||
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
|
||||
maxZoom: 20,
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>'
|
||||
}).addTo(map);
|
||||
|
||||
// GPX route tracks
|
||||
const gpxUrls = {{ gpx_urls|json_encode|raw }};
|
||||
gpxUrls.forEach(url => {
|
||||
new L.GPX(url, {
|
||||
async: true,
|
||||
polyline_options: { color: '#1F6B5A', weight: 2, opacity: 0.7 },
|
||||
marker_options: { startIconUrl: null, endIconUrl: null, shadowUrl: null }
|
||||
}).addTo(map);
|
||||
var map = new maplibregl.Map({
|
||||
container: 'trip-map',
|
||||
style: MapUtils.MAP_STYLE,
|
||||
center: [20, 20],
|
||||
zoom: 2
|
||||
});
|
||||
|
||||
map.addControl(new maplibregl.NavigationControl(), 'top-right');
|
||||
|
||||
if (ENTRIES.length === 0) {
|
||||
map.setView([20, 0], 2);
|
||||
var emptyDiv = document.createElement('div');
|
||||
emptyDiv.className = 'map-empty';
|
||||
emptyDiv.textContent = 'No locations yet — entries with GPS will appear here.';
|
||||
document.getElementById('trip-map').appendChild(emptyDiv);
|
||||
} else {
|
||||
var latLngs = ENTRIES.map(function(e) { return [parseFloat(e.lat), parseFloat(e.lng)]; });
|
||||
var empty = document.createElement('div');
|
||||
empty.className = 'map-empty';
|
||||
empty.textContent = 'No locations yet — entries with GPS will appear here.';
|
||||
document.getElementById('trip-map').appendChild(empty);
|
||||
}
|
||||
|
||||
// Route polyline
|
||||
L.polyline(latLngs, { color: '#1F6B5A', weight: 3, opacity: 0.7 }).addTo(map);
|
||||
|
||||
// Markers
|
||||
ENTRIES.forEach(function(entry, i) {
|
||||
var isLatest = (i === ENTRIES.length - 1);
|
||||
var size = isLatest ? 18 : 12;
|
||||
var color = isLatest ? '#155244' : '#1F6B5A';
|
||||
|
||||
var icon = L.divIcon({
|
||||
className: '',
|
||||
html: '<div style="width:' + size + 'px;height:' + size + 'px;background:' + color + ';border:2px solid #fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,0.4);' + (isLatest ? 'box-shadow:0 0 0 3px rgba(31,107,90,0.3),0 1px 4px rgba(0,0,0,0.4);' : '') + '"></div>',
|
||||
iconSize: [size, size],
|
||||
iconAnchor: [size/2, size/2],
|
||||
popupAnchor: [0, -(size/2 + 4)]
|
||||
});
|
||||
|
||||
var popupContent = '<div style="font-family:-apple-system,sans-serif;width:180px;">';
|
||||
if (entry.hero) {
|
||||
popupContent += '<img src="' + entry.hero + '" style="width:100%;height:100px;object-fit:cover;border-radius:4px;display:block;margin-bottom:8px;" alt="">';
|
||||
}
|
||||
popupContent += '<div style="font-size:0.75rem;color:#666;margin-bottom:2px;">📅 ' + entry.date + '</div>';
|
||||
popupContent += '<div style="font-weight:600;font-size:0.9rem;margin-bottom:8px;">' + entry.title + '</div>';
|
||||
popupContent += '<a href="' + entry.url + '" style="color:#1F6B5A;font-size:0.85rem;text-decoration:none;">Read entry →</a>';
|
||||
popupContent += '</div>';
|
||||
|
||||
L.marker([parseFloat(entry.lat), parseFloat(entry.lng)], { icon: icon })
|
||||
.addTo(map)
|
||||
.bindPopup(popupContent, { maxWidth: 200 });
|
||||
map.on('load', function () {
|
||||
/* ── GPX tracks ──────────────────────────────────────────── */
|
||||
GPX_URLS.forEach(function (url, idx) {
|
||||
fetch(url)
|
||||
.then(function (r) { return r.text(); })
|
||||
.then(function (text) {
|
||||
var xml = new DOMParser().parseFromString(text, 'text/xml');
|
||||
var geojson = toGeoJSON.gpx(xml);
|
||||
var sid = 'gpx-' + idx;
|
||||
map.addSource(sid, { type: 'geojson', data: geojson });
|
||||
map.addLayer({
|
||||
id: sid + '-line', type: 'line', source: sid,
|
||||
layout: { 'line-join': 'round', 'line-cap': 'round' },
|
||||
paint: { 'line-color': MapUtils.ACCENT, 'line-width': 2, 'line-opacity': 0.7 }
|
||||
});
|
||||
})
|
||||
.catch(function (err) { console.warn('GPX load failed:', url, err); });
|
||||
});
|
||||
|
||||
// Fit bounds with padding
|
||||
var bounds = L.latLngBounds(latLngs);
|
||||
map.fitBounds(bounds, { padding: [40, 40] });
|
||||
}
|
||||
if (ENTRIES.length === 0) return;
|
||||
|
||||
/* ── Markers ─────────────────────────────────────────────── */
|
||||
var bounds = new maplibregl.LngLatBounds();
|
||||
var coords = [];
|
||||
|
||||
ENTRIES.forEach(function (entry, i) {
|
||||
var isLatest = (i === ENTRIES.length - 1);
|
||||
var lngLat = [parseFloat(entry.lng), parseFloat(entry.lat)];
|
||||
coords.push(lngLat);
|
||||
bounds.extend(lngLat);
|
||||
|
||||
var el = MapUtils.createDotMarker(isLatest);
|
||||
|
||||
var popupHtml = '<div style="min-width:160px;max-width:200px;">';
|
||||
if (entry.hero) {
|
||||
popupHtml += '<img src="' + entry.hero + '" alt="" style="width:100%;height:80px;object-fit:cover;border-radius:4px;display:block;margin-bottom:8px;">';
|
||||
}
|
||||
popupHtml += '<div style="font-size:0.75rem;color:var(--color-ink-muted);margin-bottom:2px;">📅 ' + entry.date + '</div>';
|
||||
popupHtml += '<div style="font-weight:600;font-size:0.9rem;margin-bottom:8px;color:var(--color-ink);">' + entry.title + '</div>';
|
||||
popupHtml += '<a href="' + entry.url + '" style="color:var(--color-accent);font-size:0.85rem;text-decoration:none;">Read entry →</a>';
|
||||
popupHtml += '</div>';
|
||||
|
||||
new maplibregl.Marker({ element: el })
|
||||
.setLngLat(lngLat)
|
||||
.setPopup(new maplibregl.Popup({ offset: 10, maxWidth: '220px' }).setHTML(popupHtml))
|
||||
.addTo(map);
|
||||
});
|
||||
|
||||
/* ── Journey line ────────────────────────────────────────── */
|
||||
MapUtils.addJourneyLine(map, coords, 'journey');
|
||||
|
||||
/* ── Fit bounds ──────────────────────────────────────────── */
|
||||
if (ENTRIES.length === 1) {
|
||||
map.jumpTo({ center: coords[0], zoom: 10 });
|
||||
} else {
|
||||
map.fitBounds(bounds, { padding: 60, maxZoom: 11 });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user