13 JavaScript-Bibliotheken zum Erstellen interaktiver und benutzerdefinierter Karten

Zuvor hatten wir Google Map Maker und 10 weitere Tools zum Erstellen von Karten vorgestellt. Wenn Sie jedoch lieber JavaScript-Bibliotheken verwenden, haben wir den Post für Sie. Hier sind die JS-Bibliotheken, mit denen Sie spezielle Kartenmarkierungen anzeigen, benutzerdefinierte Routenlinien zeichnen oder sogar ein Dialogfeld anzeigen können, wenn Sie mit der Maus auf bestimmte Punkte der Karte klicken oder darauf klicken.

Personalisieren Sie Ihre Karten in dem von Ihnen gewünschten Stil - einige davon können mit CSS gestaltet werden - oder Passen Sie Ihre Karte an, um so interaktiv zu sein, wie Sie möchten. Die Quelle der Kartendaten, Abhängigkeiten und Lizenzen der einzelnen Bibliotheken wurde zu Ihrer Bequemlichkeit aufgenommen.

Mehr zu Hongkiat:

• So gestalten Sie Google Maps
• Ermitteln des Benutzerstandorts mit der HTML5-Geolocation-API
• Datenvisualisierung: Über 20 nützliche Tools und Ressourcen

GMaps

GMaps Das Hinzufügen und Anpassen von Google Maps wird zum Kinderspiel. Neben dem Hinzufügen einer Karte können Sie auch einige Dinge in die Karte einfügen, z. B. Polylinien, die zum Zeichnen einer Route, ein spezielles Menüsteuerelement und sogar HTML-Elemente nützlich sein können.

GMaps ist mit JSON-formatierten Daten kompatibel, die Sie zur Integration Ihrer Karte in eine bestimmte App wie Foursquare verwenden können.

• Kartendatenquelle: Google Maps
• Abhängigkeiten: keiner
• Lizenz: MIT-Lizenz

Hier

Bei 5 KB zeigt jHERE, dass die Größe keine Rolle spielt. Sie können immer noch eine leistungsstarke interaktive Karte mit einer Handvoll Anpassungsoptionen erstellen. jHERE leitet Kartenvisualisierung von HERE map ab, einem der beliebtesten Kartenanbieter für Windows Phone.

Die Bibliothek kann mit neuen Funktionen erweitert werden. Für diese Bibliothek wurden mehrere Erweiterungen entwickelt, darunter eine zum Hinzufügen von Formen, Routen und benutzerdefinierten Markierungen.

• Kartendatenquelle: HIER Karten
• Abhängigkeiten: jQuery oder ZeptoJS
• Lizenz: MIT-Lizenz

Kartograph

Kartograph besteht aus zwei Dateien, Kartograph.ph, um die Karte im SVG-Format zu generieren, und Kartograph.js, um interaktive Elemente oberhalb der Karte hinzuzufügen. Da Kartograph.js auf Raphael.js aufgebaut ist, funktioniert die Karte bis IE7 gut. In den interaktiven Karten-Demos erfahren Sie, was Kartograph alles kann.

• Kartendatenquelle: Kartograph
• Abhängigkeiten: Kartograph.py, Raffael und jQuery
• Lizenz: AGPL und LGPL

Mapael

jQuery Mapael ermöglicht das Erstellen von Karten mit eleganter Datenvisualisierung sowie Interaktivität. Sie können zum Beispiel eine Karte erstellen und jede Region auf der Karte mit unterschiedlichen Farben basierend auf der Region festlegen. Sie können auch Tooltips für die Region sowie Ereignisbehandlungsroutinen wie hinzufügen klicken oder schweben.

Die Karte wurde im Hinblick auf SEO erstellt, indem alternative Inhalte für Suchmaschinenroboter bereitgestellt werden, die nicht in der Lage sind, von JavaScript generierte Inhalte zu crawlen.

• Kartendatenquelle: Raphael.js
• Abhängigkeiten: jQuery
• Lizenz: MIT-Lizenz

D3js

D3.js ist eine umfassende JavaScript-Bibliothek, die Ihre Daten durch HTML, SVG und CSS zum Leben erweckt. Die Verwendung von D3 ist sehr unterschiedlich, einschließlich zum Erstellen einer hoch interaktiven Karte. Sehen Sie sich diese Karte von World Bank Global Development an und sehen Sie die Möglichkeiten, was Sie mit D3.js erstellen können.

• Kartendatenquelle: D3.js
• Abhängigkeiten: keiner
• Lizenz: Nicht definiert

DataMaps

