pages/_includes/scripts/leaflet.liquid
George 1a7fddecf8
Fix code blocks not changing to plots and others (#2497)
For some unknown reason, all the `document.onreadystatechange = () => {`
checks stopped working. Thankfully, replacing them with
`document.addEventListener("readystatechange", () => {` fixed the
issues.

---------

Signed-off-by: George Araujo <george.gcac@gmail.com>
2024-06-11 14:06:38 -03:00

32 lines
1.2 KiB
Plaintext

{% if page.map %}
<script
src="{{ site.third_party_libraries.leaflet.url.js }}"
integrity="{{ site.third_party_libraries.leaflet.integrity.js }}"
crossorigin="anonymous"
></script>
<script>
/* Create leaflet map as another node and hide the code block, appending the leaflet node after it */
document.addEventListener('readystatechange', () => {
if (document.readyState === 'complete') {
document.querySelectorAll('pre>code.language-geojson').forEach((elem) => {
const jsonData = elem.textContent;
const backup = elem.parentElement;
backup.classList.add('unloaded');
/* create leaflet node */
let mapElement = document.createElement('div');
mapElement.classList.add('map');
backup.after(mapElement);
var map = L.map(mapElement);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);
let geoJSON = L.geoJSON(JSON.parse(jsonData)).addTo(map);
map.fitBounds(geoJSON.getBounds());
});
}
});
</script>
{% endif %}