13 JavaScript-kirjastot luomaan interaktiivisia ja mukautettuja karttoja

Olemme aiemmin esittäneet Google Map Maker -ohjelmaa ja 10 muuta työkalua, joiden avulla voit rakentaa karttoja. Jos kuitenkin mieluummin käytät Javascript-kirjastoja, onko meillä postitus sinulle. Tässä ovat JS-kirjastot, joilla voit näyttää erityisiä karttamerkkejä, piirtää mukautettuja reittilinjoja tai jopa näyttää valintaikkunan, kun siirrät tai napsautat kartan tiettyjä kohtia.

Mukauta karttasi haluamaasi tyyliin - jotkut niistä voidaan muotoilla CSS: llä - tai muokkaa karttaa niin, että haluat olla niin interaktiivinen kuin haluat. Kaikkien kirjastojen karttatietojen, riippuvuuksien ja lisenssien lähde on sisällytetty avuksesi.

Lisää Hongkiatista:

• Miten Google Mapsia tyylitellään
• Käyttäjän sijainnin hankkiminen HTML5-sijaintitoiminto-API: n avulla
• Tietojen visualisointi: 20+ hyödyllistä työkalua ja resursseja

GMaps

GMaps Google Mapsin lisääminen ja mukauttaminen on helppoa. Kartan lisäämisen lisäksi voit myös sisällyttää karttaan pari asiaa, kuten polylines, jotka voivat olla hyödyllisiä reitin, erikoisvalikon ohjauksen ja jopa HTML-elementtien piirtämiseen.

GMaps on yhteensopiva JSON-muotoisten tietojen kanssa, joita voit käyttää kartan integroimiseksi tiettyyn sovellukseen, kuten Foursquare.

• Karttatietolähde: Google Kartat
• riippuvuudet: ei mitään
• lisenssi: MIT-lisenssi

jHere

5 kB: n kohdalla JHERE näyttää, että koko ei ole väliä; voit silti rakentaa tehokkaan vuorovaikutteisen kartan, jossa on muutama räätälöintivaihtoehto. jHERE saa kartan visualisoinnin HERE-kartalta, joka on yksi suosituimmista karttapalveluista Windows Phoneille.

Kirjastoa voidaan laajentaa uusilla toiminnoilla, ja tälle kirjastolle on kehitetty pari laajennusta, joista yksi on muotojen, reittien ja mukautettujen merkkien lisääminen..

• Karttatietolähde: TÄSTÄ Kartat
• riippuvuudet: jQuery tai ZeptoJS
• lisenssi: MIT-lisenssi

Kartograph

Kartograph koostuu kahdesta tiedostosta: Kartograph.ph kartan luomiseksi SVG-muodossa ja Kartograph.js interaktiivisten elementtien lisäämiseksi kartan päälle. Koska Kartograph.js on rakennettu Raphael.js: n päälle, kartta toimii hienosti IE7: een asti. Voit tarkastella interaktiivisen kartan demoja selvittääksesi, mitä Kartograph voi tehdä.

• Karttatietolähde: Kartografi
• riippuvuudet: Kartograph.py, Raphael ja jQuery
• lisenssi: AGPL ja LGPL

Mapael

jQuery Mapael voit luoda karttoja, joissa on tyylikäs datan visualisointi sekä vuorovaikutteisuus. Voit esimerkiksi luoda kartan ja määrittää kartan jokaisen alueen eri väreillä alueittain. Voit myös lisätä työkalupisteen alueelle sekä tapahtumakäsittelijöitä klikkaus tai häilyä.

Kartta on rakennettu SEO: n avulla tarjoamalla vaihtoehtoista sisältöä hakukoneiden robotteille, jotka eivät kykene indeksoimaan JavaScriptin luomaa sisältöä.

• Karttatietolähde: Raphael.js
• riippuvuudet: jQuery
• lisenssi: MIT-lisenssi

D3js

d3.js on kattava JavaScript-kirjasto, joka tuo tiedot elämääsi HTML-, SVG- ja CSS-tiedostojen kautta. D3-käyttö on varsin vaihtelevaa, mukaan lukien erittäin interaktiivisen kartan rakentaminen. Katso Maailmanpankin globaalin kehityksen kartta ja näet mahdollisuuksia D3js: n kanssa.

• Karttatietolähde: D3.js
• riippuvuudet: ei mitään
• lisenssi: määrittelemätön

DataMaps

