13 JavaScript-biblioteker til at oprette interaktive og tilpassede kort

Vi har tidligere haft Google Map Maker og 10 andre værktøjer til at hjælpe dig med at opbygge kort. Men hvis du foretrækker at bruge Javascript-biblioteker i stedet, har vi fået stillingen til dig. Her er de JS biblioteker, du kan bruge til at vise specielle kortmarkører, tegne brugerdefinerede rutelinjer eller endda vise en dialogboks, når du svæver eller klikker på visse punkter på kortet.

Tilpas dine kort i den ønskede stil - nogle af dem kan styles med CSS - eller Tilpas dit kort for at være så interaktivt, som du kan lide. Kilden til kortdata, afhængigheder og licenser for hvert bibliotek er medtaget for din bekvemmelighed.

Mere om Hongkiat:

• Sådan stiler du Google Maps
• Indhentning af brugerens placering med HTML5 Geolocation API
• Datavisualisering: 20+ nyttige værktøjer og ressourcer

GMaps

GMaps gør at tilføje og tilpasse Google Maps til en brise. Bortset fra at tilføje et kort kan du også et par ting i kortet, som f.eks. Polylines, som kan være nyttige til tegning af en rute, en speciel menu kontrol og endda HTML elementer.

GMaps er kompatibel med JSON formaterede data, som du kan bruge til at integrere dit kort med en bestemt app, som Foursquare.

• Kort datakilde: Google kort
• Afhængigheder: ingen
• Licens: MIT-licens

jHere

Ved 5KB viser jHERE dig, at størrelse ikke betyder noget; Du kan stadig opbygge et stærkt interaktivt kort med en håndfuld tilpasningsmuligheder. jHERE henter kortvisualisering fra HER-kort, som er en af ​​de mest populære kortudbydere til Windows Phone.

Biblioteket kan udvides med ny funktionalitet, og der er et par udvidelser udviklet til dette bibliotek, herunder en til at tilføje former, ruter og brugerdefinerede markører.

• Kort datakilde: HER Maps
• Afhængigheder: jQuery eller ZeptoJS
• Licens: MIT-licens

Kartograph

Kartograph består af to filer, Kartograph.ph for at generere kortet i SVG-format, og Kartograph.js for at tilføje interaktive elementer øverst på kortet. Da Kartograph.js er bygget oven på Raphael.js, ville kortet fungere fint ned til IE7. Du kan se på de interaktive kortdemoer for at opdage, hvad Kartograph kan gøre.

• Kort datakilde: Kartograf
• Afhængigheder: Kartograph.py, Raphael og jQuery
• Licens: AGPL og LGPL

Mapael

jQuery Mapael giver dig mulighed for at oprette kort med elegant data visualisering samt interaktivitet. Du kan f.eks. Oprette et kort og udpege hver region på kortet med forskellige farver baseret på region. Du kan også tilføje værktøjstip på regionen, såvel som hændelseshåndteringsprogrammer som klik eller hover.

Kortet er bygget med SEO i tankerne ved at levere alternativt indhold til søgemaskinerobotter, der ikke kan gennemgå JavaScript-genereret indhold.

• Kort datakilde: Raphael.js
• Afhængigheder: jQuery
• Licens: MIT-licens

D3js

D3.js er et omfattende JavaScript-bibliotek, der vil bringe dine data til live via HTML, SVG og CSS. D3-brugen er meget varieret, herunder til opbygning af et meget interaktivt kort. Se dette kort over Verdensbankens globale udvikling, og du vil se mulighederne for, hvad du kan bygge med D3.js.

• Kort datakilde: D3.js
• Afhængigheder: ingen
• Licens: Udefineret

DataMaps

Hvis du opbygger et kort med D3.js er overvældende, kan du bruge DataMaps. DataMaps er i det væsentlige en D3.js plugin, der er udviklet specielt til at opbygge kort. Det arver mange af D3.js kapacitet, derfor kan du opbygge enkle eller meget tilpassede kort med det. Sagde jeg, at kortet er lydhørt?

• Kort datakilde: D3.js
• Afhængigheder: D3.js og TopoJSON
• Licens: MIT-licens

GeoChart

GeoChart er et forenklet Google Map, der gør regionen, markører og tekst, i stedet for et fuldt udbygget kort med små detaljer. Kortet genereres i SVG, og kan tilpasses på mange måder, herunder at ændre regionens farver, tilføje popup og brugerdefinerede kortmarkører.

• Kort datakilde: Google kort
• Afhængigheder: ingen
• Licens: Læs Google Maps TOS

Maplace

Maplace, et jQuery-plugin til generering af kort gennem Google Maps API v3. Maplace fungerer i alle browsere, herunder IE6. Så dette er en anden stor plugin værd at være opmærksom på, hvis du vil opbygge kort på den nemmeste måde.

• Kort datakilde: Google kort
• Afhængigheder: jQuery
• Licens: MIT-licens

stately

Stately er JavaScript-bibliotek, der er udviklet til at generere amerikanske kort. Biblioteket er sammenligneligt let, da man kan tilføje interaktive elementer oven på dine genererede kort.

• Kort datakilde: Stately / SVG
• Afhængigheder: ingen
• Licens: MIT-licens

GeoComplete

GeoComplete er et særskilt JavaScript-bibliotek alene. Biblioteket vil tilføje et indtastningsfelt sammen med kortet, som vil vise forslag til byer, lande eller stater, mens du skriver.

• Kort datakilde: Google kort
• Afhængigheder: jQuery
• Licens: MIT-licens

Kortværktøjer

Kortværktøjer giver intuitivt API for at tilføje Google Maps. Den understøtter ilægning af geoformaterede JSON-data som TopoJSON og GeoJSON for at gøre kortet. Derudover kan du tilføje animerede markører, som jeg tror vil gøre kortet mere livligt, indsæt HTML-indhold med variabler eller pladsholdere ala Håndbjælker.

• Kort datakilde: Google kort
• Afhængigheder: GeoJSON / TopoJSON
• Licens: MIT-licens

OpenLayers

OpenLayers er et højtydende open source JavaScript-rammeværk til at opbygge interaktive kort ved hjælp af forskellige kortlægningstjenester. Du kan vælge kortlagskilden ved hjælp af fliselag eller vektorlag fra en række korttjenester.

OpenLayer kommer mobil klar ud af kassen, egnet til at opbygge kort på tværs af enheder og browsere. Du kan bruge CSS til et andet udseende af dit kort. At gennemføre kortet på dit websted ved hjælp af OpenLayers, her er en vejledning, der vil hjælpe.

• Kort datakilde: OpenStreetMap
• Afhængigheder: ingen
• Licens: Udefineret

folder

Udviklere gav folder Grundlæggende funktioner til at fungere perfekt, idet størrelsen er lille, perfekt til mobile enheder. For specifikke funktioner skal du blot udvide folderen ved hjælp af plugins. Blade har de fleste online kortfunktioner, du har brug for: fliser, popup, markører og gratis vektorlag som polyliner, polygoner, cirkler eller rektangler. Den leveres med flot standarddesign, selvom du nemt kan tilpasse stilen ved hjælp af CSS3.

Blade har de mest anvendte interaktionsfunktioner både til mobile og stationære browsere.

• Kort datakilde: OpenStreetMap
• Afhængigheder: ingen
• Licens: Udefineret