13 JavaScript-raamatukogud interaktiivsete ja kohandatud kaartide loomiseks

Oleme varem kuvanud Google Map Makeri ja 10 muud tööriista kaartide loomiseks. Kui soovid selle asemel JavaScripti raamatukogusid kasutada, kas meil on teie postitus. Siin on JS-i raamatukogud, mida saate kasutada spetsiaalsete kaardimarkerite näitamiseks, kohandatud marsruudijoonte joonistamiseks või isegi dialoogi näitamiseks, kui klõpsate või klõpsate kaardil teatud kohtades.

Isikupärastage oma kaarte soovitud stiilis - mõned neist võivad olla kujundatud CSS-iga - või kohandage oma kaarti nii, nagu soovite. Teie mugavuse huvides on kaasatud kaardiandmete allikas, iga raamatukogu sõltuvus ja litsentsid.

Veel Hongkiatist:

• Kuidas Google Mapsi kujundada
• Kasutaja asukoha leidmine HTML5 geolokatsiooni API-ga
• Andmete visualiseerimine: 20+ kasulikku tööriista ja ressursse

GMaps

GMaps muudab Google Mapsi lisamise ja kohandamise imeliseks. Kaardi lisamise kõrval võite kaardile lisada ka paar asja, nagu näiteks liinid, mis võivad olla kasulikud marsruudi, spetsiaalse menüüjuhtimise ja isegi HTML-elementide joonistamiseks.

GMaps on ühilduv JSON vormindatud andmetega, mida saate kasutada oma kaardi integreerimiseks konkreetse rakendusega, näiteks Foursquare.

• Kaardiandmete allikas: Google kaardid
• Sõltuvus: mitte ükski
• Litsents: MIT-litsents

jHere

5KB juures näitab JHERE, et see suurus ei ole oluline; saate siiski ehitada võimsa interaktiivse kaardi, millel on käputäis kohandamisvõimalusi. JHERE saab kaardist visualiseerimise HERE kaardilt, mis on üks populaarsemaid Windowsi telefoni kaartide pakkujaid.

Raamatukogu saab uue funktsionaalsusega laiendada ja selle raamatukogu jaoks on välja töötatud paar laiendust, sealhulgas üks kujundite, marsruutide ja kohandatud markerite lisamiseks..

• Kaardiandmete allikas: SIIN Kaardid
• Sõltuvus: jQuery või ZeptoJS
• Litsents: MIT-litsents

Kartograaf

Kartograaf koosneb kahest failist, Kartograph.ph, et luua kaart SVG-vormingus, ja Kartograph.js, et lisada interaktiivseid elemente kaardi peal. Kuna Kartograph.js on ehitatud Raphael.js'i peale, töötab kaart hästi IE7-le. Te võite vaadata interaktiivse kaardi demosid, et avastada, mida Kartograph saab teha.

• Kaardiandmete allikas: Kartograaf
• Sõltuvus: Kartograph.py, Raphael ja jQuery
• Litsents: AGPL ja LGPL

Mapael

jQuery Mapael võimaldab luua nii elegantsete andmete visualiseerimise kui ka interaktiivsusega kaarte. Näiteks saate luua kaardi ja määrata iga piirkonna piirkonnale piirkonniti erinevate värvidega. Samuti saate piirkonda lisada tööriista, nagu ka sündmuste käitlejad klõpsa või hõljuma.

Kaart on ehitatud koos SEO-ga, pakkudes alternatiivset sisu otsingumootori robotitele, mis ei suuda JavaScript-i loodud sisu uurida.

• Kaardiandmete allikas: Raphael.js
• Sõltuvus: jQuery
• Litsents: MIT-litsents

D3js

D3.js on kõikehõlmav JavaScript-raamatukogu, mis toob teie andmed HTML, SVG ja CSS kaudu. D3 kasutamine on üsna mitmekesine, sealhulgas väga interaktiivse kaardi loomiseks. Vaadake seda Maailmapanga globaalse arengu kaarti ja näete võimalusi, mida saate D3.js-iga ehitada.

• Kaardiandmete allikas: D3.js
• Sõltuvus: mitte ükski
• Litsents: Määratlemata

DataMaps

