13 JavaScript-könyvtárak az interaktív és testreszabott térképek létrehozásához

Korábban szerepeltünk a Google Térképkészítő és 10 további eszközzel, amelyek segítenek a térképek létrehozásában. Ha azonban inkább a Javascript könyvtárak használatát szeretné használni, akkor megkaptuk a posztot. Íme a JS könyvtárak, amelyek segítségével speciális térképjelzőket jeleníthet meg, egyedi útvonalvonalakat rajzolhat, vagy akár párbeszédablakot is megjeleníthet, ha a térkép bizonyos pontjaira húzza vagy kattint..

Személyre szabhatja térképeit a kívánt stílusban - néhányat CSS-el lehet kialakítani - vagy testreszabhatja térképét úgy, hogy olyan interaktív legyen, mint amilyet szeretne. A térkép adatai, az egyes könyvtárak függőségei és engedélyei megtalálhatók az Ön kényelme érdekében.

További információ a Hongkiatról:

• A Google Térkép stílusa
• Felhasználói hely megszerzése HTML5 Geolocation API-val
• Adatmegjelenítés: 20+ hasznos eszköz és erőforrás

GMaps

GMaps teszi a Google Térkép hozzáadását és testreszabását. A térkép hozzáadása mellett pár dolgot is beilleszthet a térképbe, mint például az egyenes rajzokat, egy speciális menüvezérlést és még a HTML-elemeket is hasznosító polilinek.

A GMaps kompatibilis a JSON formázott adatokkal, amelyek segítségével a térképet egy adott alkalmazással integrálhatja, például a Foursquare.

• Térképadatok forrása: Google térkép
• Dependencies: egyik sem
• Engedély: MIT licenc

jHere

5KB-nál a JHERE megmutatja, hogy a méret nem számít; még mindig egy hatékony interaktív térképet építhetsz egy pár testreszabási opcióval. A JHERE térképi megjelenítést a HERE térképen hoz létre, amely a Windows Phone egyik legnépszerűbb térképszolgáltatója.

A könyvtár új funkciókkal bővíthető, és ehhez a könyvtárhoz néhány bővítmény is megtalálható, beleértve az alakzatok, útvonalak és egyéni jelölők hozzáadását..

• Térképadatok forrása: HERE Maps
• Dependencies: jQuery vagy ZeptoJS
• Engedély: MIT licenc

Kartograph

Kartograph két fájlból áll, a Kartograph.ph-t SVG-formátumú térkép létrehozásához, a Kartograph.js-ot pedig interaktív elemek hozzáadásához a térkép tetején. Mivel a Kartograph.js Raphael.js tetején épült, a térkép jól működik az IE7-re. Nézd meg az interaktív térkép demókat, hogy megtudd, mit teheti a Kartograph.

• Térképadatok forrása: Kartográf
• Dependencies: Kartograph.py, Raphael és jQuery
• Engedély: AGPL és LGPL

Mapael

jQuery Mapael lehetővé teszi, hogy olyan térképeket hozzon létre, amelyek elegáns adatmegjelenítéssel és interaktivitással rendelkeznek. Például létrehozhat egy térképet, és a régiónként különböző színekkel jelölheti meg a térképen minden egyes régiót. Szintén hozzáadhat eszköztípust a régióhoz, valamint az eseménykezelőket is kettyenés vagy lebeg.

A térképet SEO szemlélteti, ha alternatív tartalmat biztosít a keresőmotor robotok számára, amelyek nem képesek a JavaScript által generált tartalom feltérképezésére.

• Térképadatok forrása: Raphael.js
• Dependencies: jQuery
• Engedély: MIT licenc

D3js

D3.js egy átfogó JavaScript könyvtár, amely az adatokat a HTML, az SVG és a CSS segítségével fogja életre kelteni. A D3 használata igen változatos, többek között egy nagyon interaktív térkép megépítéséhez. Tekintse meg a World Bank Global Development térképét, és látni fogja a D3.js-al való építkezés lehetőségeit.

• Térképadatok forrása: D3.js
• Dependencies: egyik sem
• Engedély: Határozatlan

DataMaps

