React Leaflet from Scratch: A Mapping Solution

Leaflet has emerged as a popular open-source alternative to the likes of Google Maps and MapBox. Its lightweight nature combined with the power of React makes it a go-to choice for developers. In this guide, we'll delve deep into integrating Leaflet with React, ensuring you have a solid foundation to build upon.

Introduction to Leaflet

Leaflet is a robust, open-source mapping library that leverages the capabilities of OpenStreetMap, a freely editable geographic database. Its primary advantage lies in its simplicity and the absence of mandatory accounts or paid subscriptions for most features.

Integrating React with Leaflet

To harness the power of Leaflet within a React application, we utilize the React-Leaflet library. This library provides React components for Leaflet maps, making the integration seamless.

Setting Up Your React App

1. Start by creating a new React application:

npx create-react-app react-leaflet-guide
cd react-leaflet-guide

Install the necessary packages:

npm install [email protected] [email protected]

Ensure compatibility by updating the "browserslist" values in your package.json:

"browserslist": [
  ">0.2%",
  "not dead",
  "not op_mini all"
]

Displaying the Map

To display a map, React-Leaflet requires some CSS. You can either link to the CSS directly or incorporate it into your project. Ensure that the .leaflet-container has both width and height defined, or the map won't display.

.leaflet-container {
  width: 100%;
  height: 100vh;
}

In your main App component, import the necessary components and render the map:

import React from "react";
import { MapContainer, TileLayer } from 'react-leaflet';
import './App.css';

function App() {
  return (
    <MapContainer center={[45.4, -75.7]} zoom={12} scrollWheelZoom={false}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
    </MapContainer>
  );
}

export default App;

Adding Markers with Custom Data

Markers can be added to highlight specific locations on the map. For this guide, we'll use data from the city of Ottawa, showcasing skateboard parks.

import { Marker, Popup } from 'react-leaflet';
import { Icon } from "leaflet";
import * as parkData from "./data/skateboard-parks.json";

function App() {
  // ... previous code

  return (
    <MapContainer center={[45.4, -75.7]} zoom={12} scrollWheelZoom={false}>
      {/* ... TileLayer code */}
      {parkData.features.map(park => (
        <Marker
          key={park.properties.PARK_ID}
          position={[
            park.geometry.coordinates[1],
            park.geometry.coordinates[0]
          ]}
        >
          <Popup>
            <h2>{park.properties.NAME}</h2>
            <p>{park.properties.DESCRIPTIO}</p>
          </Popup>
        </Marker>
      ))}
    </MapContainer>
  );
}

Customizing Marker Icons

React Leaflet allows for custom marker icons. Here's how you can set up a custom icon for your markers:

const customIcon = new Icon({
  iconUrl: "/path-to-your-icon.svg",
  iconSize: [25, 25]
});

Then, assign this icon to your Marker component:

<Marker icon={customIcon} ... />

Fetching and Displaying Remote Data

With React Leaflet, you can also fetch and display data from remote sources. For instance, you can use the SWR library to fetch data and then display it on the map.

import useSwr from "swr";

const fetcher = (...args) => fetch(...args).then(response => response.json());

function App() {
  const url = "https://api-endpoint-for-data";
  const { data, error } = useSwr(url, { fetcher });
  const items = data && !error ? data : [];

  // ... rest of the code
}

Conclusion

React Leaflet offers a powerful, open-source alternative to mainstream mapping solutions. Its integration with React makes it a preferred choice for many developers. Whether you're looking to display simple maps or need advanced features like custom markers and remote data fetching, React Leaflet has got you covered.

FAQs

1. What is React Leaflet? React Leaflet is a library that provides React components for Leaflet maps, making it easier to integrate Leaflet with React applications.

2. Is Leaflet free to use? Yes, Leaflet is an open-source library, and it doesn't require mandatory accounts or paid subscriptions for most of its features.

3. How do I customize marker icons in React Leaflet? You can use the Icon component from the Leaflet library to create custom icons and then assign them to the Marker component using the icon prop.

4. Can I fetch and display remote data with React Leaflet? Absolutely! You can use libraries like SWR or Axios to fetch data from remote sources and then display it on your map using React Leaflet components.