Devv logo
alpha
I corsi piu popolari

Scopri tutti i corsi sugli argomenti che piu ti interessano

Linguaggi

Python

Javascript

HTML & CSS

SQL

C++

Java

Argomenti

Web Development

Game Development

Artificial Intelligence (AI)

Cybersecurity

Machine Learning

Mobile Development

Percorsi di carriera

Esplora i percorsi creati per imparare una professione e trovare lavoro

Devv logo
alpha

Leaflet

Leaflet è una libreria JavaScript open-source per la creazione di mappe interattive per il web.

JavaScript
Leaflet logo

Cos'è Leaflet?

Leaflet è una libreria JavaScript open-source per la creazione di mappe interattive per il web. È stata sviluppata da Vladimir Agafonkin e rilasciata nel 2011. Leaflet è leggera, flessibile e facile da usare, ed è stata progettata per funzionare su tutti i dispositivi, dai desktop ai dispositivi mobili.

A cosa serve Leaflet?

Leaflet viene utilizzata per creare mappe interattive per il web. Con Leaflet, è possibile visualizzare mappe, aggiungere marker, popup, linee, poligoni e altro ancora. La libreria supporta anche la visualizzazione di mappe basate su tile e la sovrapposizione di dati geografici.

Caratteristiche principali di Leaflet

  • Leggerezza: Leaflet è una libreria leggera, con un peso di soli 38 KB.

  • Flessibilità: Leaflet è altamente personalizzabile e supporta una vasta gamma di plugin e librerie.

  • Facilità d'uso: Leaflet è facile da imparare e da usare, anche per i principianti.

  • Compatibilità: Leaflet funziona su tutti i browser moderni, compresi quelli su dispositivi mobili.

Esempio di sintassi per Leaflet

Per iniziare ad utilizzare Leaflet, è possibile includere la libreria nel proprio progetto tramite il seguente codice HTML:

<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha384-6r9iQ2vX9dWg7xk+6ZlBCGvJj6Uz1Rn0WfRkKjzvX8Wd5I5Z5q5q5d5q5q5d5q5q"
   crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha384-7Lk+9N4Z7VZ4jBz+UQOQvDfT7JjKuSg1vz9pJlJ4Z7x1K4fLQw+Pj5q5q5q5q5q"
   crossorigin=""></script>
</head>

Una volta inclusa la libreria, è possibile creare una mappa Leaflet nel proprio progetto tramite il seguente codice JavaScript:

var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
}).addTo(mymap);

Questo codice crea una mappa Leaflet con una vista centrata sulla posizione [51.505, -0.09] e uno zoom di 13. La mappa utilizza i dati di OpenStreetMap come base e viene visualizzata in un elemento HTML con l'ID 'mapid'.

Conclusione

Leaflet è una libreria JavaScript potente e flessibile per la creazione di mappe interattive per il web. Grazie alla sua leggerezza, flessibilità e facilità d'uso, è diventata una delle librerie più popolari per la creazione di mappe online. Con Leaflet, è possibile creare mappe personalizzate e interattive per qualsiasi progetto web.

Linguaggi usati in Leaflet
Iscriviti a Devv 🔥

Diventa un eroe della programmazione e trova lavoro

Scopri i migliori corsi 😱

Scegli tra 150+ percorsi gratuiti, impara una nuova skill e raggiungi i tuoi obiettivi