Top 15 React Map-Bibliotheken für Entwickler

Blog

Top 15 React Map-Bibliotheken für Entwickler

Top 15 React Map-Bibliotheken für Entwickler

1. Reagieren Sie Leaflet Cluster Layer

Ein benutzerdefinierter Layer für das Reaktionsblatt, das das Plotten und Clustern von Reaktionskomponenten vereinfacht
React-Leaflet-Cluster-Layer bietet eine einfache Komponente zum Plotten von React-Komponenten als Marker und Cluster in einer React-Leaflet-Karte.

Github : http://github.com/OpenGov/react-leaflet-cluster-layer

2.React Leaflet Marker Layer

Bietet eine einfache Komponente zum Plotten von Reaktionskomponenten als Markierungen in einer Reaktionsbroschüre-Karte

React-Leaflet-Marker-Layer bietet eine einfache Komponente zum Zeichnen von React-Komponenten als Marker in einer React-Leaflet-Karte.

Offizielle Website : https://github.com/OpenGov/react-leaflet-marker-layer

3.Reagieren Sie auf Diagramme und Karten

App mit D3-Charts und Google Maps

Dieses Projekt beinhaltet die Implementierung der Bibliotheken D3, Highcharts und React-Google-Maps mit dem ReactJS. Es zeigt, wie einfach es ist, diese Bibliotheken in ReactJS hinzuzufügen.

Live-Demo: https://marekdano.github.io/react-charts-and-maps/

Offizielle Website https://github.com/marekdano/react-charts-and-maps

4.Reagieren Sie Vektorkarten

React-Komponente für interaktive Vektorkarten der Welt und über 100 Länder.

Merkmale

  • Einfach und leicht zu implementierende React-Komponente zum Rendern interaktiver Vektorkarten.
  • Bringen Sie Ihre eigene Vektorkarte mit, erfahren Sie, wie Sie Ihr eigenes SVG für eine Karte verwenden.
  • Schnelles und einfaches Stylen von Karten nach Belieben.
  • 100+ Vektorkarten im Lieferumfang enthalten, kostenlos von MapSVG .

Live-Demo: https://react-vector-maps.netlify.com/

Offizielle Website https://github.com/South-Paw/react-vector-maps/archive/master.zip

5.Reagieren Sie jvectormap

Ein React-Wrapper für jvectormap-Maps

http-Fehler beim Parsen für

Offizielle Website https://github.com/kadoshms/react-jvectormap

6.Reagieren Sie Google Maps Loader

Einfacher Loader zur Verwendung von Google Maps-Diensten in Ihren React-Anwendungen
React Component zur Verwendung von Google Maps-Diensten in Ihren React-Anwendungen mithilfe einer Render-Prop.

Live-Demo: https://xuopled.github.io/react-google-maps-loader/

Offizielle Website http://github.com/xuopled/react-google-maps-loader

7.Reagieren Sie Taipeh Metro

Erweiterbare Reaktionskomponente für Taipeh Metro Map

Erweiterbare Reaktionskomponente für SVG Taipei Metro Map. Das Design wird hauptsächlich von 曼努 manzoo und dem Beitrag mit einigen geringfügigen Modifikationen referenziert.

Live-Demo: https://rent.popoke.info/

Offizielle Website http://github.com/popo55668/react-taipei-metro

8.Reagiere Leute

React People listet und verbindet React-Entwickler auf der ganzen Welt

Live-Demo: https://www.reactpeople.org/

Offizielle Website http://github.com/vitorleonel/reactpeople

9.Reagieren Sie Fotostandorte

Finden und zeichnen Sie Ihre Lieblingsfotos auf Built React

Photo Locations ist ein persönliches Projekt. Wenn Sie mit Familie oder Freunden unterwegs sind, haben Sie oft nicht genug Zeit, um ausgiebig Fotostandorte zu recherchieren, wenn Sie an neuen Orten sind.

Hier kommen Fotostandorte ins Spiel. Sie können Orte nachschlagen, die andere Benutzer eingegeben haben, oder Ihre eigenen Orte eingeben und ihnen einige Bewertungen geben.

Nehmen Sie Ihre Lieblingsfotos auf und recherchieren Sie Orte, zu denen Sie reisen.

