React + Leaflet: project template and step by step tutorial

React + leaflet
React + leaflet

This tutorial helps you to create a React-based application with a Leaflet map. We've prepared for you a project template and instructions to develop a Map app from scratch.

We use Geoapify map tiles and Mapbox Style specification to create a map. So at the end of the tutorial, your application will be able to render both vector and raster maps with the Leaflet library.

Before you start

Step 1. Create a React project

We've prepared a React-based project template for you. The project already contains a component to visualize a map and uses for Sass3 CSS pre-processor:

github.com/geoapify/react-based-project

  • Download or clone the GitHub repository
  • Switch to the project folder: cd react-based-project
  • Run npm install to install libraries and dependencies
  • Run npm start to start the server
  • Open http://localhost:3000 to view the page in the browser

As the second option, you can generate a React project by yourself with Create React App.

Step 2. Display a map with Leaflet

Install Leaflet + Mapbox GL plugin

By default, Leaflet doesn't support vector tiles and Mapbox Style specifications. You need to install the Mapbox GL Leaflet plugin together with Leaflet to generate a map from style.json:

npm i leaflet mapbox-gl mapbox-gl-leaflet

Add Leaflet and Mapbox styles

You need to import styles to display a map and it's elements correctly. You can add the styles to the index.scss file:

@import '~mapbox-gl/dist/mapbox-gl.css';
@import '~leaflet/dist/leaflet.css';

Add a map to a React-component

We already prepared a React-component for you - "src/components/my-map.jsx":

import React, { useEffect } from 'react';
import './my-map.scss';

function MyMap() {

  useEffect(() => {
    console.log('This is called when the component is mounted!');
  }, []);

  return (
    <div className="map-container">
      <div className="placeholder">
        <span className="placeholder-text">The map will be displayed here</span>
      </div>
    </div>
  )
}

export default MyMap;

Create one if you've generated a project with Create React App. Use can use the MyMap component as an example.

  • Remove the placeholder and add the element reference
  • Make the useEffect() function to be called when the element is ready:
import React, { useEffect } from 'react';
import './my-map.scss';

function MyMap() {
  let mapContainer;

  useEffect(() => {

  }, [mapContainer]);

  return (
    <div className="map-container" ref={el => mapContainer = el}>
    </div>
  )
}

export default MyMap;
  • Add a Leaflet map to the component:
import React, { useEffect } from 'react';
import './my-map.scss';
import L from 'leaflet';
import {} from 'mapbox-gl-leaflet';

function MyMap() {
  let mapContainer;

  useEffect(() => {
    const initialState = {
      lng: 11,
      lat: 49,
      zoom: 4
    };

    const map = L.map(mapContainer).setView([initialState.lat, initialState.lng], initialState.zoom);

    // the attribution is required for the Geoapify Free tariff plan
    map.attributionControl.setPrefix('').addAttribution('Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a> | © OpenStreetMap <a href="https://www.openstreetmap.org/copyright" target="_blank">contributors</a>');

    var myAPIKey = 'YOUR_API_KEY_HERE';
    const mapStyle = 'https://maps.geoapify.com/v1/styles/osm-carto/style.json';

    const gl = L.mapboxGL({
      style: `${mapStyle}?apiKey=${myAPIKey}`,
      accessToken: 'no-token'
    }).addTo(map);
  }, [mapContainer]);

  return (
    <div className="map-container" ref={el => mapContainer = el}>
    </div>
  )
}

export default MyMap;

Note! You may require to restart the development server to apply all changes.

Build the application

Run npm run build from the application directory. This builds the app for production to the build folder.

More code samples

Find more Live demos, JSFiddle samples and Code samples on the Geoapify API Documentation page.

World map

Map tiles by Geoapify

Choose between different map styles and colors!

Enrich your map with address field, places search, and other location intelligence technics!