13 JavaScript-bibliotek för att skapa interaktiva och anpassade kartor

Vi har tidigare presenterat Google Map Maker och 10 andra verktyg som hjälper dig att bygga kartor. Om du föredrar att använda Javascript-bibliotek istället, har vi fått inlägget för dig. Här är de JS-bibliotek som du kan använda för att visa särskilda kartmarkörer, rita anpassade rutlinjer eller till och med visa en dialogruta när du svävar eller klickar på vissa punkter på kartan.

Anpassa dina kartor i den stil du vill ha - några av dem kan stylas med CSS - eller Anpassa din karta så att den är så interaktiv som du vill. Källan till kartdata, beroenden och licenser för varje bibliotek har inkluderats för din bekvämlighet.

Mer om Hongkiat:

• Så stilar du Google Maps
• Hämta användarplats med HTML5 Geolocation API
• Datavisualisering: 20 + användbara verktyg och resurser

GMaps

GMaps gör att lägga till och anpassa Google Maps till en bris. Bortsett från att du lägger till en karta kan du också ett par saker i kartan, till exempel polyliner som kan vara användbara för att rita en rutt, en speciell menykontroll och till och med HTML-element.

GMaps är kompatibel med JSON formaterad data som du kan använda för att integrera din karta med en viss app, som Foursquare.

• Kartdatakälla: Google kartor
• beroenden: ingen
• Licens: MIT-licens

jHere

Vid 5KB visar jHERE dig att storleken inte spelar någon roll; Du kan fortfarande bygga en kraftfull interaktiv karta med en handfull anpassningsalternativ. jHERE härleder kartvisualisering från HERE-kartan, vilket är en av de mest populära kartleverantörerna för Windows Phone.

Biblioteket kan utökas med ny funktionalitet, och det finns ett antal tillägg utvecklade för detta bibliotek, inklusive en för att lägga till former, rutter och anpassade markörer.

• Kartdatakälla: HÄR Kartor
• beroenden: jQuery eller ZeptoJS
• Licens: MIT-licens

Kartograph

Kartograph består av två filer, Kartograph.ph för att generera kartan i SVG-format och Kartograph.js för att lägga till interaktiva element ovanpå kartan. Eftersom Kartograph.js är byggt ovanpå Raphael.js skulle kartan fungera snyggt till IE7. Du kan ta en titt på de interaktiva kartdemonstrationerna för att upptäcka vad Kartograph kan göra.

• Kartdatakälla: Kartograf
• beroenden: Kartograph.py, Raphael och jQuery
• Licens: AGPL och LGPL

Mapael

jQuery Mapael kan du skapa kartor med elegant datavisualisering samt interaktivitet. Du kan till exempel skapa en karta och ange varje region på kartan med olika färger baserat på region. Du kan också lägga till verktygstips i regionen, liksom händelseshanterare som klick eller sväva.

Kartan är byggd med SEO i åtanke genom att tillhandahålla alternativ innehåll för sökrobotar som inte kan krypa i JavaScript-genererat innehåll.

• Kartdatakälla: Raphael.js
• beroenden: jQuery
• Licens: MIT-licens

D3js

d3.js är ett omfattande JavaScript-bibliotek som kommer att ge dina data till liv genom HTML, SVG och CSS. D3-användningen är ganska varierad, inklusive för att bygga en mycket interaktiv karta. Se den här kartan över Världsbankens Global Development och du ser möjligheterna till vad du kan bygga med D3.js.

• Kartdatakälla: D3.js
• beroenden: ingen
• Licens: Odefinierad

DataMaps

Om du bygger en karta med D3.js är överväldigande kan du använda DataMaps. DataMaps är i huvudsak ett D3.js-plugin som utvecklats speciellt för att bygga kartor. Det ärver mycket av D3.js kapacitet, så du kan bygga enkla eller mycket anpassade kartor med den. Nämnde jag att kartan är mottaglig?

• Kartdatakälla: D3.js
• beroenden: D3.js och TopoJSON
• Licens: MIT-licens

GeoChart

GeoChart är en förenklad Google Map som gör region, markörer och text istället för en fullfjädrad karta med små detaljer. Kartan genereras i SVG, och kan anpassas på många sätt, inklusive att ändra regionens färger, lägga till popup och anpassade kartmarkörer.

• Kartdatakälla: Google kartor
• beroenden: ingen
• Licens: Läs Google Maps TOS

Maplace

Maplace, ett jQuery-plugin för att generera karta genom Google Maps API v3. Maplace fungerar i alla webbläsare, inklusive IE6. Så det här är en annan stor plugin som är värt din uppmärksamhet om du vill bygga kartan på det enklaste sättet.

• Kartdatakälla: Google kartor
• beroenden: jQuery
• Licens: MIT-licens

Ståtlig

Stately är JavaScript-bibliotek som är utvecklat för att generera US-kartor. Biblioteket är jämförbart lätt med tanke på att du kan lägga till interaktiva element ovanpå dina genererade kartor.

• Kartdatakälla: Stately / SVG
• beroenden: ingen
• Licens: MIT-licens

GeoComplete

GeoComplete är ett separat JavaScript-bibliotek på egen hand. Biblioteket lägger till ett inmatningsfält tillsammans med kartan, som visar förslag på städer, länder eller stater när du skriver.

• Kartdatakälla: Google kartor
• beroenden: jQuery
• Licens: MIT-licens

Kartverktyg

Kartverktyg ger intuitivt API för att lägga till Google Maps. Den stöder laddning av geoformaterade JSON-data som TopoJSON och GeoJSON för att göra kartan. Utöver det kan du lägga till animerade markörer som jag tror kommer att göra kartan mer livlig, infoga HTML-innehåll med variabler eller platshållare ala Hållare.

• Kartdatakälla: Google kartor
• beroenden: GeoJSON / TopoJSON
• Licens: MIT-licens

OpenLayers

OpenLayers är ett högpresterande open source JavaScript-ramverk för att bygga interaktiva kartor med olika kartläggningstjänster. Du kan välja kortslagskälla med kakelskikt eller vektorlager från ett antal karttjänster.

OpenLayer kommer mobilen redo ut ur lådan, lämplig för att bygga kartor över enheter och webbläsare. Du kan använda CSS för ett annat utseende på kartan. För att implementera kartan på din webbsida med OpenLayers, här är en handledning som hjälper.

• Kartdatakälla: OpenStreetMap
• beroenden: ingen
• Licens: Odefinierad

Folder

Utvecklare gav Folder grundläggande funktioner för att fungera perfekt, hålla sin storlek liten, perfekt för mobila enheter. För specifika funktioner, utvidga bara bipacksedel med plugins. Broschyren har de flesta onlinekartfunktioner som du behöver: kakellager, popup, markörer och gratis vektorlag som polyliner, polygoner, cirklar eller rektanglar. Den levereras med bra standarddesign, även om du enkelt kan anpassa stilen med CSS3.

Broschyren har de mest använda interaktionsfunktionerna både för mobila och stationära webbläsare.

• Kartdatakälla: OpenStreetMap
• beroenden: ingen
• Licens: Odefinierad