Leaflet

Leaflet
Luoja	Volodymyr Agafonkin
Kehityshistoria
Vakaa versio	Leaflet 1.9.2
Tiedot
Ohjelmistotyyppi	JavaScript Kirjasto
Käyttökielet	JavaScript
Lisenssi	2-lauseinen BSD-lisenssi
Aiheesta muualla
Verkkosivusto
Infobox OK

Leaflet on avoimen lähdekoodin JavaScript-kirjasto, jonka avulla voi rakentaa web-kartoitussovelluksia. Leaflet on tarkoituksella tehty pieneksi kirjastoksi ja sen koko on vain 42kB. Se julkaistiin vuonna 2011. Se toimii useilla mobiili- ja työpöytäalustoilla, jotka tukevat HTML5:tä sekä CSS3:a. Esimerkiksi Pinterest sekä Flickr käyttävät Leaflet-kirjastoa.
Leafletin avulla voidaan hyödyntää GeoJSON tiedostoja ja niiden arvoja. GeoJSON tiedostojen avulla voidaan karttaan lisätä tasoja kuvaamaan eri alueita. Leafletin ominaisuuksia voidaan laajentaa useilla eri liitännäisillä joiden avulla saadaan luotua tasoja. Leaflet tukee helppokäyttöisyyttä kuten näytönlukuohjelmia Narrator ja Orca ja näppäimistön käyttöä osottimen sijasta.

Leafletin ensimmäisen version kehittäjä on Volodymyr Agafonkin.

Ominaisuudet

Leaflet tarjoaa laajan valikoiman eri elementtejä ja ominaisuuksia, joita voidaan lisätä osaksi Leaflet-karttaa. Leafletin omilta sivuilta. Välilehdeltä pääsee näkemään eri ominaisuuksia ja esimerkkejä niiden implementoinnista, ja sivut tarjoavat helppoja esimerkkikoodeja implementoimaan kyseinen ominaisuus karttaan.

Leaflet-kirjastossa on mahdollista luoda kartalle haluamansa muotoisia rajoja ja alueita, joihin voidaan lisätä hyödyllistä tietoa alueista. Tämän avulla voidaan esimerkiksi lisätä Suomen kuntien rajat. Alueiden tietoihin voidaan lisätä mitä vain tietoa, kuten kunnan asukkaiden määrän ja kunnan nimi, jotka saadaan näkyviin kursorilla osoittamalla tai alueesta klikkaamalla. Nämä ominaisuudet ovat mahdollista implementoida GeoJSON- ja Choropleth Map-kirjastoja käyttäen. Näitä yhdistämällä on mahdollista tehdä hyvin informatiivisia karttoja, ja näiden lisäksi voidaan liittää eri avoimen datan API:tä Javascriptin avulla hakemaan dataa alueisiin.

Karttaan voi lisätä useita eri kerroksia, joissa on eri tietoja ja. Leafletin Leaflet-control kirjasto näyttää esimerkin kartasta, jossa on erilaisia taustakarttoja ja merkintöjä, jotka käyttäjä pystyy valitsemaan asetuksista haluamansa mukaan. Sivulta myös nähdään koodipätkät, joiden avulla kartta on luotu, ja niitä käyttäen on helppoa implementoida nämä ominaisuudet omaan Leaflet-karttaan.

Yhdistämällä Leaflet-kirjaston eri ominaisuuksia voidaan tehdä hyvin personalisoituja karttoja, ja kartoista pystyy tekemään niin tyyliteltyjä kuin vain koodaajalla on halua muokata. Leaflet-kirjastoa päivitetään jatkuvasti ja Leafletin kehittäjät lisäävät uusia ominaisuuksia jatkuvasti. Kirjaston avoimen lähdekoodin avusta kuka vaan pystyy tekemään lisäyksiä kirjastoon, ja lisäämään tarvittavia ominaisuuksia karttaelementtiin, jos niitä ei ole vielä saatavilla julkisessa versiossa.

