how to draw shapes in react-leaflet v3

Question

Do you have any idea about implementing the draw functionality to react-leafletV3? I have added an event listener but it is not working and reacting to anything.

  useEffect(() => {
    if (!map) return;

    map.addEventListener("mousemove", function (event) {
      setCoords({ lat: event.latlng.lat, lng: event.latlng.lng });
    });

    map.on("draw:drawstart", function (event) {
      console.log("event here", event);
    });

    const drawControl = new L.Control.Draw({
      position: "topleft",
    });
    drawControl.addTo(map);

    const leftLayer = L.tileLayer(
      layers[leftLayerIndex].url,
      layerOptions
    ).addTo(map);

    const rightLayer = L.tileLayer(
      layers[rightLayerIndex].url,
      layerOptions
    ).addTo(map);

    const sbs = L.control.sideBySide(leftLayer, rightLayer).addTo(map);
    setSideBySide(sbs);
  }, [map]);

  useEffect(() => {
    if (sideBySide) {
      sideBySide.setLeftLayers(
        L.tileLayer(layers[leftLayerIndex].url, layerOptions).addTo(map)
      );
    }
  }, [leftLayerIndex, rightLayerIndex, sideBySide]);

Can you provide a codesandbox demonstrating the issue you're having? Will be much easier to help, as the code you provided doesn't have any obvious problems. — Seth Lutske, Mar 11 '21 at 16:05
I have found the solution for adding listener to draw plugin but there is another probelm that is not clear for me that Icons are not rendered there. [this codeSandBox](https://codesandbox.io/s/how-to-change-tile-layers-in-react-leaflet-v3x-using-leaflet-side-by-side-forked-l99ft?file=/src/App.js) is an example code for my problem — Emad Baqeri, Mar 12 '21 at 14:34
I would modify your question to reflect the change in what you're asking. I see you're able to start drawing, but on completing a drawing, it just disappears. You need to also have an event for `editable:drawing:end` to capture the completed shape and add it to the map — Seth Lutske, Mar 12 '21 at 15:11

score 1 · Answer 1 · answered Mar 12 '21 at 22:17

This is the code that worked for me. I added an event listener that listens to the created layer and after creating the layer I added the feature group layer. I have mention that this part is required as I have commented in the options object.

      edit: {
        featureGroup: editableLayers, //REQUIRED!!
      }


  useEffect(() => {
    if (!map) return;

    map.addEventListener("mousemove", function (event) {
      setCoords({ lat: event.latlng.lat, lng: event.latlng.lng });
    });

    const editableLayers = new L.FeatureGroup();
    map.addLayer(editableLayers);

    const options = {
      position: "topleft",
      draw: {
        polyline: false,
        polygon: false,
        rectangle: {
          shapeOptions: {
            clickable: false,
            color: "dodgerblue",
          },
        },
      },
      edit: {
        featureGroup: editableLayers, //REQUIRED!!
      },
    };

    const drawControl = new L.Control.Draw(options);
    map.addControl(drawControl);

    map.on(L.Draw.Event.CREATED, function (e) {
      var type = e.layerType,
        layer = e.layer;

      if (type === "marker") {
        layer.bindPopup("A popup!");
      }

      editableLayers.addLayer(layer);
    });

    const leftLayer = L.tileLayer(
      layers[leftLayerIndex].url,
      layerOptions
    ).addTo(map);

    const rightLayer = L.tileLayer(
      layers[rightLayerIndex].url,
      layerOptions
    ).addTo(map);

    const sbs = L.control.sideBySide(leftLayer, rightLayer).addTo(map);
    setSideBySide(sbs);
  }, [map]);

Thanks, this helped me a lot. Brilliant solution – f.ashouri Mar 12 '21 at 22:23 — f.ashouri, Mar 12 '21 at 22:23

how to draw shapes in react-leaflet v3

1 Answers1