Sveltejs Academy · Lektion

Leaflet-kartor med Svelte Actions

Initiera och styr en Leaflet-kartinstans genom en Svelte-action.

Lektion 3 av 413 steg

Leaflet-kartor med Svelte Actions är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Varför Leaflet

Leaflet är ett litet, moget kartbibliotek med öppen källkod som fungerar bra med Svelte.

Installera

Lägg till Leaflet och dess CSS.

npm install leaflet
@import "leaflet/dist/leaflet.css";

Action-mönstret

Kapsla in initieringen av Leaflet i en Svelte-action.

export function leafletMap(node, options) {
  const map = L.map(node).setView(options.center, options.zoom);
  L.tileLayer("https://...{z}/{x}/{y}.png").addTo(map);
  return { destroy() { map.remove(); } };
}

Använd i en komponent

Tillämpa actionen på en div.

<div use:leafletMap={{ center: [40, 30], zoom: 12 }} style="height: 400px;" />

Uppdatering

Returnera en update-funktion som reagerar på parameterändringar.

update(newOptions) { map.setView(newOptions.center, newOptions.zoom); }

Markörer

Lägg till markörer programmatiskt eller i en underkomponent i Svelte som delar kontext.

Rensning

Anropa alltid map.remove() i destroy för att frigöra resurser.

SSR-begränsning

Leaflet använder window/document. Skydda åtkomsten med onMount eller ange ssr = false.

Kakelleverantörer

Välj leverantörer som OpenStreetMap, Mapbox eller Stadia för kartkakel.

Prestanda

Använd insticksmoduler för klustring när du har många markörer.

Komponentomslag

Kapsla in actionen i en komponent för återanvändbara kartor med parametrar.

Snabb kontroll

Varför använder man en action för Leaflet?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Kapsla in Leaflet i en Svelte-action: initiera vid montering, reagera via update och rensa i destroy. Undvik SSR vid åtkomst till window.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Leaflet-kartor med Svelte Actions” gratis?

Ja – hela texten till ”Leaflet-kartor med Svelte Actions” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Leaflet-kartor med Svelte Actions”?

Initiera och styr en Leaflet-kartinstans genom en Svelte-action. Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?

Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Leaflet-kartor med Svelte Actions”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?

Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Sveltejs Academy