16 Free React Map Libraries for Google Maps, Leaflet, and SVG Maps

16 Free React Map Libraries for Google Maps, Leaflet, and SVG Maps

Welcome to your comprehensive guide for the best free React.js Map Libraries. This guide is designed to delve into an impressive range of 16 top-tier libraries. Each one has been carefully selected for its ability to enhance your React.js applications with interactive and customizable map features.

Our coverage extends from libraries offering detailed world maps, right through to those specialized in presenting specific geographic data. This wide array ensures that no matter what your mapping requirements are, we have you covered.

Whether you're in need of a straightforward world map for a simple visual representation, or you're looking for a library capable of complex data visualizations to provide in-depth insights, we are confident you'll find a library that suits your needs within this guide.

However, if your project requires a feature-rich data visualization or charting library, you might find the following article useful: 30+ React Data Visualization and Chart Libraries.

25 Free Self-hosted Form Generator Apps
A form generator app is a tool that allows developers to create custom forms for websites or applications. These forms can be used for various purposes such as collecting user information, receiving feedback, or facilitating transactions. Form generator apps can simplify the process of creating forms, provide greater control over
20 Open-source Free Chat and Messaging UI Components Libraries for React and React Native
React Native Chat UI and React.js chat and messaging UI components and libraries are frameworks, libraries, and tools that provide pre-built user interface components and functionality for integrating chat and messaging features into mobile and web applications. They can help developers save time and effort by providing ready-made components

So, let's embark on this journey of exploration and discovery of these valuable resources that are waiting to transform your React.js applications.

1. React Simple Maps

React Simple Maps enables you to create awesome interactive svg maps using React, D3-geo, and topojson libraries.

Key Features

  • SVG Based: React Simple Maps uses isolated helper components that can be freely composed. Map charts creation and styling are as simple as writing HTML layouts.
  • Compatibility: It integrates well with other libraries from the React ecosystem like react-annotation, react-spring, react-tooltip, styled-components, victory, vx, and many more.
  • Lean Design: React Simple Maps is a lightweight solution wrapped around d3-geo and topojson, offering a declarative API for map charts creation without unnecessary dependencies.
  • Simplicity: The focus of React Simple Maps is to handle tedious tasks such as topojson conversion, zooming, panning, and performance optimizations, allowing developers to concentrate on creating unique maps.
  • Supports markers
  • Map annotations
  • Highly customizable
  • Declarative API
  • Comes with a rich documentation and dozens of examples

Usage

React-simple-maps exposes a set of components that can be combined to create svg maps with markers and annotations. In order to render a map you have to provide a reference to a valid topojson file.

You can find example topojson files on here or here. To learn how to make your own topojson maps from shapefiles, please read "How to convert and prepare TopoJSON files for interactive mapping with d3" on medium.

import React from "react";
import ReactDOM from "react-dom";
import { ComposableMap, Geographies, Geography } from "react-simple-maps";

// url to a valid topojson file
const geoUrl =
  "https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json";

const App = () => {
  return (
    <div>
      <ComposableMap>
        <Geographies geography={geoUrl}>
          {({ geographies }) =>
            geographies.map((geo) => (
              <Geography key={geo.rsmKey} geography={geo} />
            ))
          }
        </Geographies>
      </ComposableMap>
    </div>
  );
};

document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(<App />, document.getElementById("app"));
});
React Simple Maps
Create beautiful SVG mapcharts in React with d3-geo and topojson using a declarative api.

2. React Leaflet

React Leaflet is a free and open-source React component and wrapper for the famous map library Leaflet. It is easy to install, setup and use. It is also highly customizable.

It comes with several examples, public API and core API.

Example

const position = [51.505, -0.09]
        
render(
  <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <Marker position={position}>
      <Popup>
        A pretty CSS3 popup. <br /> Easily customizable.
      </Popup>
    </Marker>
  </MapContainer>
)
React Leaflet | React Leaflet
React components for Leaflet maps

3. g-mapify

G-mapify provides a flexible react Google map wrapper with enhanced search, pick, and select options. It supports with multiple markers, tooltips, custom icons, and comes with advanced address formatter.

The output also works seamlessly on mobile browsers.

Install

yarn add g-mapify
# or
npm i g-mapify

