13 JavaScript-biblioteker for å lage interaktive og tilpassede kart

Vi har tidligere omtalt Google Map Maker og 10 andre verktøy for å hjelpe deg med å bygge kart. Men hvis du foretrekker å bruke Javascript-bibliotek i stedet, har vi posten for deg. Her er JS-bibliotekene du kan bruke til å vise spesielle kartmarkører, tegne egendefinerte rutelinjer eller til og med vise en dialogboks når du svinger eller klikker på bestemte punkter på kartet.

Tilpass kortene dine i den stilen du vil ha - noen av dem kan styles med CSS - eller tilpass kartet for å være så interaktivt som du vil. Kilden til kartdataene, avhengighetene og lisensene til hvert bibliotek er inkludert for din bekvemmelighet.

Mer om Hongkiat:

• Slik styler du Google Maps
• Skaffe brukerplassering med HTML5 Geolocation API
• Datavisualisering: 20+ nyttige verktøy og ressurser

GMaps

GMaps gjør å legge til og tilpasse Google Maps til en bris. Bortsett fra å legge til et kart, kan du også et par ting i kartet, for eksempel polylines som kan være nyttige for å tegne en rute, en spesiell menykontroll og til og med HTML-elementer.

GMaps er kompatibel med JSON formaterte data som du kan bruke til å integrere kartet med en bestemt app, som Foursquare.

• Kartdatakilde: Google Kart
• avhengig: ingen
• Tillatelse: MIT-lisens

jHere

Ved 5KB viser jHERE deg at størrelsen ikke betyr noe; Du kan fortsatt bygge et kraftig interaktivt kart med en håndfull tilpasningsalternativer. jHERE danner kartvisualisering fra HERE-kartet, som er en av de mest populære kartleverandørene for Windows Phone.

Biblioteket kan utvides med ny funksjonalitet, og det er et par utvidelser utviklet for dette biblioteket, inkludert en for å legge til former, ruter og tilpassede markører.

• Kartdatakilde: HER Kart
• avhengig: jQuery eller ZeptoJS
• Tillatelse: MIT-lisens

Kartograph

Kartograph består av to filer, Kartograph.ph for å generere kartet i SVG-format, og Kartograph.js for å legge til interaktive elementer på toppen av kartet. Siden Kartograph.js er bygget på toppen av Raphael.js, ville kartet fungere pent ned til IE7. Du kan se på de interaktive kartdemoerene for å finne ut hva Kartograph kan gjøre.

• Kartdatakilde: Kartograf
• avhengig: Kartograph.py, Raphael og jQuery
• Tillatelse: AGPL og LGPL

Mapael

jQuery Mapael lar deg lage kart med elegant datavisualisering samt interaktivitet. Du kan for eksempel lage et kart og angi hver region på kartet med forskjellige farger basert på region. Du kan også legge til verktøytips på regionen, så vel som hendelseshåndtere som klikk eller sveve.

Kartet er bygget med SEO i tankene ved å gi alternativt innhold til roboter i søkemotoren som ikke kan gjennomsøke JavaScript-generert innhold.

• Kartdatakilde: Raphael.js
• avhengig: jQuery
• Tillatelse: MIT-lisens

D3js

D3.js er et omfattende JavaScript-bibliotek som vil bringe dataene dine til livs gjennom HTML, SVG og CSS. D3 bruk er ganske variert, inkludert for å bygge et svært interaktivt kart. Se dette kartet over Verdensbanken Global Development, og du vil se mulighetene for det du kan bygge med D3.js.

• Kartdatakilde: D3.js
• avhengig: ingen
• Tillatelse: undefined

DataMaps

Hvis du bygger et kart med D3.js er overveldende, kan du bruke det DataMaps. DataMaps er i hovedsak et D3.js-plugin som er utviklet spesielt for å bygge kart. Det arver mange av mulighetene til D3.js, derfor kan du bygge enkle eller veldig tilpassede kart med det. Nevnte jeg at kartet er lydhør?

• Kartdatakilde: D3.js
• avhengig: D3.js og TopoJSON
• Tillatelse: MIT-lisens

GeoChart

GeoChart er et forenklet Google Map som gjør region, markører og tekst, i stedet for et fullverdig kart med små detaljer. Kartet genereres i SVG, og kan tilpasses på mange måter, inkludert å endre regionens farger, legge til popup og tilpassede kartmarkører.

• Kartdatakilde: Google Kart
• avhengig: ingen
• Tillatelse: Les Google Maps TOS

Maplace

Maplace, en jQuery-plugin for å generere kart gjennom Google Maps API v3. Maplace fungerer i alle nettlesere, inkludert IE6. Så dette er en annen flott plugin verdt oppmerksomheten din hvis du vil bygge kart på den enkleste måten.

• Kartdatakilde: Google Kart
• avhengig: jQuery
• Tillatelse: MIT-lisens

stase~~POS=TRUNC

Stately er JavaScript-bibliotek som er utviklet for å generere amerikanske kart. Biblioteket er relativt lett, med tanke på at du kan legge til interaktive elementer på toppen av de genererte kartene dine.

• Kartdatakilde: Stately / SVG
• avhengig: ingen
• Tillatelse: MIT-lisens

GeoComplete

GeoComplete er et eget JavaScript-bibliotek på egen hånd. Biblioteket legger til et inntastingsfelt sammen med kartet, som vil vise forslag til byer, land eller stater når du skriver.

• Kartdatakilde: Google Kart
• avhengig: jQuery
• Tillatelse: MIT-lisens

Kartverktøy

Kartverktøy gir intuitiv API for å legge til Google Maps. Den støtter lasting av geoformaterte JSON-data som TopoJSON og GeoJSON for å gjengi kartet. På toppen av det, kan du legge til animerte markører som jeg tror vil gjøre kartet mer livlig, sett inn HTML-innhold med variabler eller plassholdere ala Håndtak.

• Kartdatakilde: Google Kart
• avhengig: GeoJSON / TopoJSON
• Tillatelse: MIT-lisens

OpenLayers

OpenLayers er et ypperlig open source JavaScript-rammeverk for å bygge interaktive kart ved hjelp av ulike kartleggingstjenester. Du kan velge kartlagskilden ved hjelp av flislagt lag eller vektorlag fra flere karttjenester.

OpenLayer kommer mobil klar ut av boksen, egnet for å bygge kart over enheter og nettlesere. Du kan bruke CSS til et annet utseende på kartet ditt. For å implementere kartet på Internett ved hjelp av OpenLayers, er det en opplæring som vil hjelpe.

• Kartdatakilde: OpenStreetMap
• avhengig: ingen
• Tillatelse: Udefinert

Hefte

Utviklere ga Hefte grunnleggende funksjoner for å fungere perfekt, holder størrelsen liten, perfekt for mobile enheter. For spesifikke funksjoner, bare utvide bladet ved hjelp av plugins. Leaflet har de fleste online kartfunksjoner du trenger: flislag, popup, markører og gratis vektorlag som polyliner, polygoner, sirkler eller rektangler. Den leveres med flotte standarddesign, selv om du enkelt kan tilpasse stilen med CSS3.

Leaflet har de fleste bruksinteraksjonsfunksjonene både for mobile og stasjonære nettlesere.

• Kartdatakilde: OpenStreetMap
• avhengig: ingen
• Tillatelse: Udefinert