React-Leaflet (Dibujar)

 Para utilizar @geoman-io/leaflet-geoman-free con react-leaflet, necesitas integrar la funcionalidad de edición de mapas proporcionada por geoman en un mapa de react-leaflet. Aquí te muestro un ejemplo completo paso a paso:

1. Instalar las dependencias necesarias

Primero, asegúrate de tener instaladas las siguientes dependencias:

npm install react-leaflet leaflet @geoman-io/leaflet-geoman-free

2. Configurar el Mapa en React

Ahora, crea un componente de React que utilice react-leaflet y leaflet-geoman. Este ejemplo incluye un mapa básico con la funcionalidad de edición de geoman.

import React, { useEffect } from "react";
import { MapContainer, TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
import * as L from "leaflet";
import "@geoman-io/leaflet-geoman-free";
const MyMap = () => {
  useEffect(() => {
    const map = L.map("map").setView([51.505, -0.09], 13);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      maxZoom: 19,
    }).addTo(map);
    // Integración con Geoman
    map.pm.addControls({
      position: "topleft",
      drawCircle: true,
    });
    // Escucha eventos de Geoman (ejemplo de evento "create")
    map.on("pm:create", (e) => {
      console.log(e); // Aquí puedes manejar los eventos como "pm:create"
    });
    return () => {
      map.remove();
    };
  }, []);
  return (
    <div
      id="map"
      style={{ height: "100vh", width: "100%" }}
    />
  );
};
export default MyMap;

3. Usar el Componente en tu Aplicación

Ahora puedes usar el componente MyMap en tu aplicación React como lo harías con cualquier otro componente.

import React from 'react';
import ReactDOM from 'react-dom';
import MyMap from './MyMap'; // Asegúrate de que la ruta sea correcta
const App = () => {
  return (
    <div>
      <h1>Mapa con Geoman</h1>
      <MyMap />
    </div>
  );
};
export default App;

ReactDOM.render(<App />, document.getElementById("root"));

4. Explicación del Código

• MapContainer y TileLayer: Se usa MapContainer y TileLayer de react-leaflet para renderizar el mapa.
• useEffect: Dentro de useEffect, se inicializa el mapa utilizando Leaflet y se agrega la funcionalidad de edición de geoman.
• pm.addControls: Añade los controles de geoman al mapa, permitiendo que los usuarios dibujen polígonos, líneas, círculos, etc.
• map.on("pm
  "): Se usa para escuchar y manejar eventos de creación de objetos en el mapa.

5. Estilizado y Personalización

Puedes personalizar los estilos y opciones de los controles de geoman según tus necesidades. Por ejemplo, puedes desactivar ciertas herramientas o cambiar la posición de los controles.

Este ejemplo básico debería funcionar bien como punto de partida para usar @geoman-io/leaflet-geoman-free en un proyecto con react-leaflet.