How To Create Maps With React And Leaflet

By Laraib Rabbani
Picture of the author
Published on
image alt attribute

Sure, here is the blog post in Markdown:

Creating Maps With React And Leaflet


Incorporating interactive maps into web applications is an effective way to visualize and explore geographical data. By leveraging the power of React and Leaflet, you can seamlessly integrate dynamic maps into your web development projects. This guide will walk you through the process of creating maps with React and Leaflet, equipping you with the essential knowledge to enhance your web applications with compelling visual representations of geographical data.


Before embarking on this journey, ensure you have the following prerequisites:

  • Basic understanding of React and JavaScript
  • Node.js and npm installed on your system

Setting up the React App

  1. Create a React project using Create React App:
npx create-react-app react-leaflet-map
  1. Navigate into the project directory:
cd react-leaflet-map

Installing Leaflet and React Leaflet

  1. Install the Leaflet library and its React wrapper, react-leaflet:
npm install leaflet react-leaflet

Creating a Basic Map

  1. Create a new component file, Map.js, to render the map.

  2. Import the Map, TileLayer, and Marker components from react-leaflet:

import React from 'react';
import { Map, TileLayer, Marker } from 'react-leaflet';
  1. Define the map coordinates:
const mapCenter = [51.505, -0.09];
  1. Define the zoom level:
const mapZoom = 13;
  1. Create the React component for the map:
const MapComponent = () => {
  return (
      style={{ width: '100%', height: '400px' }}
        attribution='&copy; <a href="">OpenStreetMap contributors</a>'
      <Marker position={mapCenter}>
        <Popup>I'm here!</Popup>

Displaying the Map

  1. Import and use the MapComponent in your main component, such as App.js:
import React from 'react';
import MapComponent from './MapComponent';

const App = () => {
  return (
    <div className="App">
      <MapComponent />

export default App;
  1. Run the React app:
npm start

Enhancing the Map

  1. Add more markers to represent different locations.

  2. Use custom icons for markers to make them more visually appealing.

  3. Implement interactive features, such as popups on click or drag-and-drop markers.

  4. Explore advanced Leaflet features, such as polylines, polygons, and heatmaps, to visualize complex data.


Creating maps with React and Leaflet empowers you to build interactive and informative data visualizations. Start with the basics, and gradually incorporate more complex features to create sophisticated maps that enhance your web applications.

Laraib Rabbani Newsletter

Want to Stay Connected With Brown?
The best articles, links and news related to web development delivered once a week to your inbox.