Mappe Leaflet con le actions Svelte
Inizializzi e controlli un'istanza di mappa Leaflet tramite una action Svelte.
Mappe Leaflet con le actions Svelte è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Sveltejs Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Sveltejs Academy include 4 lezioni in totale.
Perché Leaflet
Leaflet è una libreria open source per mappe, compatta e collaudata, che funziona bene con Svelte.
Installazione
Aggiunga Leaflet e il relativo CSS.
npm install leaflet
@import "leaflet/dist/leaflet.css";Schema delle action
Racchiuda l'inizializzazione di Leaflet in una action Svelte.
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(); } };
}Utilizzo nel componente
Applichi la action a un div.
<div use:leafletMap={{ center: [40, 30], zoom: 12 }} style="height: 400px;" />Aggiornamento
Restituisca una funzione update per reagire alle modifiche dei parametri.
update(newOptions) { map.setView(newOptions.center, newOptions.zoom); }Marker
Aggiunga i marker programmaticamente o in un componente figlio Svelte che condivida il contesto.
Pulizia
Chiami sempre map.remove() in destroy per liberare le risorse.
Nota sull'SSR
Leaflet utilizza window/document. Protegga l'accesso con onMount oppure imposti ssr = false.
Provider delle tile
Scelga provider come OpenStreetMap, Mapbox o Stadia per le tile.
Prestazioni
Per molti marker, utilizzi plugin di clustering.
Componente wrapper
Racchiuda la action in un componente per ottenere mappe riutilizzabili e parametrizzate.
Verifica rapida
Perché utilizzare una action per Leaflet?
Riepilogo
Racchiuda Leaflet in una action Svelte: inizializzi in mount, reagisca tramite update e pulisca in destroy. Eviti l'SSR per l'accesso a window.
Domande Frequenti
La lezione «Mappe Leaflet con le actions Svelte» è gratuita?
Sì — il testo completo di «Mappe Leaflet con le actions Svelte» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Sveltejs Academy, passa a CoddyKit PRO. Il corso Sveltejs Academy include 4 lezioni in totale.
Cosa imparerò in «Mappe Leaflet con le actions Svelte»?
Inizializzi e controlli un'istanza di mappa Leaflet tramite una action Svelte. Eserciti Sveltejs Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Sveltejs Academy?
Non è richiesta alcuna esperienza precedente. Sveltejs Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Mappe Leaflet con le actions Svelte»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Sveltejs Academy?
Sì. Ogni lezione Sveltejs Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Uso di Tailwind CSS con SvelteKit
- Grafici D3.js in Svelte
- Mappe Leaflet con le actions Svelte
- Editor di testo avanzato: Tiptap