Wenn das Erstellen einer Karte mit D3.js überwältigend ist, können Sie dies verwenden DataMaps. DataMaps ist im Wesentlichen ein D3.js-Plugin, das speziell zum Erstellen von Karten entwickelt wurde. Es erbt viele der Funktionen von D3.js, daher können Sie damit einfache oder sehr angepasste Karten erstellen. Habe ich schon erwähnt, dass die Karte anspricht?

• Kartendatenquelle: D3.js
• Abhängigkeiten: D3.js und TopoJSON
• Lizenz: MIT-Lizenz

GeoChart

Bei GeoChart handelt es sich um eine vereinfachte Google Map, die anstelle einer vollständigen Karte mit winzigen Details Region, Markierungen und Text darstellt. Die Karte wird in SVG generiert und kann auf viele Arten angepasst werden. Dazu gehören das Ändern der Regionsfarben, das Hinzufügen von Popup-Elementen und benutzerdefinierte Kartenmarkierungen.

• Kartendatenquelle: Google Maps
• Abhängigkeiten: keiner
• Lizenz: Lesen Sie die Google Maps-Nutzungsbedingungen

Maplace

Maplace, Ein jQuery-Plugin zum Generieren von Karten über das Google Maps API v3. Maplace funktioniert in allen Browsern, einschließlich IE6. Dies ist ein weiteres großartiges Plugin, das Ihre Aufmerksamkeit wert ist, wenn Sie eine Map auf einfachste Weise erstellen möchten.

• Kartendatenquelle: Google Maps
• Abhängigkeiten: jQuery
• Lizenz: MIT-Lizenz

Stattlich

Stately ist eine JavaScript-Bibliothek, die entwickelt wurde, um US-Karten zu generieren. Die Bibliothek ist vergleichsweise leicht, da Sie interaktive Elemente über Ihre generierten Karten hinzufügen können.

• Kartendatenquelle: Stattlich / SVG
• Abhängigkeiten: keiner
• Lizenz: MIT-Lizenz

GeoComplete

GeoComplete ist eine eigenständige JavaScript-Bibliothek. Die Bibliothek fügt der Karte ein Eingabefeld hinzu, das bei der Eingabe Vorschläge zu Städten, Ländern oder Bundesländern enthält.

• Kartendatenquelle: Google Maps
• Abhängigkeiten: jQuery
• Lizenz: MIT-Lizenz

Kartenwerkzeuge

Map Tools bietet eine intuitive API zum Hinzufügen von Google Maps. Es unterstützt das Laden von geo-formatierten JSON-Daten wie TopoJSON und GeoJSON zum Rendern der Karte. Darüber hinaus können Sie animierte Markierungen hinzufügen, die die Karte lebendiger machen, HTML-Inhalte mit Variablen oder Platzhaltern oder Handlebars einfügen.

• Kartendatenquelle: Google Maps
• Abhängigkeiten: GeoJSON / TopoJSON
• Lizenz: MIT-Lizenz

OpenLayers

OpenLayers ist ein leistungsstarkes Open Source-JavaScript-Framework zum Erstellen interaktiver Karten mit verschiedenen Mapping-Services. Sie können die Karten-Layer-Quelle aus einer Reihe von Karten-Services mithilfe der gekachelten Ebene oder der Vektor-Ebene auswählen.

OpenLayer ist sofort einsatzbereit und eignet sich für die Erstellung von Karten für Geräte und Browser. Sie können CSS für ein anderes Aussehen Ihrer Karte verwenden. Um die Karte mit OpenLayers in Ihrem Web zu implementieren, finden Sie hier ein Tutorial, das Sie dabei unterstützen wird.

• Kartendatenquelle: OpenStreetMap
• Abhängigkeiten: keiner
• Lizenz: Nicht definiert

Flugblatt

Entwickler gaben Flugblatt Grundfunktionen funktionieren perfekt und sind klein, ideal für mobile Geräte. Für bestimmte Funktionen erweitern Sie einfach das Merkblatt mit Plugins. Das Merkblatt enthält die meisten Online-Kartenfunktionen, die Sie benötigen: Kachelebenen, Popups, Markierungen und freie Vektorebenen wie Polylinien, Polygone, Kreise oder Rechtecke. Es gibt schöne Standarddesigns, obwohl Sie den Stil mit CSS3 mühelos anpassen können.

Das Merkblatt bietet die meisten Interaktionsfunktionen für die Verwendung sowohl für mobile Browser als auch für Desktop-Browser.

• Kartendatenquelle: OpenStreetMap
• Abhängigkeiten: keiner
• Lizenz: Nicht definiert