Damn that's an amazing tutorial 🔥 would love to see a complete Leaflet + Sveltekit project tutorial

what the heck, very well made video 😅

Off to play Dave the Diver^^

Awesome video! ❤

Thank you for the tutorial, was helpful and funny to watch, Grüße aus Deutschland 😁

Feedback was the fun part, lol😍

So this is what generative content looks like when done right?! Some of the part in making the video I assume.

@ShipBit

10 ай бұрын

Thanks and yes: The voices are generated with #11labs, the rest is all manual work. We really wanted to try out how much "personality" you can generate with these AI voices.

Nice video! I'm new to Svelte and i'm still learning; in this case how can i add leaflet plugin (like leaflet marker cluster) to this project? I'm trying but with no success.

@ShipBit

9 ай бұрын

I've actually used the leaflet.markercluster plugin in the past with Svelte and it works fine. The basic structure is just like as described in the video. In your new MarkerCluster component, you import the plugin like this: using import 'leaflet.markercluster'; and then you create a group and add your markers to it: markerClusterGroup = L.markerClusterGroup(); markerClusterGroup.addLayer(markers).addTo(map); Hold a reference to the markerClusterGroup variable and then you can reset and control it anywhere in your component, even in reactive expressions.

Hi, nice video! What's the map at 0:54 ? I like the color scheme

@shackyalla

4 ай бұрын

It’s a b&w map and some video editing / color grading. sorry…

Idk if anyone has tried this but I've run into a pretty big issue - in the child Marker class, when calling getContext('map') to get the map object that should be set by the parent Leaflet component, it is always undefined. I guess the onMount() of the parent Leaflet component takes some amount of time to execute before the map object is actually set & in this time the child has already tried calling for that context value. Luckily for my use case, markers will come from API calls so the map will already be rendered and then when the children are added the map object will exist, but if you have marker objects up-front at "compile" time for svelte, idk how you're getting them to render properly.

@ShipBit

9 ай бұрын

Do you have a repository to reproduce this? Afaik the "plain" code inside of a component should execute before the onMount function is called. That's why you have to call setContext on the top-level of a component. I'd be happy to take a look in a repro-repo.

@davenash1547

6 ай бұрын

I had this same trouble, until I found that I hadn't properly closed my Leaflet element (with after adding the slotted elements). @ShipBit, great video. Thanks!

😂 AI also loving Svelte

I think you have great potential as a teacher and there is still space in the svelte creators area

@ShipBit

9 ай бұрын

Thank you! We'd love to create more content in the future.