NextJS Leaflet : Adding Geoman to Leaflet

Documentation Sep 27, 2024

Geoman is a powerful library that enables the creation and editing of geospatial data on maps. It integrates seamlessly with Leaflet, making it an excellent choice for anyone working with interactive web maps.

One of the best features of Geoman is its easy integration with Leaflet.js and React-Leaflet. This tool provides a range of useful features, including:

Creating polygons for maps
Completely free to use
Excellent documentation

Integrating Geoman into Leaflet

In this tutorial, I’ll demonstrate how to integrate Geoman into a Next.js project using React-Leaflet. If you’re new to React-Leaflet integration, you can refer to this guide for a detailed explanation.

Step 1: Install Geoman

First, we need to install Geoman. For this example, we’ll use the free version of Leaflet-Geoman:

npm i @geoman-io/leaflet-geoman-free

Step 2: Add the CSS Module to `layout.tsx`

Next, we need to import the Geoman CSS file in the layout file to style the controls properly:

import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";

Step 3: Import Geoman in the Map Component

Now, we import the Geoman module into the component responsible for rendering the map:

import "@geoman-io/leaflet-geoman-free";

We create a function to initialize the Geoman toolbar and add it to our map controls:

import { useMap } from 'react-leaflet';
import { useEffect } from 'react';

const AddGeomanControls = () => {
  const map = useMap();

  useEffect(() => {
    map.pm.addControls({
      position: 'topleft',
      drawMarker: true,
      drawPolygon: true,
      drawPolyline: true,
      drawCircle: true,
      drawCircleMarker: true,
      editMode: true,
      dragMode: true,
      cutPolygon: true,
      removalMode: true,
    });

    map.on('pm:create', (e) => {
      // Handle creation event here
      console.log(e);
    });
  }, [map]);

  return null;
};

In this example, useMap() is used to access the map object, and the pm.addControls method is used to add drawing and editing controls to the toolbar. We set various controls like drawing markers, polygons, circles, and enabling editing and dragging modes by setting the respective keys to true.

map.pm.addControls({
  position: 'topleft',
  drawMarker: true,
  drawPolygon: true,
  drawPolyline: true,
  drawCircle: true,
  drawCircleMarker: true,
  editMode: true,
  dragMode: true,
  cutPolygon: true,
  removalMode: true,
});

The event handler:

map.on('pm:create', (e) => {
  // Trigger actions when a shape is created
  console.log(e);
});

This allows you to trigger specific actions, such as saving the drawn polygon or interacting with the created object when the user draws a shape on the map.

You can explore more about Geoman's toolbar controls here. By default, many controls are enabled, but you can customize them as needed.

Step 5: Add the Geoman Controls to the Map

Finally, we integrate the AddGeomanControls function into the map component:

<MapContainer
  className="h-[500px] w-full"
  zoom={13}
  scrollWheelZoom={false}
  center={leafletCoordinates}
>
  <TileLayer
    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  <Marker position={leafletCoordinates} icon={icon}>
    <Popup>
      {name} <br /> {address}
    </Popup>
  </Marker>
  <GeoJSON data={dataGeoJSON} />
  <AddGeomanControls />
</MapContainer>

You can find the full example code here on GitHub.

That’s it for this simple tutorial on integrating Geoman. In the next part, we’ll cover how to create dynamic maps and save the drawn shapes to a database.