Kui kasutate kaarti D3.js-ga, siis saate seda kasutada DataMaps. DataMaps on sisuliselt D3.js plugin, mis on välja töötatud spetsiaalselt kaartide loomiseks. See pärineb paljudest D3.js-i võimetest, seega saate sellega luua lihtsaid või väga kohandatud kaarte. Kas mainisin, et kaart on tundlik?

• Kaardiandmete allikas: D3.js
• Sõltuvus: D3.js ja TopoJSON
• Litsents: MIT-litsents

GeoChart

GeoChart on lihtsustatud Google Map, mis muudab piirkonna, markerid ja teksti täiemahulise väikese detailiga kaardi asemel. Kaart genereeritakse SVG-s ja seda saab kohandada mitmel viisil, sealhulgas muuta piirkonna värve, lisada hüpikaknaid ja kohandatud kaardimarkereid.

• Kaardiandmete allikas: Google kaardid
• Sõltuvus: mitte ükski
• Litsents: Loe Google Mapsi TOS-i

Maplace

Maplace, jQuery plugin kaardi loomiseks Google Mapsi API v3 kaudu. Maplace töötab kõikides brauserites, sealhulgas IE6-s. Nii et see on veel üks suur plugin, mis on väärt teie tähelepanu, kui soovite luua kaarti võimalikult lihtsal viisil.

• Kaardiandmete allikas: Google kaardid
• Sõltuvus: jQuery
• Litsents: MIT-litsents

Oluline

Oluliselt on JavaScripti raamatukogu, mis on välja töötatud USA kaartide loomiseks. Raamatukogu on suhteliselt kerge, arvestades, et saate genereeritud kaartide peale lisada interaktiivseid elemente.

• Kaardiandmete allikas: Staatiline / SVG
• Sõltuvus: mitte ükski
• Litsents: MIT-litsents

GeoComplete

GeoComplete on eraldi JavaScripti teek. Raamatukogu lisab koos kaardiga sisendvälja, mis näitab linnade, riikide või riikide soovitusi kirjutamisel.

• Kaardiandmete allikas: Google kaardid
• Sõltuvus: jQuery
• Litsents: MIT-litsents

Kaarditööriistad

Kaarditööriistad pakuvad Google Mapsi lisamiseks intuitiivset API-d. See toetab geoinformeeritud JSON-andmete, näiteks TopoJSONi ja GeoJSONi laadimist, et kaarti muuta. Lisaks võite lisada animeeritud markereid, mis minu arvates muudavad kaardi elavamaks, sisestavad HTML-sisu muutujate või kohatäitjatega.

• Kaardiandmete allikas: Google kaardid
• Sõltuvus: GeoJSON / TopoJSON
• Litsents: MIT-litsents

OpenLayers

OpenLayers on suure jõudlusega avatud lähtekoodiga JavaScripti raamistik interaktiivsete kaartide loomiseks, kasutades erinevaid kaardistamisteenuseid. Võite valida kaardikihi allika, kasutades plaaditud kihti või vektorikihi mitmetest kaarditeenustest.

OpenLayer on mobiiltelefoni jaoks valmis, mis sobib kaartide loomiseks seadmete ja brauserite vahel. CSS-i saate kasutada oma kaardi erineva väljanägemise jaoks. Kaardi rakendamiseks veebis OpenLayersi abil on siin juhendaja, mis aitab.

• Kaardiandmete allikas: OpenStreetMap
• Sõltuvus: pole
• Litsents: Määratlemata

Infoleht

Arendajad andsid Infoleht põhifunktsioonid töötavad ideaalselt, hoides oma suurust väikestena, täiuslikult mobiilseadmetele. Konkreetsete funktsioonide puhul pikendage infolehte lihtsalt pluginate abil. Brošüüris on kõige rohkem vajalikke online-kaarte: plaatide kihid, hüpikaknad, markerid ja vabad vektorikihid nagu polüliinid, polügoonid, ringid või ristkülikud. Kaasas on kena vaikimisi disainilahendused, kuigi saate stiili CSS3 abil hõlpsalt kohandada.

Brošüüril on kõige rohkem mobiilside ja töölaua brauserite interaktiivseid funktsioone.

• Kaardiandmete allikas: OpenStreetMap
• Sõltuvus: pole
• Litsents: Määratlemata