Die Karte wird auf den Standort zentriert, an dem Sie sich gerade befinden. Von dort aus können Sie alle Markierungen überprüfen, die Sie auf coole Fotostandorte hinweisen.

Von der Markierung aus können Sie auf weitere Informationen klicken, um mehr über den Standort zu erfahren und Kommentare zu hinterlassen.

Klicken Sie mit der rechten Maustaste auf die Karte, um neue Standorte hinzuzufügen.

Radiosender-App erstellen

Live-Demo: http://www.photolocations.nz/

Offizielle Website http://github.com/cornelia-schulz/photolocations

10.React Leaflet Heatmap Layer

Ein benutzerdefinierter Layer für Heatmaps im React-Flyer

React-Leaflet-Heatmap-Layer bietet eine einfache Komponente zum Erstellen eines Heatmap-Layers in einer React-Leaflet-Karte.

Offizielle Website https://github.com/OpenGov/react-leaflet-heatmap-layer

11.React Places Autocomplete

Eine React-Komponente zum Erstellen einer benutzerdefinierten Benutzeroberfläche für die automatische Vervollständigung von Google Maps Places.

Das ist der Bildtitel

Merkmale

  • Ermöglicht es Ihnen, ganz einfach ein benutzerdefiniertes Dropdown-Menü zur automatischen Vervollständigung zu erstellen, das von der Google Maps Places-Bibliothek unterstützt wird
  • Dienstprogrammfunktionen zum Geokodieren und Abrufen von Breiten- und Längengraden mithilfe der Google Maps Geocoder API
  • Volle Kontrolle über das Rendering, um sich gut in andere Bibliotheken (z. B. Redux-Form) zu integrieren
  • Mobilfreundliche UX
  • WAI-ARIA-konform
  • Unterstützt asynchrones Laden von Google-Skripten

Live-Demo: https://hibiken.github.io/react-places-autocomplete/

Offizielle Website https://github.com/hibiken/react-places-autocomplete

12.React-Komponente Maps API 2GIS

Reaktionskomponente für 2gis-Karten.

Live-Demo: https://2gis.github.io/2gis-maps-react/#simple-map

Offizielle Website: https://github.com/2gis/2gis-maps-react

13.Bing-Layer als React-Komponente für Leaflet

Bing-Layer als React-Komponente für Leaflet baut auf React-Leaflet auf.

Bing-Layer als React-Komponente für Leaflet

Offizielle Website: http://github.com/Charmatzis/react-leaflet-bing

14. Urbica React Mapbox GL JS

React-Komponente für Mapbox GL JS

Mapbox GL JS ist eine JavaScript-Bibliothek, die interaktive Karten aus Vektorkacheln und Mapbox-Stilen mit WebGL rendert.

Um eines der Tools, APIs oder SDKs von Mapbox zu verwenden, benötigen Sie ein Mapbox-Zugriffstoken. Mapbox verwendet Zugriffstoken, um Anfragen an API-Ressourcen mit Ihrem Konto zu verknüpfen. Auf Ihrer API-Zugriffstoken-Seite können Sie alle Ihre Zugriffstoken finden, neue erstellen oder vorhandene löschen.

Dieses Paket ist stark von uber/react-map-gl inspiriert.

Offizielle Website: https://github.com/urbica/react-map-gl

Sage 50 Datenbankreparaturdienstprogramm

15. Google Map Reagieren

google-map-react ist eine Komponente, die über einen kleinen Satz der Google Maps-API geschrieben wurde. Es ermöglicht Ihnen, jede React-Komponente auf der Google Map zu rendern. Es ist vollständig isomorph und kann auf einem Server gerendert werden. Darüber hinaus kann es Kartenkomponenten im Browser rendern, auch wenn die Google Maps API nicht geladen ist. Es verwendet einen internen, anpassbaren Hover-Algorithmus - jedes Objekt auf der Karte kann mit der Maus bewegt werden.

Es ermöglicht Ihnen, Schnittstellen wie dieses Beispiel zu erstellen (Sie können in der Tabelle scrollen, die Karte zoomen/verschieben, auf Markierungen bewegen/klicken und auf Tabellenzeilen klicken)

Live-Demo: https://google-map-react.github.io/google-map-react/map/main/

Offizielle Website http://github.com/google-map-react/google-map-react

#reactjs #javascript #programmierung