30 March, 2020 / by Geoapify / in Maps API

React + Leaflet: project template and step by step tutorial

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

Install Node.js if not installed from the NodeJS Download page or via a package manager.
You can use any text editor for writing HTML, CSS, and JavaScript. We can recommend you Visual Studio Code editor if you do not have any preferences yet.
Get the Geoapify API key to display a map. We have the Freemium pricing model, you can always start for free and extend when you need it.
Choose a map style you want to display on our Map Tiles documentation page.

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;

Replace YOUR_API_KEY_HERE with an API key you've got on Geoapify MyProjects.
Set the mapStyle variable to Map style you want to use.

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.

Map tiles by Geoapify

Choose between different map styles and colors!

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