Leaflet.js er det enkleste kortbibliotek du nogensinde finder
Google Maps er helt sikkert den mest populære indlejret kort widget til webdesignere. Men hvad med tilføjer brugerdefinerede funktioner f.eks. værktøjstip og pinmarkører?
Det er her et fantastisk bibliotek som Leaflet.js hjælper et ton.
Dette er en helt gratis open source-projekt oprindeligt oprettet af en af gutterne på Mapbox ved navn Vladimir Agafonkin. Siden da er bladet vokset til at omfatte snesevis af bidragydere jorden rundt.
Det er ofte opdateret med fejlrettelser og nye funktioner der forbedrer den overordnede implementering på enhver hjemmeside. Dette er langt mit foretrukne kortlægningsbibliotek på grund af dets rene kraft og design æstetik.
Det har så mange funktioner, at jeg muligvis ikke kunne liste dem alle, men her er de mest interessante:
- Mobil hardware acceleration
- Pin markører, form overlejringer og værktøjstip
- Brugerdefineret zoom og panorering animation
- Ingen JS afhængigheder
- Støtte til alle større browsere, herunder IE7+
Implementering er lidt vanskelig, fordi du skal indtast koordinater og Definer, hvor stort kortet skal være.
Brugere kan altid zoome ud og panorere rundt, så udsigten kan altid ændre sig. Men det er også baseret på hvordan du definerer kortet på siden.
Der er en enorm dokumentationsside fuld af info til alle aspekter af bladet. Desværre er det så tæt, at jeg ikke kan anbefale bare at dykke ind i det, fordi du sandsynligvis vil gå tabt. I stedet tjek den Sideoversigt for tutorials som også omfatter a hurtig start guide for nybegyndere.
Du vil lære at integrere kort, ændre størrelse / position, og hvordan Tilføj tilpasset grafik ovenpå, f.eks. cirkler eller pinmarkører.
Denne intro guide kan lære dig alt hvad du behøver at bruge brochure på en blog, firmaets hjemmeside eller et hvilket som helst kommende projekt.
Der er mange gode grunde til at bruge Google Maps: den er kraftfuld, betroet og gratis. Men bladet kommer med så mange flere funktioner ud af boksen og du behøver kun at Tilføj CSS / JS-filerne til din webside at komme i gang. Du kan endda finde kopier hostet online hvis du foretrækker at gå på CDN-ruten.
Lad ikke dokumentationen skræmme dig væk. Der er meget, du kan lære, men ikke alle funktioner er nødvendige til en grundlæggende brochureopsætning.
Og det tager ikke meget at lav et fantastisk kort fra bunden. Tag et kig på denne Codepen demo oprettet ved hjælp af Leaflet.js & Google Maps API.
