13 „JavaScript“ bibliotekos sukuria interaktyvius ir pritaikytus žemėlapius

Anksčiau mes rodėme „Google“ žemėlapių kūrimo priemonę ir 10 kitų įrankių, padedančių kurti žemėlapius. Tačiau, jei pageidaujate naudoti „Javascript“ bibliotekas, ar mes turėjome jums pranešimą. Čia yra JS bibliotekos, kuriomis galite parodyti specialius žemėlapio žymenis, piešti pasirinktines maršruto linijas arba net rodyti dialogo langą, kai slenkate arba paspaudžiate tam tikruose žemėlapio taškuose.

Suasmeninkite savo žemėlapius pagal pageidaujamą stilių - kai kurie iš jų gali būti suformuoti su CSS - arba pritaikykite savo žemėlapį taip, kad būtų kuo interaktyvesnis. Jūsų patogumui pateikiami kiekvieno bibliotekos duomenų šaltiniai, priklausomybės ir licencijos.

Daugiau apie „Hongkiat“:

• Kaip sukurti „Google“ žemėlapius
• Naudotojo vietos gavimas naudojant HTML5 geolokacijos API
• Duomenų vizualizavimas: 20 + naudingų įrankių ir išteklių

GMaps

GMaps „Google“ žemėlapių pridėjimas ir pritaikymas vėjas. Be žemėlapio pridėjimo, į žemėlapį galite įtraukti ir keletą dalykų, pvz., Polylines, kurios gali būti naudingos kuriant maršrutą, specialų meniu valdymą ir netgi HTML elementus.

GMaps suderinamas su JSON formatais, kuriuos galite naudoti norėdami integruoti žemėlapį su konkrečia programa, pvz., „Foursquare“.

• Žemėlapio duomenų šaltinis: Google žemėlapiai
• Priklausomybės: nė vienas
• Licencija: MIT licencija

jHere

5KB, JHERE parodo, kad šis dydis nesvarbu; jūs vis dar galite sukurti galingą interaktyvų žemėlapį, kuriame yra keletas tinkinimo parinkčių. jHERE atvaizduoja žemėlapio vaizdą iš HERE žemėlapio, kuris yra vienas iš populiariausių „Windows Phone“ žemėlapių teikėjų.

Biblioteka gali būti išplėsta naujomis funkcijomis ir šiai bibliotekai sukurta keletas plėtinių, įskaitant vieną, skirtą formų, maršrutų ir pasirinktinių žymeklių pridėjimui.

• Žemėlapio duomenų šaltinis: HERE Žemėlapiai
• Priklausomybės: jQuery arba ZeptoJS
• Licencija: MIT licencija

Kartografas

Kartografas susideda iš dviejų failų: Kartograph.ph, kad būtų sukurtas žemėlapis SVG formatu, ir Kartograph.js, jei norite pridėti interaktyvių elementų žemėlapyje. Kadangi Kartograph.js yra pastatytas ant Raphael.js, žemėlapis gerai veiktų iki IE7. Galite pažvelgti į interaktyvų žemėlapių demonstracijas, kad sužinotumėte, ką gali padaryti Kartografas.

• Žemėlapio duomenų šaltinis: Kartografas
• Priklausomybės: Kartograph.py, Raphael ir jQuery
• Licencija: AGPL ir LGPL

Mapael

jQuery Mapael leidžia sukurti žemėlapius su elegantišku duomenų vizualizavimu ir interaktyvumu. Pavyzdžiui, galite sukurti žemėlapį ir kiekviename regione pažymėti skirtingus regione esančius spalvas. Taip pat galite pridėti įrankių patarimų regione, kaip ir renginių tvarkytojai spustelėkite arba pakimba.

Turint omenyje, kad žemėlapis yra sukurtas naudojant SEO, pateikiamas alternatyvus turinio paieškos robotams, kurie negali nuskaityti „JavaScript“ sukurto turinio.

• Žemėlapio duomenų šaltinis: Raphael.js
• Priklausomybės: jQuery
• Licencija: MIT licencija

D3js

D3.js yra išsami „JavaScript“ biblioteka, kuri atneš jūsų duomenis į HTML, SVG ir CSS. D3 naudojimas yra gana įvairus, įskaitant labai interaktyvaus žemėlapio kūrimą. Žr. Šį Pasaulio banko pasaulinės plėtros žemėlapį ir pamatysite galimybes, kurias galite sukurti su D3.js.

• Žemėlapio duomenų šaltinis: D3.js
• Priklausomybės: nė vienas
• Licencija: Neapibrėžtas

„DataMaps“