Verrattuna muihin kirjastoihin

Leaflet on suoraan verrattavissa OpenLayers-kirjaston kanssa. Molemmat ovat asiakaspuoleisia (eng. "client-side") JavaScript kirjastoja, ja noudattavat täysin avoimen lähdekoodin käytäntöä. Molemmat kirjastot ovat siis täysin ilmaisia sekä niiden lähdekoodit ovat julkisia ja kaikkien luettavissa. OpenLayers tukee Leafletin tavoin GeoJSON- sekä Web Map Service- (WMS) tietotyyppejä. Leaflet on uudempi kirjasto ja saa päivityksiä aktiivisemmin kuin OpenLayers. Leafletistä poiketen OpenLayers tukee natiivisti Web Feature Service- (WFS) sekä Google Web Mercator- (GML) tietotyyppejä.

Leaflet on myös verrattavissa kenties tunnetuimpaan karttakirjastoon, Google Maps API:iin. Google Maps on suljetun lähdekoodin ohjelmisto, sekä toimii enemmän palvelinpuolella (eng. "server-side") Leafletistä poiketen, joka toimii vain asiakaspuolella. Google Maps API oli pitkään vapaasti käytettävissä, mutta kesäkuusta 2018 asti vaatii API identikaattorin (eng. "API key") käyttämistä varten. Leaflet on puolestaan kaikille käyttäjille ilmainen.

Google Maps API:sta löytyy enemmän ominaisuuksia, jotka helpottavat sen yhteistyötä Google Earthin kanssa. Suuri osa näistä ominaisuuksista toimivat serveripuolella kuten geokoodaus sekä reititys. Google Maps ei kuitenkaan salli ohjemoijalle valtavasti vapauksia, sillä sitä voi käyttää vain Google Maps-palveluiden kanssa. Leaflet on näin ollen vapaamuotoisempi ja sallii luovempia lopputuloksia. Google Maps API:n DataLayer on kenties lähimpänä Leaflet:in käyttökokemusta ja sallii ulkopuolisten tietolähteiden käyttämisen.

Käyttöönotto

Leaflet-kirjaston voi ottaa käyttöön, joko lataamalla Leaflet omalle laitteellesi tai käyttämällä houstattua versiota. Leaflet-kirjaston voi ladata Leafletin omilta nettisivuilta [2]. Hostatun version käyttöönotto ei vaadi Leaflet-kirjaston lataamista, mutta hostatulla versiolla saattaa olla rajoitteita esimerkiksi koodin tarkastusohjelmien kanssa.

Leaflet ladatun version käyttö

<link rel="stylesheet" href="/path/to/leaflet.css" />
<script src="/path/to/leaflet.js"></script>

<!--Polku leaflet-tiedostoihin voisi olla esimerkiksi leaflet/leaflet.css tai 
leaflet/leaflet.js, jos html-tiedosto on samassa kansiossa kansion leaflet kanssa-->

Leaflet hostatun version käyttö

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" 
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" 
    crossorigin="" />

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" 
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" 
    crossorigin=""></script>

Kummankin version kanssa täytyy muistaa ensin sisällyttää Leaflet CSS-tiedosto ja vasta tämän jälkeen Leaflet JavaScript-tiedosto.

Leaflet-kirjaston version valinnan jälkeen asetetaan <div> HTML elementti, jolle annetaan haluttu id.

<div id="map"></div>

<!--Tässä esimerkissä <div> elementin id on map-->

Lopuksi <div> elementille on annettava korkeus. Tämä onnistuu CSS-tiedostossa

#map { height: 180px; }

/*Asetetaan korkeudeksi esimerkiksi 180 pikseliä kutsumalla elementtiä sen 
id:n avulla*/

