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

feat: migrate mini-map and home map to MapLibre GL

Browse Source
This commit is contained in:
Mischa
2026-06-19 21:49:52 +02:00
parent 87a782ae12
commit b431cfc0ac
2 changed files with 73 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/templates/dailies.html.twig
+29 -30
View File
@@ -34,47 +34,46 @@
<a class="feed-map-link" href="{{ page.parent().url }}/map">View full map →</a>
</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>
<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="{{ url('theme://js/maplibre-utils.js') }}"></script>
<script>
var FEED_ENTRIES = {{ map_entries|json_encode|raw }};
var map = L.map('feed-map', { minZoom: 2, maxZoom: 18, zoomControl: true });
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);
var feedMap = new maplibregl.Map({
container: 'feed-map',
style: MapUtils.MAP_STYLE,
center: [20, 20],
zoom: 2,
cooperativeGestures: true
});
var latLngs = FEED_ENTRIES.map(function(e) { return [parseFloat(e.lat), parseFloat(e.lng)]; });
if (latLngs.length > 1) {
L.polyline(latLngs, { color: '#1F6B5A', weight: 3, opacity: 0.7 }).addTo(map);
}
feedMap.on('load', function () {
var bounds = new maplibregl.LngLatBounds();
var coords = [];
FEED_ENTRIES.forEach(function (entry, i) {
var isLatest = (i === FEED_ENTRIES.length - 1);
var size = isLatest ? 16 : 10;
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 3px rgba(0,0,0,0.35);cursor:pointer;"></div>',
iconSize: [size, size],
iconAnchor: [size/2, size/2]
});
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' }); }
});
var lngLat = [parseFloat(entry.lng), parseFloat(entry.lat)];
coords.push(lngLat);
bounds.extend(lngLat);
var el = MapUtils.createDotMarker(isLatest);
el.addEventListener('click', function () {
window.location.href = entry.url;
});
if (latLngs.length === 1) {
map.setView(latLngs[0], 10);
new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(feedMap);
});
MapUtils.addJourneyLine(feedMap, coords, 'feed-journey');
if (FEED_ENTRIES.length === 1) {
feedMap.jumpTo({ center: coords[0], zoom: 10 });
} else {
map.fitBounds(L.latLngBounds(latLngs), { padding: [20, 20] });
feedMap.fitBounds(bounds, { padding: 20, maxZoom: 11 });
}
setTimeout(function() { map.invalidateSize(); }, 100);
});
</script>
{% endif %}
themes/intotheeast/templates/home.html.twig
+31 -29
View File
@@ -123,47 +123,49 @@
</div>
{% if map_entries|length > 0 %}
<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>
<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="{{ url('theme://js/maplibre-utils.js') }}"></script>
<script>
var HOME_ENTRIES = {{ map_entries|json_encode|raw }};
var map = L.map('home-map', { minZoom: 2, maxZoom: 18, zoomControl: true });
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);
var homeMap = new maplibregl.Map({
container: 'home-map',
style: MapUtils.MAP_STYLE,
center: [20, 20],
zoom: 2,
cooperativeGestures: true
});
var latLngs = HOME_ENTRIES.map(function(e) { return [parseFloat(e.lat), parseFloat(e.lng)]; });
if (latLngs.length > 1) {
L.polyline(latLngs, { color: '#2A8C73', weight: 3, opacity: 0.7 }).addTo(map);
}
homeMap.on('load', function () {
var bounds = new maplibregl.LngLatBounds();
var coords = [];
HOME_ENTRIES.forEach(function (entry, i) {
var isLatest = (i === HOME_ENTRIES.length - 1);
var size = isLatest ? 16 : 10;
var color = isLatest ? '#155244' : '#2A8C73';
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 3px rgba(0,0,0,0.35);cursor:pointer;"></div>',
iconSize: [size, size],
iconAnchor: [size/2, size/2]
});
L.marker([parseFloat(entry.lat), parseFloat(entry.lng)], { icon: icon })
.addTo(map)
.on('click', function() {
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' }); }
});
if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
});
if (latLngs.length === 1) {
map.setView(latLngs[0], 10);
new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(homeMap);
});
MapUtils.addJourneyLine(homeMap, coords, 'home-journey');
if (HOME_ENTRIES.length === 1) {
homeMap.jumpTo({ center: coords[0], zoom: 10 });
} else {
map.fitBounds(L.latLngBounds(latLngs), { padding: [20, 20] });
homeMap.fitBounds(bounds, { padding: 20, maxZoom: 11 });
}
setTimeout(function() { map.invalidateSize(); }, 100);
setTimeout(function () { homeMap.resize(); }, 100);
});
</script>
{% endif %}
{% endblock %}