Leaflet.js è la libreria di mappe più semplice che troverai mai

Google Maps è sicuramente il widget di mappe incorporabili più popolare per i web designer. Ma che dire dell'aggiunta di funzionalità personalizzate come suggerimenti e indicatori?

Qui è dove una libreria impressionante come Leaflet.js aiuta un sacco.

Questo è un progetto open source completamente gratuito inizialmente creato da uno dei ragazzi di Mapbox, Vladimir Agafonkin. Da allora, Leaflet è cresciuto fino a comprendere dozzine di contributori in tutto il mondo.

Viene frequentemente aggiornato con correzioni di bug e nuove funzionalità che migliorano l'implementazione generale su qualsiasi sito web. Questa è di gran lunga la mia libreria di mappatura preferita per la sua forza pura e l'estetica del design.

Ha così tante caratteristiche che non posso elencarle tutte, ma qui ce ne sono alcune più interessanti :

• Accelerazione hardware mobile
• Indicatori di pin, sovrapposizioni di forme e descrizioni comandi
• Zoom personalizzato e animazione panoramica
• Nessuna dipendenza JS
• Supporto per tutti i principali browser incluso IE7 +

L'implementazione è un po 'complicata perché è necessario inserire le coordinate e definire la dimensione della mappa .

Gli utenti possono sempre eseguire lo zoom indietro e la panoramica, in modo che la vista possa sempre cambiare. Ma si basa anche su come si definisce la mappa sulla pagina.

C'è un'enorme pagina di documentazione piena di informazioni per ogni aspetto di Leaflet. Purtroppo, è così denso che non posso raccomandarti di immergerti perché probabilmente ti perderai. Invece, controlla la pagina delle esercitazioni Leaflet che include anche una guida rapida per i principianti.

Imparerai come incorporare mappe, modificare la dimensione / posizione e come aggiungere elementi grafici personalizzati in alto, come cerchi o indicatori di spillo.

Questa guida introduttiva può insegnarti tutto ciò di cui hai bisogno per utilizzare Leaflet su un blog, un sito web aziendale o qualsiasi progetto imminente.

Ci sono molti buoni motivi per usare Google Maps: è potente, affidabile e gratuito. Ma Leaflet è dotato di così tante altre funzionalità fuori dalla scatola e devi solo aggiungere i file CSS / JS alla tua pagina web per iniziare. Puoi anche trovare copie ospitate online se preferisci seguire la rotta CDN.

Non lasciare che la documentazione ti spaventi. C'è molto che puoi imparare, ma non tutte le funzionalità sono necessarie per una configurazione di Leaflet di base.

E non ci vuole molto per creare una mappa straordinaria da zero . Dai un'occhiata a questa demo di Codepen creata utilizzando Leaflet.js e l'API di Google Maps .