Jei kuriate žemėlapį su D3.js, galite naudoti „DataMaps“. „DataMaps“ iš esmės yra D3.js įskiepis, sukurtas specialiai žemėlapiams kurti. Jis paveldi daugelį D3.js gebėjimų, todėl galite su juo sukurti paprastus arba labai pritaikytus žemėlapius. Ar paminėjau, kad žemėlapis reaguoja?

• Žemėlapio duomenų šaltinis: D3.js
• Priklausomybės: D3.js ir TopoJSON
• Licencija: MIT licencija

GeoChart

„GeoChart“ yra supaprastintas „Google“ žemėlapis, suteikiantis regioną, žymeklius ir tekstą, o ne pilnavertis žemėlapis su mažomis detalėmis. Žemėlapis generuojamas SVG ir gali būti pritaikytas daugeliu būdų, įskaitant regiono spalvų keitimą, pridedant iššokantį langą ir pasirinktinius žemėlapio žymenis.

• Žemėlapio duomenų šaltinis: Google žemėlapiai
• Priklausomybės: nė vienas
• Licencija: Skaitykite „Google“ žemėlapių TOS

Maplace

Maplace, „JQuery“ papildinys, skirtas žemėlapiui kurti naudojant „Google“ žemėlapių API v3. Maplace veikia visose naršyklėse, įskaitant IE6. Taigi, tai yra dar vienas puikus dėmesys, kurį verta vertinti, jei norite sukurti žemėlapį kuo lengviau.

• Žemėlapio duomenų šaltinis: Google žemėlapiai
• Priklausomybės: jQuery
• Licencija: MIT licencija

Tvirtai

Tikrai yra „JavaScript“ biblioteka, sukurta kurti JAV žemėlapius. Biblioteka yra palyginti lengva, atsižvelgiant į tai, kad galite sukurti interaktyvius elementus į savo sukurtus žemėlapius.

• Žemėlapio duomenų šaltinis: Stately / SVG
• Priklausomybės: nė vienas
• Licencija: MIT licencija

GeoComplete

GeoComplete yra atskira „JavaScript“ biblioteka. Biblioteka kartu su žemėlapiu pridės įvesties lauką, kuriame bus rodomi miestų, šalių ar valstybių siūlymai.

• Žemėlapio duomenų šaltinis: Google žemėlapiai
• Priklausomybės: jQuery
• Licencija: MIT licencija

Žemėlapio įrankiai

Žemėlapio įrankiai suteikia intuityviosios API, kad pridėtų „Google“ žemėlapius. Jis palaiko geografinio formato JSON duomenų, pvz., „TopoJSON“ ir „GeoJSON“, įkėlimą, kad būtų rodomas žemėlapis. Be to, galite pridėti animacinius žymenis, kurie, mano manymu, taps gyvybingesni, įterpti HTML turinį su kintamaisiais arba vietos žymekliais.

• Žemėlapio duomenų šaltinis: Google žemėlapiai
• Priklausomybės: GeoJSON / TopoJSON
• Licencija: MIT licencija

OpenLayers

OpenLayers yra aukštos kokybės atvirojo kodo „JavaScript“ sistema, skirta kurti interaktyvius žemėlapius naudojant įvairias žemėlapių sudarymo paslaugas. Galite pasirinkti žemėlapio sluoksnio šaltinį, naudodami plytelių sluoksnį arba vektorinį sluoksnį iš kelių žemėlapių paslaugų.

Atidaryti „OpenLayer“ mobiliuosius įrenginius iš lauko, tinkančius kurti žemėlapius visuose įrenginiuose ir naršyklėse. CSS galite naudoti kitokiam žemėlapio išvaizdai. Norėdami įdiegti žemėlapį savo žiniatinklyje naudodami „OpenLayers“, čia rasite pamoką, kuri padės.

• Žemėlapio duomenų šaltinis: OpenStreetMap
• Priklausomybės: nė vienas
• Licencija: Neapibrėžtas

Informacinis lapelis

Programuotojai davė Informacinis lapelis pagrindinės funkcijos puikiai veikia, išlaikant mažą dydį, puikiai tinka mobiliesiems įrenginiams. Konkrečioms funkcijoms naudokite informacinį lapelį naudodami papildinius. Brošiūroje yra daugybė internetinių žemėlapių funkcijų, kurių jums reikia: plytelių sluoksniai, iššokantys langai, žymekliai ir nemokami vektoriniai sluoksniai, pavyzdžiui, polilinai, poligonai, apskritimai ar stačiakampiai. Jame yra gražus numatytasis dizainas, nors galite lengvai pritaikyti stilių naudodami CSS3.

Brošiūroje yra daugiausiai naudojimosi sąveikos funkcijų tiek mobiliesiems, tiek staliniams naršyklėms.

• Žemėlapio duomenų šaltinis: OpenStreetMap
• Priklausomybės: nė vienas
• Licencija: Neapibrėžtas