Jos D3.js: n kanssa rakennetaan kartta on ylivoimainen, voit käyttää sitä DataMaps. DataMaps on lähinnä D3.js-laajennus, joka on kehitetty erityisesti karttojen rakentamiseen. Se perii monet D3.js: n kyvystä, joten voit rakentaa siihen yksinkertaisia ​​tai hyvin räätälöityjä karttoja. Mainitsin, että kartta on reagoiva?

• Karttatietolähde: D3.js
• riippuvuudet: D3.js ja TopoJSON
• lisenssi: MIT-lisenssi

GeoChart

GeoChart on yksinkertaistettu Google-kartta, joka tekee alueesta, merkinnöistä ja tekstistä täydellisen kartan, jossa on pieniä yksityiskohtia. Kartta luodaan SVG: ssä, ja sitä voidaan muokata monin tavoin, kuten alueen värien muuttaminen, ponnahdusikkunoiden ja mukautettujen karttamerkkien lisääminen.

• Karttatietolähde: Google Kartat
• riippuvuudet: ei mitään
• lisenssi: Lue Google Maps TOS

Maplace

Maplace, jQuery-laajennus kartan luomiseen Google Maps API v3: n kautta. Maplace toimii kaikissa selaimissa, mukaan lukien IE6. Joten tämä on toinen suuri plugin arvoinen huomionne, jos haluat rakentaa kartan helpoin tapa.

• Karttatietolähde: Google Kartat
• riippuvuudet: jQuery
• lisenssi: MIT-lisenssi

arvokas

Se on JavaScript-kirjasto, joka on kehitetty luomaan Yhdysvaltain karttoja. Kirjasto on verrattain kevyt, koska voit lisätä interaktiivisia elementtejä luotujen karttojen päälle.

• Karttatietolähde: Stately / SVG
• riippuvuudet: ei mitään
• lisenssi: MIT-lisenssi

GeoComplete

GeoComplete on erillinen JavaScript-kirjasto. Kirjasto lisää syöttökentän kartan kanssa, josta näkyy kaupunkien, maiden tai valtioiden ehdotuksia kirjoittaessasi.

• Karttatietolähde: Google Kartat
• riippuvuudet: jQuery
• lisenssi: MIT-lisenssi

Karttatyökalut

Karttatyökalut tarjoavat intuitiivisen API: n Google Mapsin lisäämiseksi. Se tukee Geo-muotoisten JSON-tietojen, kuten TopoJSONin ja GeoJSONin lataamista kartan esittämiseen. Sen lisäksi voit lisätä animoituja merkkejä, jotka mielestäni tekevät kartasta vilkkaammaksi, lisäävät HTML-sisältöä muuttujilla tai paikkamerkkien ala-ohjaimella.

• Karttatietolähde: Google Kartat
• riippuvuudet: GeoJSON / TopoJSON
• lisenssi: MIT-lisenssi

OpenLayers

OpenLayers on korkean suorituskyvyn avoimen lähdekoodin JavaScript-kehys, jonka avulla voidaan rakentaa interaktiivisia karttoja käyttämällä erilaisia ​​kartoituspalveluja. Voit valita karttakerroksen lähteen käyttämällä kaakeloitua kerrosta tai vektorikerrosta useista karttapalveluista.

OpenLayer tulee mobiiliin valmiiksi laatikosta ja soveltuu karttojen rakentamiseen laitteiden ja selainten välillä. Voit käyttää CSS: ää eri kartan ulkoasua varten. Voit toteuttaa kartan verkossa käyttämällä OpenLayers-ohjelmaa.

• Karttatietolähde: OpenStreetMap
• riippuvuudet: ei mitään
• lisenssi: Määrittelemätön

Esite

Kehittäjät antoivat Esite Perustehtävät toimivat täydellisesti, pitämällä sen koko pieni, täydellinen mobiililaitteille. Laajenna esite vain tietyille toiminnoille lisäosien avulla. Esitteessä on useimmat online-karttatoiminnot, joita tarvitset: laattojen kerrokset, ponnahdusikkunat, merkit ja vapaat vektorikerrokset, kuten polylines, polygonit, ympyrät tai suorakulmio. Mukana on mukavat oletusmallit, vaikka voit muokata tyyliä helposti CSS3: n avulla.

Esitteessä on eniten käyttöliittymäominaisuuksia sekä mobiili- että työpöydän selaimissa.

• Karttatietolähde: OpenStreetMap
• riippuvuudet: ei mitään
• lisenssi: Määrittelemätön