Ha egy térképet D3.js-tal építettek, akkor ez az egész DataMaps. A DataMaps lényegében egy D3.js bővítmény, amelyet kifejezetten a térképek létrehozására fejlesztettek ki. A D3.js számos képességét örökölte, így egyszerű vagy nagyon testre szabott térképeket is készíthet vele. Megemlítettem, hogy a térkép érzékeny?

• Térképadatok forrása: D3.js
• Dependencies: D3.js és TopoJSON
• Engedély: MIT licenc

GeoChart

A GeoChart egy egyszerűsített Google Térkép, amely a régiót, a jelölőket és a szöveget teszi ki, a teljes körű, apró részletekkel rendelkező térkép helyett. A térkép SVG-ben jön létre, és sokféle módon testreszabható, beleértve a régiók színeinek megváltoztatását, felugró ablakok és egyedi térképjelzők hozzáadását..

• Térképadatok forrása: Google térkép
• Dependencies: egyik sem
• Engedély: Olvassa el a Google Térkép TOS-t

Maplace

Maplace, egy jQuery plugin a térkép létrehozásához a Google Térkép API v3 segítségével. A Maplace minden böngészőben működik, beleértve az IE6-ot is. Tehát ez egy másik nagyszerű plugin érdemes a figyelmet, ha a lehető legegyszerűbb módon szeretne térképet készíteni.

• Térképadatok forrása: Google térkép
• Dependencies: jQuery
• Engedély: MIT licenc

Tekintélyes

Állandóan a JavaScript könyvtár, amelyet az amerikai térképek létrehozására fejlesztettek ki. A könyvtár viszonylag könnyű, mivel interaktív elemeket adhat hozzá a generált térképek tetejére.

• Térképadatok forrása: Stately / SVG
• Dependencies: egyik sem
• Engedély: MIT licenc

GeoComplete

A GeoComplete önálló JavaScript-könyvtár. A könyvtár hozzáad egy beviteli mezőt a térképhez, amely a városok, országok vagy államok javaslatait mutatja be a beíráskor.

• Térképadatok forrása: Google térkép
• Dependencies: jQuery
• Engedély: MIT licenc

Térképeszközök

A Térképeszközök intuitív API-t biztosít a Google Térkép hozzáadásához. Támogatja a földrajzi formátumú JSON adatok, például a TopoJSON és a GeoJSON betöltését a térkép megjelenítéséhez. Ráadásul olyan animált jelölőket is hozzáadhat, amelyek szerintem a térképet élénkebbé teszi, HTML-tartalmakat kell beilleszteni változókkal vagy helyőrzőkkel..

• Térképadatok forrása: Google térkép
• Dependencies: GeoJSON / TopoJSON
• Engedély: MIT licenc

OpenLayers

OpenLayers egy nagy teljesítményű nyílt forráskódú JavaScript keretrendszer, amely interaktív térképeket épít fel különböző térképezési szolgáltatások használatával. Kiválaszthatja a térképréteg forrását csempézett réteggel vagy vektorréteggel számos térképszolgáltatásból.

Az OpenLayer készen áll a mobilkészülékre, amely alkalmas az eszközök és böngészők térképeinek építésére. Használhatja a CSS-t a térkép más megjelenítéséhez. Ahhoz, hogy a térképet az interneten az OpenLayers használatával hajtsa végre, itt van egy útmutató, amely segít.

• Térképadatok forrása: OpenStreetMap
• Dependencies: egyik sem
• Engedély: Határozatlan

Szórólap

A fejlesztők adták Szórólap Az alapvető funkciók tökéletesen működnek, méretük kicsi, tökéletes a mobil eszközökhöz. Speciális funkciók esetén a bővítményt csak bővítményekkel bővítse. A szórólap a legtöbb online térkép funkcióval rendelkezik, amire szüksége van: csempe rétegek, felugró ablakok, jelölők és szabad vektorrétegek, mint a polylinek, sokszögek, körök vagy téglalapok. Jó alapértelmezett mintákkal rendelkezik, bár a CSS3 segítségével könnyedén testre szabhatja a stílust.

A szórólap a mobil és asztali böngészők számára a legtöbb használati interakciós funkcióval rendelkezik.

• Térképadatok forrása: OpenStreetMap
• Dependencies: egyik sem
• Engedély: Határozatlan