leaflet transition clientrouter | Astro Lounge | Page 1

cerulean nexus Dec 1, 2024, 9:28 AM

#

i am not a java script person. please point out what iI am doing here ; map gets loaded fine if i do a manual refesh with Ctrl+R . No error on console.

import "@/styles/global.css";
import { ClientRouter } from "astro:transitions";
---
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <ClientRouter />
    <link rel="stylesheet" href="/leaflet/leaflet.css" />

    <script is:inline src="/leaflet/leaflet.js" defer></script>
 
  </head>
  <body>
    <div id="map" class="h-128 w-full border border-gray-300"></div> 
</body>
<script is:inline>
  if (!window.mapInstance) {
    window.mapInstance = null; 
  }
  function leafletmap() {
    const mapContainer = document.getElementById("map");
    if (mapContainer) {
      if (window.mapInstance) {

        window.mapInstance.remove();
      }
      const tiles = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>',
      });

      // Create the map
      window.mapInstance = L.map("map", {
        center: [39.42752947035746, 35.60132306248704],
        zoom: 2,
        layers: [tiles],
        
      });


    }
  }
  function cleanupMap() {
    if (window.mapInstance) {
      window.mapInstance.remove();
      window.mapInstance = null; 
    }
  }
  window.addEventListener('load', () => {
    if (document.getElementById("map")) {
      leafletmap();
    }
  });
document.addEventListener("astro:after-swap", () => {
    if (document.getElementById("map")) {
      leafletmap();
    }
  });
  document.addEventListener("astro:before-swap", cleanupMap);
</script>
</html>

mild gust Dec 1, 2024, 10:50 AM

#

Hi there!
What you wanna do is the following:

---
import "@/styles/global.css";
import { ClientRouter } from "astro:transitions";
---
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <ClientRouter />
    <link rel="stylesheet" href="/leaflet/leaflet.css" />

    <script is:inline src="/leaflet/leaflet.js" defer></script>
 
  </head>
  <body>
    <div id="map" class="h-128 w-full border border-gray-300"></div> 
  </body>
  <script is:inline>
    if (!window.mapInstance) {
      window.mapInstance = null; 
    }

    function leafletmap() {
      const mapContainer = document.getElementById("map");
      if (mapContainer) {
        if (window.mapInstance) {
          window.mapInstance.remove();
        }
        const tiles = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>',
        });
  
        // Create the map
        window.mapInstance = L.map("map", {
          center: [39.42752947035746, 35.60132306248704],
          zoom: 2,
          layers: [tiles],
        });
      }
    }

    function cleanupMap() {
      if (window.mapInstance) {
        window.mapInstance.remove();
        window.mapInstance = null; 
      }
    }

    // The astro:page-load event triggers when a page is normally loaded or once a view transition has completed
    document.addEventListener('astro:page-load', () => {
      if (document.getElementById("map")) {
        leafletmap();
      }
    });

    // This is correct
    document.addEventListener("astro:before-swap", cleanupMap);
  </script>
</html>

#

You had the right idea with the load listener, however, that doesn't trigger with the <ClientRouter />. Instead, you need the astro:page-load event!

#

The reason astro:after-swap didn't work is because iirc it's too early

cerulean nexus Dec 1, 2024, 1:59 PM

#

Thanks @mild gust

I have a follow up question if I am trying to load https://github.com/torfsen/leaflet.zoomhome

withing the leafletmap function
like this
if (typeof L !== "undefined" && typeof L.Control.zoomHome !== "undefined") { L.Control.zoomHome({ position: "topleft" }).addTo(window.mapInstance); } else { console.error("Zoom Home control is not available. Ensure the plugin is loaded."); }
I get this error which goes away when i refresh the page ( so suspect it is another transition/clientrouter ) issue
how to handle that

error

    at leaflet.zoomhome.js:4:5
    at leaflet.zoomhome.js:117:2

VM95:41 Zoom Home control is not available. Ensure the plugin is loaded.
leafletmap    @    VM95:41```

GitHub

GitHub - torfsen/leaflet.zoomhome: A Leaflet zoom control with a ho...

A Leaflet zoom control with a home button for resetting the view. - torfsen/leaflet.zoomhome

mild gust Dec 1, 2024, 2:05 PM

#

Can you show me how you're importing the script for the controls library?

cerulean nexus Dec 1, 2024, 2:32 PM

#

    if (!window.mapInstance) {
      window.mapInstance = null; 
    }

    function leafletmap() {
      const mapContainer = document.getElementById("map");
      if (mapContainer) {
        if (window.mapInstance) {
          window.mapInstance.remove();
        }
        const tiles = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>',
        });
  
        // Create the map
        window.mapInstance = L.map("map", {
          center: [39.42752947035746, 35.60132306248704],
          zoom: 2,
          layers: [tiles],
          worldCopyJump: false,
          zoomControl: false

        });

      // Add custom zoom control
            if (typeof L !== "undefined" && typeof L.Control.zoomHome !== "undefined") {
        L.Control.zoomHome({ position: "topleft" }).addTo(window.mapInstance);
      } else {
        console.error("Zoom Home control is not available. Ensure the plugin is loaded.");
      }
      }
    }
// end of leaflet function
    function cleanupMap() {
      if (window.mapInstance) {
        window.mapInstance.remove();
        window.mapInstance = null; 
      }
    }

    // The astro:page-load event triggers when a page is normally loaded or once a view transition has completed
    document.addEventListener('astro:page-load', () => {
      if (document.getElementById("map")) {
        leafletmap();
      }
    });

    // This is correct
    document.addEventListener("astro:before-swap", cleanupMap);
  </script>```

added   <script is:inline src="/leaflet/leaflet.zoomhome.js"></script> in the head after leafletjs line

@mild gust this is what did

mild gust Dec 1, 2024, 5:25 PM

#

How are you importing leaflet? Also via a script tag?

cerulean nexus Dec 2, 2024, 4:05 AM

#

@louis yes <script is:inline src="/leaflet/leaflet.js" defer></script>

Itried adding defer to both the script tag ; only to leaflet.js (defer)

but no luck

mild gust Dec 2, 2024, 5:12 AM

#

You've got to make sure that leaflet is loaded before the plugin, have the scripts like this:

<script is:inline src="/leaflet/leaflet.js" />
<script is:inline src="/leaflet/leaflet.zoomhome.js" />

Make sure that leaflet is above like this

#leaflet transition clientrouter