Käyttöesimerkki

 /*Asetetaan Leaflet "map" elementti HTML elementtiin kuten div, jonka id on "map". Tämän jälkeen asetetaan halutut koordinaatit sekä suurennuksen arvo.*/
 
 const map = L.map('map').setView([51.505, -0.09], 13);
 
 /*Lisätään karttaan OpenStreetMap-taso ja lisätään attribuutteihin OpenStreetMap tekijänoikeudet(https://operations.osmfoundation.org/policies/tiles/). 
 Tämän jälkeen lisätään taso kartta-elementtiin*/
 L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
 }).addTo(map);

Tuetut alustat

Työpöytätuki: Chrome, Firefox, Safari 5+, Opera 12+, IE 9-11 ja Edge.

Mobiilituki: Safari iOS 7+, Chrome mobiiliversio, Firefox mobiiliversio ja IE10+ Windows 8 tietokoneille.

Historia

Leaflet sai alkunsa vuonna 2010 nimellä "Web Maps API", JavaScript-kirjasto CloudMade-nimiselle karttapalveluita tarjoavalle yritykselle jossa Leafleting kehittäjä Agafonkin työskenteli. Toukokuussa 2011 CloudMade julkaisi ensimmäisen version Leafletista. Ensimmäinen versio oli rakennettu täysin uudelta pohjalta mutta osia vanhasta API-koodista oli kuitenkin käytetty.

• 0.1: 17. toukokuuta 2011
• 0.2: 18. kesäkuuta 2011
• 0.3: 14. helmikuuta 2012
• 0.4: 30. heinäkuuta 2012
• 0.5: 17. tammikuuta 2013
  • Tämän version myötä Leaflettiin lisättiin tuki Retina-näytöille sekä useita käytettävyyteen ja käyttäjäkokemukseen liittyviä parannuksia.
• 0.6: 26. kesäkuuta 2013
  • Tämä versio lisäsi API:n metodeita ja tapahtumia, paransi käytettävyyttä ja lisäsi mahdollisuuden tallentaa tasoja GeoJSON-muodossa. Versio tehtiin osana kaksipäiväistä koodaustapahtumaa, jota tuki Mapbox.
• 0.7: 22. marraskuuta 2013
  • Tämä julkaisu keskittyi bugien korjaamiseen. Samalla ilmoitettiin että koodin refaktorointi mahdollinen taaksepäin yhteensopimattomuus olisivat tulossa pian.
• 1.0: 27. syyskuuta 2016
  • Tämä versio sisälti yli 400 muutosta verrattuna versioon v0.7.7:
    • Suorituskyvyn parannuksia kirjaston kaikilla osa-alueilla ja eritoten vektoritasoihin liittyen.
    • Tuki tarkemmalle zoomaukselle.
    • Parempi tasojen latausalgoritmi jolla vähennettiin välkehdintää.
    • Lisää esteettömyyteen liittyviä ominaisuuksia.
    • Parannuksia dokumentaatiossa.
    • Stability improvements. Parannuksia kirjaston vakauteen.
• 1.1: 27. kesäkuuta 2017
  • Tämä versio lisäsi tuen videomuotoisille tasoille.
• 1.2: 25. lokakuuta 2017
• 1.3: 15. tammikuuta 2018
• 1.3.2: 17. heinäkuuta 2018
• 1.3.3: 18. kesäkuuta 2018
• 1.3.4: 21. elokuuta 2018
• 1.4.0: 30. joulukuuta 2018
• 1.5.0 ja 1.5.1 : 8. toukokuuta 2019
• 1.6.0: 17. marraskuuta 2019
• 1.7.1 : 4. syyskuuta 2020
• 1.8 : 18. huhtikuuta 2022
• 1.9 : 22. syyskuuta 2022

Maaliskuussa 2022 Venäjän aloittaessa hyökkäyssodan Ukrainassa Leafletin kehittäjä kehotti toimiin leafletjs-nettisivulla. Leafletiä käyttävien karttojen alareunaan lisättiin Ukrainan lippu.