Leaflet.js is de eenvoudigste kaartenbibliotheek die je ooit zult vinden
Google Maps is zeker het meest populair integreerbare kaartwidget voor webontwerpers. Maar hoe zit het met aangepaste functies toevoegen zoals tooltips en pin markers?
Dit is waar een geweldige bibliotheek zoals Leaflet.js helpt een ton.
Dit is een volledig gratis open source project oorspronkelijk gemaakt door een van de jongens op Mapbox met de naam Vladimir Agafonkin. Sindsdien is Leaflet uitgegroeid tot tientallen bijdragers rond de wereld.
Het is vaak bijgewerkt met bugfixes en nieuwe functies die de algehele implementatie op elke website verbeteren. Dit is verreweg mijn favoriete kaartbibliotheek vanwege zijn pure kracht en ontwerpesthetiek.
Het heeft zoveel functies dat ik ze niet allemaal kan opsommen, maar hier zijn ze de meest interessante:
- Mobiele hardwareversnelling
- Pinmarkeringen, vormoverlays en tooltips
- Aangepaste zoom- en zwenkanimatie
- Geen JS-afhankelijkheden
- Ondersteuning voor alle belangrijke browsers, inclusief IE7+
Implementatie is een beetje lastig omdat dat moet voer coördinaten in en definieer hoe groot de kaart moet zijn.
Gebruikers kunnen altijd uitzoomen en ronddraaien, dus het uitzicht kan altijd veranderen. Maar het is ook gebaseerd op hoe je de kaart definieert op de pagina.
Er is een enorm documentatiepagina vol met informatie voor elk aspect van Leaflet. Helaas is het zo dicht dat ik het niet kan aanbevelen om er gewoon in te duiken omdat je waarschijnlijk verdwaalt. In plaats daarvan, bekijk de Folder tutorials pagina waaronder ook een Snelstartgids voor nieuwelingen.
Je zult leren hoe te embed kaarten, verander de grootte / positie, en hoe voeg zelf aangepaste afbeeldingen toe, zoals cirkels of pinmarkeringen.
Deze ene intro-gids kan leer je alles wat je nodig hebt om Leaflet te gebruiken op een blog, bedrijfswebsite of een aanstaand project.
Er zijn tal van goede redenen om Google Maps te gebruiken: het is krachtig, vertrouwd en gratis. Maar Leaflet wordt geleverd zoveel meer functies uit de doos en je hoeft het alleen maar te doen voeg de CSS / JS-bestanden toe aan uw webpagina starten. Je kunt zelfs vinden exemplaren worden online gehost als je liever de CDN-route wilt gaan.
Laat de documentatie je niet afschrikken. Er is veel dat je kunt leren, maar niet alle functies zijn nodig voor een eenvoudige folder-opstelling.
En er is niet veel aan nodig maak vanaf het begin een geweldige kaart. Neem een kijkje in deze gecreëerde Codepen-demo met behulp van Leaflet.js & Google Maps API.
