Breaking News: Grepper is joining You.com. Read the official announcement!

Dragging not working with leaflet-side-by-side

</ProgAli> answered on July 13, 2024 Popularity 1/10 Helpfulness 1/10

answer Dragging not working with leaflet-side-by-side

Dragging not working with leaflet-side-by-side

Comment

import "leaflet/dist/leaflet.css";
import L from "leaflet";
import "leaflet-compare";
import "leaflet-compare/dist/leaflet-compare.css";
import { MapContainer, useMap } from "react-leaflet";
import { useEffect, useRef } from "react";

const Compare = () => {
  const position = [52.505, -0.1];
  const mapRef = useRef(null);

  function getRangeEvent(range) {
    return 'input'; // Get input element value to change the divider position 
  }

  function MapView() {
    const map = useMap();

    useEffect(() => {
      if (mapRef.current) return; // Skip if already initialized
      if (!map) return;

      map.createPane("left");
      map.createPane("right");

      // Left map
      const leftLayer = L.tileLayer("${url}", {
        attribution: "",
        pane: "left",
      }).addTo(map);

      // Right map
      const rightLayer = L.tileLayer("${url}", {
        attribution: "}",
        pane: "right",
      }).addTo(map);

      // Custom control extending leaflet-side-by-side
      L.Control.CustomCompare = L.Control.Compare.extend({
        _addEvents: function () {
          const range = this._range;
          const map = this._map;
          if (!map || !range) return;

          map.on("move", this._updateClip, this);
          map.on("layeradd layerremove", this._updateLayers, this);
          L.DomEvent.on(range, getRangeEvent(range), this._updateClip, this);
          L.DomEvent.on(range, "touchstart mousedown", () => {
            map.dragging.disable();
          });
          L.DomEvent.on(range, "touchend mouseup", () => {
            map.dragging.enable();
          });
        }
      });

      new L.Control.CustomCompare([leftLayer], [rightLayer]).addTo(map);

      mapRef.current = map; // Mark as initialized
    }, [map]);

    return null;
  }

  return (
    <MapContainer center={position} zoom={13} style={{ height: "100vh", width: "100%" }}>
      <MapView />
    </MapContainer>
  );
};

export default Compare;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Jul 13 2024

</ProgAli>

0 Answers Avg Quality 2/10

Dragging not working with leaflet-side-by-side

Contents

More Related Answers

Dragging not working with leaflet-side-by-side

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.