Usage

    import  React from  'react';
    import { GMapify } from  'g-mapify';
    import  'g-mapify/dist/index.css';
    
    const  App = () => {
	    return (
		    <GMapify appKey="[google-map-key]" />
	    )
    }
GitHub - bharatpe/g-mapify: Flexible react google map with more options of search, pick & select.
Flexible react google map with more options of search, pick & select. - bharatpe/g-mapify

4. Google Map React

google-map-react is like the hot sauce of mapping - it lets you splatter any React component right onto the Google Map. It's totally isomorphic, can cook up components on a server, and doesn't shy away from showing map components in the browser even when the Google Maps API is playing hide-and-seek.

Plus, it comes with an adjustable hover algorithm that lets you play with every object on the map.

Features

  • Custom Component Integration: Allows the use of custom animated React components as map markers, instead of default Google Maps markers.
  • Isomorphic Rendering: Supports server-side rendering, enhancing SEO.
  • Independent Component Positioning: Enables component rendering on the map independently of the Google Maps API.
  • On-Demand Google Maps API Loading: Google Maps API loads only on the first usage of the GoogleMapReact component, eliminating the need for a script tag at the top of the page.
  • Direct Google Maps API Access: Provides access to Google Maps map and maps objects using onGoogleApiLoaded, with the setting of yesIWantToUseGoogleMapApiInternals to true.
  • Internal Hover Algorithm: Allows hovering over every object on the map, with an option to use CSS hover selectors.

Examples

import React from "react";
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

export default function SimpleMap(){
  const defaultProps = {
    center: {
      lat: 10.99835602,
      lng: 77.01502627
    },
    zoom: 11
  };

  return (
    // Important! Always set the container height explicitly
    <div style={{ height: '100vh', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: "" }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
      >
        <AnyReactComponent
          lat={59.955413}
          lng={30.337844}
          text="My Marker"
        />
      </GoogleMapReact>
    </div>
  );
}

5. REACT-MAPS

Boasting a collection of over 200 interactive maps, the React library confidently delivers with a minimal dependency size (largest map under 800kB) and user-friendly components.

You can even select a certain country to install its SVG map into your project. Moreover, you can customize the SVG output easily starting from size, map color, stroke color/ width, and add onSelect event per SVG item.

GitHub - shubhexists/react-maps: React-map is a collection of Map Components of Countries and Continents that can be used to create interesting map interactions in your website !
React-map is a collection of Map Components of Countries and Continents that can be used to create interesting map interactions in your website ! - shubhexists/react-maps

6. React Map GL

React-map-gl is a robust suite of React components, meticulously crafted to offer a seamless React API for mapbox-gl or maplibre-gl. Rest assured, all it necessitates for installation is react >= 16.3.

Starting with version 2.0, mapbox-gl requires a Mapbox token for all usage. Users can obtain this token by registering on the Mapbox website. The token can be provided to the app in several ways, including as a prop to the map component, as an environment variable, or in the URL.

npm install --save react-map-gl mapbox-gl

Example

import * as React from 'react';
import Map from 'react-map-gl';

function App() {
  return <Map
    mapLib={import('mapbox-gl')}
    initialViewState={{
      longitude: -100,
      latitude: 40,
      zoom: 3.5
    }}
    style={{width: 600, height: 400}}
    mapStyle="mapbox://styles/mapbox/streets-v9"
  />;
}
GitHub - visgl/react-map-gl: React friendly API wrapper around MapboxGL JS
React friendly API wrapper around MapboxGL JS. Contribute to visgl/react-map-gl development by creating an account on GitHub.

7. React Google Maps

React-google-maps is an exceptionally proficient component designed for seamlessly integrating Google Maps into React.js.

Project Status (Not Updated)

It is important to note that it did not get any update for more than 7 years.

GitHub - tomchentw/react-google-maps: React.js Google Maps integration component
React.js Google Maps integration component. Contribute to tomchentw/react-google-maps development by creating an account on GitHub.

8. React Native Maps

This is a free and open-source React Native Map components for iOS + Android.

Usage

import MapView from 'react-native-maps';


<MapView
  initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
/>
GitHub - react-native-maps/react-native-maps: React Native Mapview component for iOS + Android
React Native Mapview component for iOS + Android. Contribute to react-native-maps/react-native-maps development by creating an account on GitHub.

9. React Svg Map

This is the ultimate lightweight free open-source SVG Map React component that can be customized effortlessly.

Install

npm i --save @crpt/react-svg-map

Usage


import Map, { THEMES } from "@crpt/react-svg-map";

<Map country="russia" selectedId="DFO" theme={THEMES.defaultTheme} />
GitHub - crptteam/react-svg-map: React SVG map
React SVG map. Contribute to crptteam/react-svg-map development by creating an account on GitHub.

10. React Svg Map

This is a set of React.js components to display an interactive SVG map.

The new updated version does not include the maps anymore, you will have to install your individual maps according to your project requirements.

How to use?

import React from "react";
import ReactDOM from "react-dom";
import Taiwan from "@svg-maps/taiwan";
import { SVGMap } from "react-svg-map";
import "react-svg-map/lib/index.css";

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <SVGMap map={Taiwan} />;
  }
}

