fix(where): init Leaflet map on window load to fix size calculation on reload
Leaflet reads offsetWidth/offsetHeight during init. When the inline IIFE
ran during HTML parsing, the container's computed size wasn't final yet,
causing fitBounds to position the map in a tiny corner. Wrapping in
window.addEventListener('load') ensures full layout before map init.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -38,7 +38,7 @@ leafletMap: true
|
|||||||
var checkinPoints = {{ mapPoints | dump | safe }};
|
var checkinPoints = {{ mapPoints | dump | safe }};
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
(function() {
|
window.addEventListener('load', function() {
|
||||||
L.Icon.Default.mergeOptions({
|
L.Icon.Default.mergeOptions({
|
||||||
iconUrl: '/css/images/marker-icon.png',
|
iconUrl: '/css/images/marker-icon.png',
|
||||||
iconRetinaUrl: '/css/images/marker-icon-2x.png',
|
iconRetinaUrl: '/css/images/marker-icon-2x.png',
|
||||||
@@ -65,7 +65,7 @@ leafletMap: true
|
|||||||
markers.forEach(function(m) { cluster.addLayer(m); });
|
markers.forEach(function(m) { cluster.addLayer(m); });
|
||||||
map.addLayer(cluster);
|
map.addLayer(cluster);
|
||||||
map.fitBounds(cluster.getBounds().pad(0.2), { maxZoom: 13 });
|
map.fitBounds(cluster.getBounds().pad(0.2), { maxZoom: 13 });
|
||||||
})();
|
});
|
||||||
</script>
|
</script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user