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

fix: remove cooperativeGestures, increase fitBounds padding, add popups to embedded maps

Browse Source
This commit is contained in:
Mischa
2026-06-19 22:01:54 +02:00
parent a363052f5f
commit f7df6ef37e
4 changed files with 16 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/templates/dailies.html.twig
+5 -7
View File
@@ -44,8 +44,7 @@ var feedMap = new maplibregl.Map({
container: 'feed-map', container: 'feed-map',
style: MapUtils.MAP_STYLE, style: MapUtils.MAP_STYLE,
center: [20, 20], center: [20, 20],
zoom: 2, zoom: 2
cooperativeGestures: true
}); });
feedMap.on('load', function () { feedMap.on('load', function () {
@@ -59,11 +58,10 @@ feedMap.on('load', function () {
bounds.extend(lngLat); bounds.extend(lngLat);
var el = MapUtils.createDotMarker(isLatest); var el = MapUtils.createDotMarker(isLatest);
el.addEventListener('click', function () { var popup = new maplibregl.Popup({ offset: 12, closeButton: false, maxWidth: '200px' })
window.location.href = entry.url; .setHTML('<div style="font-family:var(--font-ui);"><div style="font-size:0.72rem;color:var(--color-ink-muted);margin-bottom:2px;">' + entry.date + '</div><div style="font-weight:600;font-size:0.88rem;color:var(--color-ink);margin-bottom:6px;">' + entry.title + '</div><a href="' + entry.url + '" style="color:var(--color-accent);font-size:0.82rem;text-decoration:none;">Read →</a></div>');
});
new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(feedMap); new maplibregl.Marker({ element: el }).setLngLat(lngLat).setPopup(popup).addTo(feedMap);
}); });
MapUtils.addJourneyLine(feedMap, coords, 'feed-journey'); MapUtils.addJourneyLine(feedMap, coords, 'feed-journey');
@@ -71,7 +69,7 @@ feedMap.on('load', function () {
if (FEED_ENTRIES.length === 1) { if (FEED_ENTRIES.length === 1) {
feedMap.jumpTo({ center: coords[0], zoom: 10 }); feedMap.jumpTo({ center: coords[0], zoom: 10 });
} else { } else {
feedMap.fitBounds(bounds, { padding: 20, maxZoom: 11 }); feedMap.fitBounds(bounds, { padding: 60, maxZoom: 11 });
} }
}); });
</script> </script>
themes/intotheeast/templates/home.html.twig
+5 -8
View File
@@ -133,8 +133,7 @@ var homeMap = new maplibregl.Map({
container: 'home-map', container: 'home-map',
style: MapUtils.MAP_STYLE, style: MapUtils.MAP_STYLE,
center: [20, 20], center: [20, 20],
zoom: 2, zoom: 2
cooperativeGestures: true
}); });
homeMap.on('load', function () { homeMap.on('load', function () {
@@ -148,12 +147,10 @@ homeMap.on('load', function () {
bounds.extend(lngLat); bounds.extend(lngLat);
var el = MapUtils.createDotMarker(isLatest); var el = MapUtils.createDotMarker(isLatest);
el.addEventListener('click', function () { var popup = new maplibregl.Popup({ offset: 12, closeButton: false, maxWidth: '200px' })
var card = document.getElementById('entry-' + entry.slug); .setHTML('<div style="font-family:var(--font-ui);"><div style="font-size:0.72rem;color:var(--color-ink-muted);margin-bottom:2px;">' + entry.date + '</div><div style="font-weight:600;font-size:0.88rem;color:var(--color-ink);margin-bottom:6px;">' + entry.title + '</div><a href="' + entry.url + '" style="color:var(--color-accent);font-size:0.82rem;text-decoration:none;">Read →</a></div>');
if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
});
new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(homeMap); new maplibregl.Marker({ element: el }).setLngLat(lngLat).setPopup(popup).addTo(homeMap);
}); });
MapUtils.addJourneyLine(homeMap, coords, 'home-journey'); MapUtils.addJourneyLine(homeMap, coords, 'home-journey');
@@ -161,7 +158,7 @@ homeMap.on('load', function () {
if (HOME_ENTRIES.length === 1) { if (HOME_ENTRIES.length === 1) {
homeMap.jumpTo({ center: coords[0], zoom: 10 }); homeMap.jumpTo({ center: coords[0], zoom: 10 });
} else { } else {
homeMap.fitBounds(bounds, { padding: 20, maxZoom: 11 }); homeMap.fitBounds(bounds, { padding: 60, maxZoom: 11 });
} }
setTimeout(function () { homeMap.resize(); }, 100); setTimeout(function () { homeMap.resize(); }, 100);
themes/intotheeast/templates/map.html.twig
+1 -1
View File
@@ -114,7 +114,7 @@ map.on('load', function () {
if (ENTRIES.length === 1) { if (ENTRIES.length === 1) {
map.jumpTo({ center: coords[0], zoom: 10 }); map.jumpTo({ center: coords[0], zoom: 10 });
} else { } else {
map.fitBounds(bounds, { padding: 60, maxZoom: 11 }); map.fitBounds(bounds, { padding: 100, maxZoom: 11 });
} }
}); });
</script> </script>
themes/intotheeast/templates/trip.html.twig
+5 -8
View File
@@ -214,8 +214,7 @@ var tripMap = new maplibregl.Map({
container: 'trip-map', container: 'trip-map',
style: MapUtils.MAP_STYLE, style: MapUtils.MAP_STYLE,
center: [20, 20], center: [20, 20],
zoom: 2, zoom: 2
cooperativeGestures: true
}); });
tripMap.on('load', function () { tripMap.on('load', function () {
@@ -251,12 +250,10 @@ tripMap.on('load', function () {
bounds.extend(lngLat); bounds.extend(lngLat);
var el = MapUtils.createDotMarker(isLatest); var el = MapUtils.createDotMarker(isLatest);
el.addEventListener('click', function () { var popup = new maplibregl.Popup({ offset: 12, closeButton: false, maxWidth: '200px' })
var card = document.getElementById('entry-' + entry.slug); .setHTML('<div style="font-family:var(--font-ui);"><div style="font-size:0.72rem;color:var(--color-ink-muted);margin-bottom:2px;">' + entry.date + '</div><div style="font-weight:600;font-size:0.88rem;color:var(--color-ink);margin-bottom:6px;">' + entry.title + '</div><a href="' + entry.url + '" style="color:var(--color-accent);font-size:0.82rem;text-decoration:none;">Read →</a></div>');
if (card) { card.scrollIntoView({ behavior: 'smooth', block: 'center' }); }
});
new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(tripMap); new maplibregl.Marker({ element: el }).setLngLat(lngLat).setPopup(popup).addTo(tripMap);
}); });
MapUtils.addJourneyLine(tripMap, coords, 'trip-journey'); MapUtils.addJourneyLine(tripMap, coords, 'trip-journey');
@@ -264,7 +261,7 @@ tripMap.on('load', function () {
if (TRIP_ENTRIES.length === 1) { if (TRIP_ENTRIES.length === 1) {
tripMap.jumpTo({ center: coords[0], zoom: 10 }); tripMap.jumpTo({ center: coords[0], zoom: 10 });
} else { } else {
tripMap.fitBounds(bounds, { padding: 20, maxZoom: 11 }); tripMap.fitBounds(bounds, { padding: 60, maxZoom: 11 });
} }
}); });
setTimeout(function () { tripMap.resize(); }, 100); setTimeout(function () { tripMap.resize(); }, 100);