13 JavaScript-bibliotheken om interactieve en aangepaste kaarten te maken

We hebben eerder Google Map Maker en 10 andere tools gebruikt om kaarten te maken. Als u echter liever Javascript-bibliotheken gebruikt, hebben we de post voor u. Hier zijn de JS-bibliotheken die u kunt gebruiken om speciale kaartmarkeringen weer te geven, aangepaste routelijnen te tekenen of zelfs een dialoogvenster weer te geven wanneer u zweeft of op bepaalde punten op de kaart klikt.

Personaliseer uw kaarten in de stijl die u wilt - sommige ervan kunnen worden gestyled met CSS - of pas je kaart aan om zo interactief te zijn als je wilt. De bron van de kaartgegevens, afhankelijkheden en licenties van elke bibliotheek is voor uw gemak opgenomen.

Meer over Hongkiat:

Hoe Google Maps te vormen
Het verkrijgen van gebruikerslocatie met HTML5 Geolocation API
Gegevensvisualisatie: meer dan 20 nuttige hulpmiddelen en bronnen

GMaps

GMaps maakt het toevoegen en aanpassen van Google Maps een fluitje van een cent. Naast het toevoegen van een kaart, kun je ook een aantal dingen op de kaart zetten, zoals polylijnen die handig kunnen zijn om een route te tekenen, een speciale menubesturing en zelfs HTML-elementen.

GMaps is compatibel met JSON-geformatteerde gegevens die u kunt gebruiken om uw kaart te integreren met een bepaalde app, zoals Foursquare.

Kaartgegevensbron: Google Maps
afhankelijkheden: geen
Licentie: MIT-licentie

jHere

Met 5KB laat jHERE je zien dat het formaat er niet toe doet; je kunt nog steeds een krachtige interactieve kaart maken met een handvol aanpassingsopties. jHERE leidt kaartvisualisatie af van de HERE-kaart, een van de populairste kaartaanbieders voor Windows Phone.

De bibliotheek kan worden uitgebreid met nieuwe functionaliteit en er zijn een aantal uitbreidingen ontwikkeld voor deze bibliotheek, waaronder een voor het toevoegen van vormen, routes en aangepaste markeringen..

Kaartgegevensbron: HERE Kaarten
afhankelijkheden: jQuery of ZeptoJS
Licentie: MIT-licentie

Kartograph

Kartograph bestaat uit twee bestanden, Kartograph.ph om de kaart te genereren in SVG-indeling, en Kartograph.js om interactieve elementen toe te voegen bovenop de kaart. Omdat Kartograph.js bovenop Raphael.js is gebouwd, zou de kaart netjes naar IE7 werken. U kunt de interactieve kaartdemo's bekijken om te ontdekken wat Kartograph kan doen.

Kaartgegevensbron: Kartograph
afhankelijkheden: Kartograph.py, Raphael en jQuery
Licentie: AGPL en LGPL

Mapael

jQuery Mapael kunt u kaarten met een elegante gegevensvisualisatie en interactiviteit maken. U kunt bijvoorbeeld een kaart maken en elke regio op de kaart aangeven met verschillende kleuren op basis van regio. U kunt ook tooltip toevoegen aan de regio, evenals gebeurtenishandlers zoals Klik of zweven.

De kaart is gebouwd met SEO in gedachten door alternatieve inhoud te bieden voor robots van zoekmachines die JavaScript-gegenereerde inhoud niet kunnen doorzoeken.

Kaartgegevensbron: Raphael.js
afhankelijkheden: jQuery
Licentie: MIT-licentie

D3js

d3.js is een uitgebreide JavaScript-bibliotheek die uw gegevens tot leven brengt via HTML, SVG en CSS. Het gebruik van D3 is behoorlijk gevarieerd, ook voor het bouwen van een zeer interactieve kaart. Zie deze kaart van World Bank Global Development en je ziet de mogelijkheden van wat je kunt bouwen met D3.js.

Kaartgegevensbron: D3.js
afhankelijkheden: geen
Licentie: onbepaald

gegevensoverzichten