ReactDOM.render(<App />, document.getElementById("app"));
GitHub - VictorCazanave/react-svg-map: A set of React.js components to display an interactive SVG map
A set of React.js components to display an interactive SVG map - VictorCazanave/react-svg-map

11. Jsvectormap

Jsvectormap is your go-to Javascript library for whipping up interactive maps and fancy data visualizations, without the need for jQuery. It's a spiffy upgrade from jvectormap, ideal for modern developers.

It plays nice with all the latest browsers and lets you layer info in a snap. Plus, it has zoom features for when you need to dive deep or take a step back for a big picture view.

It is released as an open-source project under the MIT License.

Install

npm i jsvectormap

Usage

import jsVectorMap from 'jsvectormap'
import 'jsvectormap/dist/maps/world.js'

const map = new jsVectorMap({
  selector: '#map',
  map: 'world',
})
GitHub - themustafaomar/jsvectormap: A lightweight JavaScript library for creating interactive maps and pretty data visualization.
A lightweight JavaScript library for creating interactive maps and pretty data visualization. - themustafaomar/jsvectormap

12. SVG World Map JS

SVG World Map JS is a reliable JavaScript library that can effortlessly inject stylish SVG world maps into your projects. It's perfect for creating strategy games, data visualization, or incorporating interactive maps into articles, papers, websites, or applications. This compact, fast, and user-friendly tool is all you need for data projection. However, if you're seeking a more sophisticated option, you might want to consider d3js.

It plays well with React, Vue, Angular and several other JavaScript libraries.

It includes:

  • A detailed SVG world map with 239 nations and countries and over 3000 second-level provinces and islands, ready for editing with your preferred graphics editor
  • List of all world countries with additional information, ready for use with the SVG map
  • JavaScript SVG library developed for the map and optimized for quick SVG path access, customizable with options and a callback-API, including time controls for visual data animation

The project is released under the MIT license as an open-source project.

GitHub - raphaellepuschitz/SVG-World-Map: 🗺 A JavaScript library to easily integrate one or more SVG world maps with all nations (countries) and second-level political subdivisions (countries, provinces, states).
🗺 A JavaScript library to easily integrate one or more SVG world maps with all nations (countries) and second-level political subdivisions (countries, provinces, states). - raphaellepuschitz/SVG-Wo…

13. React-usa-map | A simple SVG USA map rendering on React

React component with all USA States with customizable options. It does not require D3 library.

GitHub - gabidavila/react-usa-map: React component with all USA States with customizable options. No D3 needed.
React component with all USA States with customizable options. No D3 needed. - gabidavila/react-usa-map

14. Google Maps React Markers

The Google Maps library, perfectly compatible with React 18+, gracefully accepts markers as react components. It robustly supports a subset of Google Map React props, and masterfully enables clustering.

Built upon the solid foundation of the Google Maps Custom Overlays official library, this library is your reliable partner for map integration. A TypeScript version is readily available for your convenience, and your valuable feedback is eagerly awaited.

npm install --save google-maps-react-markers

Usage

import GoogleMap from 'google-maps-react-markers'

