Top 15 React Map Libraries for Developers
Explore the top 15 React map libraries to help you create interactive maps for your apps. These libraries offer a wide range of features, such as map rendering, clustering, and geocoding.
1. React Leaflet Cluster Layer
A custom layer for react-leaflet that makes plotting and clustering react components simple
react-leaflet-cluster-layer provides a simple component for plotting React components as markers and clusters in a react-leaflet map.
Github: http://github.com/OpenGov/react-leaflet-cluster-layer
2.React Leaflet Marker Layer
Provides a simple component for plotting React Components as markers in a react-leaflet map
react-leaflet-marker-layer provides a simple component for plotting React components as markers in a react-leaflet map.
Official Website:https://github.com/OpenGov/react-leaflet-marker-layer
3.React Charts And Maps
App with D3 Charts and Google Maps
This project contains the implementation of libraries D3, highcharts and react-google-maps with the ReactJS. It shows how easy is adding those libraries in ReactJS.
Live Demo: https://marekdano.github.io/react-charts-and-maps/
Official Website https://github.com/marekdano/react-charts-and-maps
4.React Vector Maps
React component for interactive vector maps of the world and 100+ countries.
Features
- Simple and easy to implement React component for rendering interactive vector maps.
- Bring your own vector map, see how to use your own SVG for a map.
- Quick and easy to style maps however you like.
- 100+ vector maps included out of the box, free from MapSVG.
Live Demo: https://react-vector-maps.netlify.com/
Official Website https://github.com/South-Paw/react-vector-maps/archive/master.zip
5.React jvectormap
A react wrapper for jvectormap maps
Official Websitehttps://github.com/kadoshms/react-jvectormap
6.React Google Maps Loader
Simple loader to use google maps services into your react applications
React Component to use google maps services into your react applications using a render prop.
Live Demo: https://xuopled.github.io/react-google-maps-loader/
Official Website http://github.com/xuopled/react-google-maps-loader
7.React Taipei Metro
Extensible React Component for Taipei Metro Map
Extensible React Component for SVG Taipei Metro Map. The design is mostly referenced from 曼努 manzoo and the post with some minor modifications.
Live Demo: https://rent.popoke.info/
Official Website http://github.com/popo55668/react-taipei-metro
8.React People
React People lists and connects React developers around the world
Live Demo: https://www.reactpeople.org/
Official Website http://github.com/vitorleonel/reactpeople
9.React Photo Locations
Find and record your favourite photo spots Built React
Photo Locations is a personal project. When travelling with family or friends, you often don’t have enough time to extensively research photo locations when you are in new places.
This is where Photo Locations come in. You can look up locations that other users have entered or enter your own locations and give them some ratings.
Record your favourite photo spots and to research locations where you are travelling to.
The map will center in the location that you are currently at. From there you can check out any markers which will point you to cool photography locations.
From the marker you can click on more info to find out more about the location and to leave comments.
Right click on the map to add new locations.
Live Demo: http://www.photolocations.nz/
Official Website http://github.com/cornelia-schulz/photolocations
10.React Leaflet Heatmap Layer
A custom layer for heatmaps in react-leaflet
react-leaflet-heatmap-layer provides a simple component for creating a heatmap layer in a react-leaflet map.
Official Website https://github.com/OpenGov/react-leaflet-heatmap-layer
11.React Places Autocomplete
A React component to build a customized UI for Google Maps Places Autocomplete.
Features
- Enable you to easily build a customized autocomplete dropdown powered by Google Maps Places Library
- Utility functions to geocode and get latitude and longitude using Google Maps Geocoder API
- Full control over rendering to integrate well with other libraries (e.g. Redux-Form)
- Mobile friendly UX
- WAI-ARIA compliant
- Support Asynchronous Google script loading
Live Demo: https://hibiken.github.io/react-places-autocomplete/
Official Website https://github.com/hibiken/react-places-autocomplete
12.React component Maps API 2GIS
React component for 2gis-maps.
Live Demo: https://2gis.github.io/2gis-maps-react/#simple-map
Official Website: https://github.com/2gis/2gis-maps-react
13.Bing layer as React component for Leaflet
Bing layer as React component for Leaflet build on top of React-Leaflet.
Official Website: http://github.com/Charmatzis/react-leaflet-bing
14. Urbica React Mapbox GL JS
React Component for Mapbox GL JS
Mapbox GL JS is a JavaScript library that renders interactive maps from vector tiles and Mapbox styles using WebGL.
To use any of Mapbox’s tools, APIs, or SDKs, you’ll need a Mapbox access token. Mapbox uses access tokens to associate requests to API resources with your account. You can find all your access tokens, create new ones, or delete existing ones on your API access tokens page.
This package is heavily inspired by uber/react-map-gl.
Official Website: https://github.com/urbica/react-map-gl
15. Google Map React
google-map-react is a component written over a small set of the Google Maps API. It allows you to render any React component on the Google Map. It is fully isomorphic and can render on a server. Additionally, it can render map components in the browser even if the Google Maps API is not loaded. It uses an internal, tweakable hover algorithm - every object on the map can be hovered.
It allows you to create interfaces like this example (You can scroll the table, zoom/move the map, hover/click on markers, and click on table rows)
Live Demo: https://google-map-react.github.io/google-map-react/map/main/
Official Website http://github.com/google-map-react/google-map-react
#reactjs #javascript #programming