Als het bouwen van een kaart met D3.js overweldigend is, kunt u deze gebruiken gegevensoverzichten. DataMaps is in wezen een D3.js-plug-in die speciaal is ontwikkeld om kaarten te maken. Het erft veel van de mogelijkheden van D3.js, dus je kunt er eenvoudige of zeer aangepaste kaarten mee bouwen. Had ik al gezegd dat de kaart reageert??

Kaartgegevensbron: D3.js
afhankelijkheden: D3.js en TopoJSON
Licentie: MIT-licentie

GeoChart

GeoChart is een vereenvoudigde Google Map die regio, markeringen en tekst weergeeft, in plaats van een volwaardige kaart met kleine details. De kaart wordt gegenereerd in SVG en kan op verschillende manieren worden aangepast, waaronder het wijzigen van de regiokleuren, het toevoegen van pop-up en aangepaste kaartmarkeringen.

Kaartgegevensbron: Google Maps
afhankelijkheden: geen
Licentie: Lees Google Maps TOS

Maplace

Maplace, een jQuery-plug-in voor het genereren van kaarten via de Google Maps API v3. Maplace werkt in alle browsers, inclusief IE6. Dit is dus nog een geweldige plug-in voor je aandacht als je op de eenvoudigste manier een kaart wilt maken.

Kaartgegevensbron: Google Maps
afhankelijkheden: jQuery
Licentie: MIT-licentie

statig

Stately is een JavaScript-bibliotheek die is ontwikkeld om Amerikaanse kaarten te genereren. De bibliotheek is vergelijkbaar licht van gewicht gezien het feit dat u interactieve elementen bovenop uw gegenereerde kaarten kunt toevoegen.

Kaartgegevensbron: Stately / SVG
afhankelijkheden: geen
Licentie: MIT-licentie

GeoComplete

GeoComplete is een aparte JavaScript-bibliotheek op zich. De bibliotheek voegt een invoerveld samen met de kaart toe, waarin suggesties van steden, landen of staten worden weergegeven terwijl u typt.

Kaartgegevensbron: Google Maps
afhankelijkheden: jQuery
Licentie: MIT-licentie

Hulpmiddelen voor kaarten

Map Tools biedt een intuïtieve API om Google Maps toe te voegen. Het ondersteunt het laden van geo-geformatteerde JSON-gegevens zoals TopoJSON en GeoJSON om de kaart weer te geven. Daarbovenop kun je geanimeerde markeringen toevoegen waarvan ik denk dat het de kaart levendiger zal maken, HTML-inhoud met variabelen of plaatshouders invoegen ala Stuur.

Kaartgegevensbron: Google Maps
afhankelijkheden: GeoJSON / TopoJSON
Licentie: MIT-licentie

OpenLayers

OpenLayers is een high-performance open source JavaScript-framework voor het bouwen van interactieve kaarten met behulp van verschillende mappingservices. U kunt de kaartlaagbron kiezen met behulp van een betegelde laag of vectorlaag van een aantal kaartservices.

OpenLayer wordt mobiel klaargemaakt uit de doos, geschikt voor het maken van kaarten op verschillende apparaten en in verschillende browsers. U kunt CSS gebruiken voor een ander uiterlijk van uw kaart. Om de kaart in uw web met behulp van OpenLayers te implementeren, vindt u hier een tutorial die u zal helpen.

Kaartgegevensbron: OpenStreetMap
afhankelijkheden: geen
Licentie: Niet gedefinieerd

Brochure

Ontwikkelaars gaven Brochure basisfuncties om perfect te werken, waardoor de grootte klein blijft, perfect voor mobiele apparaten. Voor specifieke functies kunt u Leaflet alleen uitbreiden met plug-ins. Leaflet heeft de meeste online kaartfuncties die u nodig hebt: tegellagen, pop-up, markeringen en vrije vectorlagen zoals polylijnen, veelhoeken, cirkels of rechthoeken. Het wordt geleverd met mooie standaardontwerpen, hoewel je de stijl eenvoudig kunt aanpassen met CSS3.

Leaflet heeft de meeste interactie-functies voor gebruik, zowel voor mobiele als desktop-browsers.

Kaartgegevensbron: OpenStreetMap
afhankelijkheden: geen
Licentie: Niet gedefinieerd