const App = () => {
  const mapRef = useRef(null)
  const [mapReady, setMapReady] = useState(false)

  /**
   * @description This function is called when the map is ready
   * @param {Object} map - reference to the map instance
   * @param {Object} maps - reference to the maps library
   */
  const onGoogleApiLoaded = ({ map, maps }) => {
    mapRef.current = map
    setMapReady(true)
  }

  const onMarkerClick = (e, { markerId, lat, lng }) => {
    console.log('This is ->', markerId)

    // inside the map instance you can call any google maps method
    mapRef.current.setCenter({ lat, lng })
    // ref. https://developers.google.com/maps/documentation/javascript/reference?hl=it
  }

  return (
    <>
      {mapReady && <div>Map is ready. See for logs in developer console.</div>}
      <GoogleMap
        apiKey=""
        defaultCenter={{ lat: 45.4046987, lng: 12.2472504 }}
        defaultZoom={5}
        options={mapOptions}
        mapMinHeight="100vh"
        onGoogleApiLoaded={onGoogleApiLoaded}
        onChange={(map) => console.log('Map moved', map)}
      >
        {coordinates.map(({ lat, lng, name }, index) => (
          <Marker
            key={index}
            lat={lat}
            lng={lng}
            markerId={name}
            onClick={onMarkerClick} // you need to manage this prop on your Marker component!
            // draggable={true}
            // onDragStart={(e, { latLng }) => {}}
            // onDrag={(e, { latLng }) => {}}
            // onDragEnd={(e, { latLng }) => {}}
          />
        ))}
      </GoogleMap>
    </>
  )
}

export default App

GitHub - giorgiabosello/google-maps-react-markers: Google Maps library that accepts markers as react components and works with React 18+.
Google Maps library that accepts markers as react components and works with React 18+. - giorgiabosello/google-maps-react-markers

15. React world map

This open-source React library offers a clickable world map created with SVG paths. When you click on a continent, it gets selected and its className changes. This selection allows for color alterations via CSS.

It is licensed under WTFPL License.

Install

npm install react-world-map --save

Usage

const React, { useState } = require('react');
const ReactDOM = require('react-dom');
const WorldMap = require('react-world-map');

function YourMainComponent() {
  const [selected, onSelect] = useState(null);

  return (
    <>
      <h1> Hello World Map!</h1>
      <WorldMap selected={ selected } onSelect={ onSelect } />
    </>
  );
}

ReactDOM.render(
  <YourMainComponent />,
  document.getElementById('react-app')
)
GitHub - heatherbooker/react-world-map: clickable world map with css changes, + react state changes/callbacks
clickable world map with css changes, + react state changes/callbacks - heatherbooker/react-world-map

16. React Basic World Map

The React Basic World Map is a comprehensive tool that includes a fundamental SVG world map and delineates all the continents. This tool, designed with simplicity and ease of use in mind, provides a basic yet complete overview of the world map.

Install

npm install react-basic-world-map --save

Usage

import React from 'react';
import BasicWorldMap from 'react-basic-world-map';

export default function App() {

    const onClickMapLocation = (selectedContinent: ContinentItem) => {
        // do something
    }

    const continents: ContinentItem[] = [
        { key: "africa", value: "Afrika" },
        { key: "south_america", value: "Güney Amerika" },
        { key: "europe", value: "Avrupa" },
        { key: "asia", value: "Asya" },
        { key: "america", value: "Amerika" },
        { key: "australia", value: "Okyanusya" }
    ]

    return (
        <BasicWorldMap
            primaryColor="black"
            secondaryColor="gray"
            onClickMapContinent={onClickMapLocation}
            continents= {continents}
        />
    )
}
GitHub - aselcuk/react-basic-world-map: Includes basic svg world map and continents.
Includes basic svg world map and continents. Contribute to aselcuk/react-basic-world-map development by creating an account on GitHub.


Example Projects

In the following section, you will find some open-source project that is created using some of these libraries. We added them here for their educational values.

  1. Postcode-finder
  2. react-open-street-map-nominatim
  3. TravelMate
  4. GEO-Pins
  5. Clustering for Google Map
  6. Covid-19 data
  7. Thermal-world-map-react
  8. ReactMap
  9. React Covid Maps
  10. COVID-19 Tracker With React 〽️
  11. COVID19.PINK: Coronavirus (Covid19) Animated Map and Infection Trajectories comparison
  12. Open Coronavirus
  13. Covid-19 Visualized
  14. COVID-19-US-county-map
  15. Corona Globe
  16. Visualizing COVID-19 Around the Globe 🌐
  17. Covid-19 Tracker