13 JavaScript bibliotēkas, lai izveidotu interaktīvas un pielāgotas kartes

Mēs iepriekš parādījām Google kartes redaktoru un 10 citus rīkus, lai palīdzētu jums izveidot kartes. Tomēr, ja dodat priekšroku Javascript bibliotēkām, vai mēs esam saņēmuši jums ziņu. Šeit ir JS bibliotēkas, kuras varat izmantot, lai parādītu īpašus kartes marķierus, zīmētu pielāgotas maršruta līnijas vai pat parādītu dialoglodziņu, kad pārvietojat vai noklikšķināt uz dažiem kartes punktiem.

Personalizējiet savas kartes vēlamajā stilā - dažas no tām var veidot ar CSS - vai pielāgojiet savu karti, lai tā būtu tikpat interaktīva kā vēlaties. Kartes datu avots, katras bibliotēkas atkarības un licences ir iekļautas jūsu ērtībai.

Vairāk par Hongkiat:

• Kā veidot Google Maps
• Lietotāja atrašanās vietas iegūšana ar HTML5 ģeogrāfiskās atrašanās vietas API
• Datu vizualizācija: 20 + noderīgi rīki un resursi

GMaps

GMaps padara Google Maps pievienošanu un pielāgošanu vieglu. Bez kartes pievienošanas kartē varat arī pāris lietas, piemēram, polīni, kas var būt noderīgi maršruta zīmēšanai, īpašai izvēlnes vadībai un pat HTML elementiem.

GMaps ir saderīgs ar JSON formatētiem datiem, kurus varat izmantot, lai integrētu karti ar konkrētu lietotni, piemēram, Foursquare.

• Kartes datu avots: Google kartes
• Atkarības: neviens nav
• Licence: MIT licence

jHere

Pie 5KB JHERE parāda, ka izmērs nav svarīgs; jūs joprojām varat izveidot spēcīgu interaktīvu karti ar nedaudzām pielāgošanas iespējām. jHERE iegūst kartes vizualizāciju no HERE kartes, kas ir viens no populārākajiem Windows Phone kartes sniedzējiem.

Bibliotēku var paplašināt ar jaunām funkcijām, un šai bibliotēkai ir izstrādāti daži paplašinājumi, tostarp viens, lai pievienotu formas, maršrutus un pielāgotus marķierus.

• Kartes datu avots: ŠEIT Kartes
• Atkarības: jQuery vai ZeptoJS
• Licence: MIT licence

Kartogrāfs

Kartogrāfs sastāv no diviem failiem, Kartograph.ph, lai ģenerētu karti SVG formātā, un Kartograph.js, lai pievienotu interaktīvos elementus kartes augšpusē. Tā kā Kartograph.js ir uzcelts uz Raphael.js virsmas, karte labi darbosies līdz IE7. Jūs varat apskatīt interaktīvās kartes demonstrācijas, lai uzzinātu, ko Kartogrāfs var darīt.

• Kartes datu avots: Kartogrāfs
• Atkarības: Kartograph.py, Raphael un jQuery
• Licence: AGPL un LGPL

Mapael

jQuery Mapael ļauj izveidot kartes ar elegantu datu vizualizāciju, kā arī interaktivitāti. Piemēram, jūs varat izveidot karti un katram reģionam norādīt kartē dažādus krāsu reģionus. Varat arī pievienot rīku padomu reģionam, kā arī tādus notikumu rīkotājus kā klikšķis vai lidināties.

Karte ir veidota, izmantojot SEO, sniedzot alternatīvu saturu meklētājprogrammu robotiem, kas nespēj pārmeklēt JavaScript radīto saturu.

• Kartes datu avots: Raphael.js
• Atkarības: jQuery
• Licence: MIT licence

D3js

D3.js ir visaptveroša JavaScript bibliotēka, kas sniegs jūsu datus dzīvē caur HTML, SVG un CSS. D3 izmantošana ir diezgan dažāda, tostarp, lai izveidotu ļoti interaktīvu karti. Skatiet šo Pasaules Bankas globālās attīstības karti, un jūs redzēsiet iespējas, ko jūs varat veidot ar D3.js.

• Kartes datu avots: D3.js
• Atkarības: neviens nav
• Licence: nenoteikts

Datu kartes

