Leaflet.js er det enkleste kartbiblioteket du noensinne vil finne
Google Maps er absolutt den mest populære embeddable map widget for webdesignere. Men hva med legger til tilpassede funksjoner for eksempel verktøytips og pinmarkører?
Det er her et fantastisk bibliotek som Leaflet.js hjelper tonn.
Dette er en helt gratis åpen kildekode prosjekt opprinnelig opprettet av en av gutta på Mapbox kalt Vladimir Agafonkin. Siden da har Leaflet vokst til å inkludere dusinvis av bidragsytere jorden rundt.
Det er ofte oppdatert med feilrettinger og nye funksjoner som forbedrer den generelle implementeringen på et hvilket som helst nettsted. Dette er langt min favoritt kartlegging bibliotek på grunn av sin rene kraft og design estetisk.
Den har så mange funksjoner som jeg ikke kunne muligens liste dem alle, men her er de mest interessante:
- Mobil maskinvareakselerasjon
- Pin markører, form overlegg og verktøytips
- Tilpasset zoom og panorering animasjon
- Ingen JS-avhengigheter
- Støtte for alle de store nettleserne, inkludert IE7+
Implementering er litt vanskelig fordi du må skriv inn koordinater og Definer hvor stor kartet skal være.
Brukere kan alltid zoome ut og panorere rundt, slik at visningen alltid kan endres. Men det er også basert på hvordan du definerer kartet på siden.
Det er en stor dokumentasjonsside full av informasjon for alle aspekter av Leaflet. Dessverre er det så tett at jeg ikke kan anbefale bare å dykke inn i det fordi du vil bli fortapt. I stedet, sjekk ut Leaflet tutorials side som også inkluderer en Hurtigstartveiledning for nybegynnere.
Du lærer hvordan du skal legge inn kart, endre størrelsen / posisjonen, og hvordan legg til tilpasset grafikk på toppen, for eksempel sirkler eller pinmarkører.
Denne introguiden kan lær deg alt du trenger å bruke Leaflet på en blogg, selskapets nettside eller et hvilket som helst kommende prosjekt.
Det er mange gode grunner til å bruke Google Maps: det er kraftig, klarert og gratis. Men Leaflet følger med så mange flere funksjoner ut av boksen og du trenger bare å legg til CSS / JS-filene på websiden din å komme i gang. Du kan til og med finne kopier hostet på nettet hvis du foretrekker å gå på CDN-ruten.
Ikke la dokumentasjonen skremme deg bort. Det er mye du kan lære, men Ikke alle funksjoner er nødvendige for en grunnleggende Leaflet setup.
Og det tar ikke mye til Lag et fantastisk kart fra bunnen av. Ta en titt på denne Codepen-demoen som er opprettet bruker Leaflet.js og Google Maps API.
