Discover the Power of Open-Source Mapping with Leaflet

Getting Started with React Leaflet

To get started with React Leaflet, create a new React app and install the necessary dependencies:

npm install react-leaflet leaflet

Make sure to update your package.json file to prevent errors.

Rendering the Map

To display the map correctly, you’ll need to add some CSS to your project. You can either include the CSS link tag in your head:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

or copy and paste the CSS directly into your project. Don’t forget to set the width and height of the .leaflet-container div, otherwise, your map won’t be visible:

.leaflet-container {
  width: 800px;
  height: 600px;
}

Adding Markers with Custom Icons

To add markers to your map, you’ll need some data. For this example, we’ll use data from the city of Ottawa, featuring the locations of skateboard parks in the area. Load the data locally from a JSON file and map through it inside the MapContainer component, returning a Marker component for each park location:

import { MapContainer, Marker } from 'eact-leaflet';
import L from 'leaflet';

const skateparkData = [...]; // load data from JSON file

function MapComponent() {
  return (
    <MapContainer center={[45.4215, -75.6972]} zoom={12}>
      {skateparkData.map((park) => (
        <Marker key={park.id} position={[park.lat, park.lng]}>
          <Icon
            iconUrl="skatepark-icon.png"
            iconSize={[25, 41]}
            iconAnchor={[12, 41]}
          />
        </Marker>
      ))}
    </MapContainer>
  );
}

You can customize the marker icons using the Icon component from Leaflet.

Displaying Map Popups

To display popups on the map, track which skatepark the user clicks on and show a popup with information about the selected park:

import { Popup } from 'eact-leaflet';

function MapComponent() {
  const [selectedPark, setSelectedPark] = useState(null);

  return (
    <MapContainer center={[45.4215, -75.6972]} zoom={12}>
      {skateparkData.map((park) => (
        <Marker
          key={park.id}
          position={[park.lat, park.lng]}
          eventHandlers={{
            click: () => setSelectedPark(park),
          }}
        >
          <Icon
            iconUrl="skatepark-icon.png"
            iconSize={[25, 41]}
            iconAnchor={[12, 41]}
          />
        </Marker>
      ))}
      {selectedPark && (
        <Popup position={[selectedPark.lat, selectedPark.lng]}>
          <p><strong>{selectedPark.name}</strong></p>
          <p>{selectedPark.description}</p>
        </Popup>
      )}
    </MapContainer>
  );
}

The Popup component allows you to pass HTML and can be styled using CSS.

Loading Remote Data with SWR

Using SWR, you can load remote data from an API endpoint and display it on the map. For this example, we’ll use crime data provided by the UK police:

import useSWR from 'wr';

function MapComponent() {
  const { data, error } = useSWR('https://data.police.uk/api/crimes-street/all-crime', fetcher);

  if (error) return <div>Error: {error.message}</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <MapContainer center={[51.5074, -0.1278]} zoom={12}>
      {data.map((crime) => (
        <Marker key={crime.id} position={[crime.location.latitude, crime.location.longitude]}>
          <Icon
            iconUrl="crime-icon.png"
            iconSize={[25, 41]}
            iconAnchor={[12, 41]}
          />
        </Marker>
      ))}
    </MapContainer>
  );
}

Once you have the data, displaying it on the map is no different from displaying local data.

The Benefits of Leaflet

Leaflet is an extremely lightweight library, coming in at just under 40kb of JavaScript. It’s used by industry giants such as GitHub, Pinterest, and Etsy, and is a fantastic open-source and free mapping alternative to Google Maps and MapBox. With Leaflet, you can create stunning maps without breaking the bank or requiring an API key.

• Lightweight: Leaflet weighs in at just under 40kb of JavaScript.
• Open-source: Leaflet is completely free and open-source.
• No API key required: Unlike other mapping libraries, Leaflet doesn’t require an API key.