Ja kartes izveidošana ar D3.js ir milzīga, varat to izmantot Datu kartes. DataMaps būtībā ir D3.js spraudnis, kas ir izstrādāts speciāli, lai izveidotu kartes. Tā pārmanto daudzas D3.js iespējas, tāpēc jūs varat izveidot vienkāršas vai ļoti pielāgotas kartes. Vai es minēju, ka karte ir atsaucīga?

• Kartes datu avots: D3.js
• Atkarības: D3.js un TopoJSON
• Licence: MIT licence

GeoChart

GeoChart ir vienkāršota Google karte, kas padara reģionu, marķierus un tekstu, nevis pilntiesīgu karti ar sīkām detaļām. Karte tiek ģenerēta SVG, un to var pielāgot daudzos veidos, tostarp mainīt reģiona krāsas, pievienojot uznirstošo logu un pielāgotus kartes marķierus..

• Kartes datu avots: Google kartes
• Atkarības: neviens nav
• Licence: Lasiet Google Maps TOS

Maplace

Maplace, jQuery spraudnis kartes ģenerēšanai, izmantojot Google Maps API v3. Maplace darbojas visās pārlūkprogrammās, ieskaitot IE6. Tātad tas ir vēl viens lielisks spraudnis, kas ir vērts jūsu uzmanību, ja vēlaties izveidot karti visvieglāk.

• Kartes datu avots: Google kartes
• Atkarības: jQuery
• Licence: MIT licence

Stingri

Būtībā ir JavaScript bibliotēka, kas izstrādāta, lai radītu ASV kartes. Bibliotēka ir salīdzinoši viegla, ņemot vērā, ka jūs varat pievienot interaktīvus elementus savām ģenerētajām kartēm.

• Kartes datu avots: Stately / SVG
• Atkarības: neviens nav
• Licence: MIT licence

GeoComplete

GeoComplete ir atsevišķa JavaScript bibliotēka. Bibliotēka kopā ar karti pievienos ievades lauku, kurā tiks rādīti pilsētu, valstu vai valstu ieteikumi.

• Kartes datu avots: Google kartes
• Atkarības: jQuery
• Licence: MIT licence

Kartes rīki

Kartes rīki nodrošina intuitīvu API, lai pievienotu Google Maps. Tā atbalsta ģeformatētu JSON datu, piemēram, TopoJSON un GeoJSON, ielādi, lai izveidotu karti. Papildus tam jūs varat pievienot animētus marķierus, kas, manuprāt, padarīs karti dzīvīgāku, ievietos HTML saturu ar mainīgajiem vai vietnes kontrolieriem..

• Kartes datu avots: Google kartes
• Atkarības: GeoJSON / TopoJSON
• Licence: MIT licence

OpenLayers

OpenLayers ir augstas veiktspējas atklātā pirmkoda JavaScript sistēma, lai izveidotu interaktīvas kartes, izmantojot dažādus kartēšanas pakalpojumus. Jūs varat izvēlēties kartes slāņa avotu, izmantojot flīžu slāni vai vektoru slāni no vairākiem kartes pakalpojumiem.

OpenLayer nāk mobilā, kas ir gatavs no kastes, piemērots karšu izveidei starp ierīcēm un pārlūkprogrammām. CSS var izmantot, lai skatītu savu karti citādi. Lai īstenotu karti savā tīmeklī, izmantojot OpenLayers, šeit ir apmācība, kas palīdzēs.

• Kartes datu avots: OpenStreetMap
• Atkarības: nav
• Licence: Nenoteikts

Buklets

Izstrādātāji deva Buklets pamatfunkcijas, lai darbotos perfekti, saglabājot mazu izmēru, ideāli piemērotu mobilajām ierīcēm. Konkrētām funkcijām, vienkārši paplašiniet lietošanas instrukciju, izmantojot spraudņus. Bukletā ir visvairāk nepieciešamo tiešsaistes karšu funkciju: flīžu slāņi, uznirstošie logi, marķieri un bezmaksas vektora slāņi, piemēram, polilīni, poligoni, apļi vai taisnstūri. Tas nāk ar jauku noklusējuma dizainu, lai gan jūs varat pielāgot stilu, izmantojot CSS3.

Brošūrā ir vislielākās lietošanas mijiedarbības iespējas gan mobilajiem, gan darbvirsmas pārlūkiem.

• Kartes datu avots: OpenStreetMap
• Atkarības: nav
• Licence: Nenoteikts