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.

react 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.

react 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.

react map

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.

react map

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

React jvectormap

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.

React Google Maps Loader

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.

React Taipei Metro

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.

React Photo Locations

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

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.

This is image title

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.

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.

Bing layer as React component for 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.

Urbica React Mapbox GL JS

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.

Google Map React

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

Top 15 React Map Libraries for Developers
415.80 GEEK