Leaflet.js on yksinkertaisin karttakirjasto
Google Maps on varmasti suosituin upotettava kartta-widget web-suunnittelijoille. Entä mukautettujen ominaisuuksien lisääminen kuten työkaluvihjeitä ja pin-merkkejä?
Tässä on mahtava kirjasto Leaflet.js auttaa tonnia.
Tämä on täysin ilmainen avoimen lähdekoodin projekti Alun perin luonut yksi Mapboxin nimistä kaverista Vladimir Agafonkin. Sittemmin Leaflet on kasvanut kymmeniä avustajia maailman ympäri.
Se on usein päivitetty virheenkorjauksilla ja uusilla ominaisuuksilla jotka parantavat yleistä täytäntöönpanoa millä tahansa verkkosivustolla. Tämä on ylivoimaisesti suosikkikartoituskirjastoni sen pelkän voiman ja muotoilun esteettisyyden vuoksi.
Siinä on niin monia ominaisuuksia, joita en voinut luetella kaikkia, mutta tässä on mielenkiintoisimmat:
- Mobiililaitteiden kiihdytys
- Napsauta merkkejä, muotoile peittoja ja työkaluvihjeitä
- Mukautettu zoomaus- ja panorointi-animaatio
- Ei JS-riippuvuuksia
- Tuki kaikille tärkeimmille selaimille, mukaan lukien IE7+
Täytäntöönpano on hieman hankalaa, koska sinun täytyy anna koordinaatit ja määritä, kuinka suuri kartta on.
Käyttäjät voivat aina loitontaa ja ympäri, joten näkymä voi aina muuttua. Mutta se perustuu myös miten määrität kartan sivulla.
On valtava dokumentointisivulla täynnä tietoa jokaisesta Leafletin näkökulmasta. Valitettavasti se on niin tiheä, että en voi suositella vain sukellusta siihen, koska luultavasti menetät. Tarkista sen sijaan Esitteiden sivut joka sisältää myös a Pikaopas aloittelijoille.
Opit miten upota karttoja, muuta kokoa / sijaintia, ja miten lisää mukautettuja grafiikoita päälle, kuten ympyrät tai nastamerkit.
Tämä yksi intro-opas voi opettaa sinulle kaiken mitä tarvitset käyttää esitteitä blogissa, yrityksen verkkosivustossa tai tulevassa projektissa.
Google Mapsia on runsaasti syitä käyttää: se on tehokas, luotettava ja ilmainen. Mutta esite tulee niin paljon muita ominaisuuksia laatikosta ja sinun tarvitsee vain lisää CSS / JS-tiedostot Web-sivullesi aloittaa. Voit jopa löytää kopiot isännöi verkossa jos haluat mennä CDN-reittiin.
Älä anna dokumentaation pelottaa sinua. Voit oppia paljon, mutta kaikki ominaisuudet eivät ole välttämättömiä perustiedot.
Ja se ei vie paljon luo hämmästyttävä kartta tyhjästä. Tutustu tähän Codepen-demoon käyttämällä Leaflet.js & Google Maps -sovellusta.
