Use local leaflet sidebyside plugin to fix mapdrag

app/assets/scripts/components/compare-map/SideBySideTileLayer.js

@@ -3,7 +3,7 @@ import { memo, useEffect } from 'react';
 import T from 'prop-types';
 import L from 'leaflet';
 import React from 'react';
-import 'leaflet-side-by-side';
+import './leaflet-side-by-side';
 
 function SideBySideTileLayer({
   leftTile,
@@ -45,7 +45,6 @@ function SideBySideTileLayer({
       ctrl.remove();
     };
   }, []);
-  // }, [leftTile.opacity, rightTile.opacity]);
 
   return <div />;
 }

app/assets/scripts/components/compare-map/leaflet-side-by-side.js

@@ -0,0 +1,218 @@
+var L = require('leaflet');
+
+/* eslint-disable no-unused-vars */
+var mapWasDragEnabled;
+var mapWasTapEnabled;
+
+// Leaflet v0.7 backwards compatibility
+function on(el, types, fn, context) {
+  types.split(' ').forEach(function (type) {
+    L.DomEvent.on(el, type, fn, context);
+  });
+}
+
+// Leaflet v0.7 backwards compatibility
+function off(el, types, fn, context) {
+  types.split(' ').forEach(function (type) {
+    L.DomEvent.off(el, type, fn, context);
+  });
+}
+/* eslint-enable no-unused-vars */
+
+function getRangeEvent(rangeInput) {
+  return 'oninput' in rangeInput ? 'input' : 'change';
+}
+
+// Removed cancelMapDrag and uncancelMapDrag to enable map dragging following https://github.com/digidem/leaflet-side-by-side/issues/47
+// function cancelMapDrag() {
+//   mapWasDragEnabled = this._map.dragging.enabled();
+//   mapWasTapEnabled = this._map.tap && this._map.tap.enabled();
+//   this._map.dragging.disable();
+//   this._map.tap && this._map.tap.disable();
+// }
+
+// function uncancelMapDrag(e) {
+//   this._refocusOnMap(e);
+//   if (mapWasDragEnabled) {
+//     this._map.dragging.enable();
+//   }
+//   if (mapWasTapEnabled) {
+//     this._map.tap.enable();
+//   }
+// }
+
+// convert arg to an array - returns empty array if arg is undefined
+function asArray(arg) {
+  return arg === 'undefined' ? [] : Array.isArray(arg) ? arg : [arg];
+}
+
+function noop() {}
+
+L.Control.SideBySide = L.Control.extend({
+  options: {
+    thumbSize: 42,
+    padding: 0,
+  },
+
+  initialize: function (leftLayers, rightLayers, options) {
+    this.setLeftLayers(leftLayers);
+    this.setRightLayers(rightLayers);
+    L.setOptions(this, options);
+  },
+
+  getPosition: function () {
+    var rangeValue = this._range.value;
+    var offset =
+      (0.5 - rangeValue) * (2 * this.options.padding + this.options.thumbSize);
+    return this._map.getSize().x * rangeValue + offset;
+  },
+
+  setPosition: noop,
+
+  includes: L.Evented.prototype || L.Mixin.Events,
+
+  addTo: function (map) {
+    this.remove();
+    this._map = map;
+
+    var container = (this._container = L.DomUtil.create(
+      'div',
+      'leaflet-sbs',
+      map._controlContainer
+    ));
+
+    this._divider = L.DomUtil.create('div', 'leaflet-sbs-divider', container);
+    var range = (this._range = L.DomUtil.create(
+      'input',
+      'leaflet-sbs-range',
+      container
+    ));
+    range.type = 'range';
+    range.min = 0;
+    range.max = 1;
+    range.step = 'any';
+    range.value = 0.5;
+    range.style.paddingLeft = range.style.paddingRight =
+      this.options.padding + 'px';
+    this._addEvents();
+    this._updateLayers();
+    // Below line added to enable map dragging following https://github.com/digidem/leaflet-side-by-side/issues/47
+    L.DomEvent.disableClickPropagation(this._container);
+    return this;
+  },
+
+  remove: function () {
+    if (!this._map) {
+      return this;
+    }
+    if (this._leftLayer) {
+      this._leftLayer.getContainer().style.clip = '';
+    }
+    if (this._rightLayer) {
+      this._rightLayer.getContainer().style.clip = '';
+    }
+    this._removeEvents();
+    L.DomUtil.remove(this._container);
+
+    this._map = null;
+
+    return this;
+  },
+
+  setLeftLayers: function (leftLayers) {
+    this._leftLayers = asArray(leftLayers);
+    this._updateLayers();
+    return this;
+  },
+
+  setRightLayers: function (rightLayers) {
+    this._rightLayers = asArray(rightLayers);
+    this._updateLayers();
+    return this;
+  },
+
+  _updateClip: function () {
+    var map = this._map;
+    var nw = map.containerPointToLayerPoint([0, 0]);
+    var se = map.containerPointToLayerPoint(map.getSize());
+    var clipX = nw.x + this.getPosition();
+    var dividerX = this.getPosition();
+
+    this._divider.style.left = dividerX + 'px';
+    this.fire('dividermove', { x: dividerX });
+    var clipLeft = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)';
+    var clipRight = 'rect(' + [nw.y, se.x, se.y, clipX].join('px,') + 'px)';
+    if (this._leftLayer) {
+      this._leftLayer.getContainer().style.clip = clipLeft;
+    }
+    if (this._rightLayer) {
+      this._rightLayer.getContainer().style.clip = clipRight;
+    }
+  },
+
+  _updateLayers: function () {
+    if (!this._map) {
+      return this;
+    }
+    var prevLeft = this._leftLayer;
+    var prevRight = this._rightLayer;
+    this._leftLayer = this._rightLayer = null;
+    this._leftLayers.forEach(function (layer) {
+      if (this._map.hasLayer(layer)) {
+        this._leftLayer = layer;
+      }
+    }, this);
+    this._rightLayers.forEach(function (layer) {
+      if (this._map.hasLayer(layer)) {
+        this._rightLayer = layer;
+      }
+    }, this);
+    if (prevLeft !== this._leftLayer) {
+      prevLeft && this.fire('leftlayerremove', { layer: prevLeft });
+      this._leftLayer && this.fire('leftlayeradd', { layer: this._leftLayer });
+    }
+    if (prevRight !== this._rightLayer) {
+      prevRight && this.fire('rightlayerremove', { layer: prevRight });
+      this._rightLayer &&
+        this.fire('rightlayeradd', { layer: this._rightLayer });
+    }
+    this._updateClip();
+  },
+
+  _addEvents: function () {
+    var range = this._range;
+    var 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);
+    // Removed cancelMapDrag and uncancelMapDrag to enable map dragging following https://github.com/digidem/leaflet-side-by-side/issues/47
+    // L.DomEvent.on(range, 'touchstart', cancelMapDrag, this);
+    // L.DomEvent.on(range, 'touchend', uncancelMapDrag, this);
+    // L.DomEvent.on(range, 'mousedown', cancelMapDrag, this);
+    // L.DomEvent.on(range, 'mouseup', uncancelMapDrag, this);
+  },
+
+  _removeEvents: function () {
+    var range = this._range;
+    var map = this._map;
+    if (range) {
+      L.DomEvent.off(range, getRangeEvent(range), this._updateClip, this);
+      // Removed cancelMapDrag and uncancelMapDrag to enable map dragging following https://github.com/digidem/leaflet-side-by-side/issues/47
+      // L.DomEvent.off(range, 'touchstart', cancelMapDrag, this);
+      // L.DomEvent.off(range, 'touchend', uncancelMapDrag, this);
+      // L.DomEvent.off(range, 'mousedown', cancelMapDrag, this);
+      // L.DomEvent.off(range, 'mouseup', uncancelMapDrag, this);
+    }
+    if (map) {
+      map.off('layeradd layerremove', this._updateLayers, this);
+      map.off('move', this._updateClip, this);
+    }
+  },
+});
+
+L.control.sideBySide = function (leftLayers, rightLayers, options) {
+  return new L.Control.SideBySide(leftLayers, rightLayers, options);
+};
+
+module.exports = L.Control.SideBySide;

app/assets/scripts/styles/global.js

@@ -1,6 +1,7 @@
 import { css, createGlobalStyle } from 'styled-components';
 import { collecticonsFont } from './collecticons';
 import leafletStyles from './vendor/leaflet';
+import leafletSideBySideStyles from './vendor/leaflet-side-by-side';
 import reactToastStyles from './vendor/react-toastify';
 import inputRangeStyles from './vendor/react-input-range';
 import joyrideStyles from './vendor/joyridestyles';
@@ -21,6 +22,7 @@ export default createGlobalStyle`
   ${darkStyles()};
   ${collecticonsFont()};
   ${leafletStyles()};
+  ${leafletSideBySideStyles()};
   ${reactToastStyles()};
   ${inputRangeStyles()};
   ${joyrideStyles()};

app/assets/scripts/styles/vendor/leaflet-side-by-side.js

@@ -0,0 +1,113 @@
+import { css } from 'styled-components';
+import { themeVal } from '@devseed-ui/theme-provider';
+
+const thumbStyles = ` height: 2rem;
+width: 2rem;
+border: none;
+margin: 0;
+padding: 0;
+border-radius: 100%;
+position: relative;
+pointer-events: auto;
+cursor: pointer;
+background-size: 50% 50%;
+background-position: center;
+background-repeat: no-repeat;
+`;
+
+export default () => css`
+  .leaflet-sbs-range {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    z-index: 999;
+    -webkit-appearance: none;
+    display: inline-block !important;
+    vertical-align: middle;
+    height: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: rgba(0, 0, 0, 0.25);
+    min-width: 100px;
+    cursor: pointer;
+    pointer-events: none;
+  }
+
+  .leaflet-sbs-divider {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    margin-left: -2px;
+    width: 4px;
+    background-color: ${themeVal('color.background')};
+    pointer-events: none;
+    z-index: 999;
+  }
+
+  .leaflet-sbs-range::-ms-fill-upper {
+    background: transparent;
+  }
+  .leaflet-sbs-range::-ms-fill-lower {
+    background: rgba(255, 255, 255, 0.25);
+  }
+  /* Browser thingies */
+
+  .leaflet-sbs-range::-moz-range-track {
+    opacity: 0;
+  }
+  .leaflet-sbs-range::-ms-track {
+    opacity: 0;
+  }
+  .leaflet-sbs-range::-ms-tooltip {
+    display: none;
+  }
+  /* For whatever reason, these need to be defined
+* on their own so dont group them */
+
+  .leaflet-sbs-range::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    cursor: ew-resize;
+    margin-top: -14px;
+    background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.999 16H9.001V0H6.999V16ZM5.414 5.414L4 4L0 8L4 12L5.414 10.586L3.828 9H6V7H3.828L5.414 5.414ZM10.586 5.414L12 4L16 8L12 12L10.586 10.586L12.172 9H10V7H12.172L10.586 5.414Z' fill='%23F0F4FF'/%3E%3C/svg%3E"),
+      ${themeVal('color.background')};
+    ${thumbStyles};
+  }
+  .leaflet-sbs-range::-ms-thumb {
+    cursor: ew-resize;
+    background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.999 16H9.001V0H6.999V16ZM5.414 5.414L4 4L0 8L4 12L5.414 10.586L3.828 9H6V7H3.828L5.414 5.414ZM10.586 5.414L12 4L16 8L12 12L10.586 10.586L12.172 9H10V7H12.172L10.586 5.414Z' fill='%23F0F4FF'/%3E%3C/svg%3E"),
+      ${themeVal('color.background')};
+    ${thumbStyles};
+  }
+  .leaflet-sbs-range::-moz-range-thumb {
+    padding: 0;
+    right: 0;
+    background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.999 16H9.001V0H6.999V16ZM5.414 5.414L4 4L0 8L4 12L5.414 10.586L3.828 9H6V7H3.828L5.414 5.414ZM10.586 5.414L12 4L16 8L12 12L10.586 10.586L12.172 9H10V7H12.172L10.586 5.414Z' fill='%23F0F4FF'/%3E%3C/svg%3E"),
+      ${themeVal('color.background')};
+    cursor: ew-resize;
+  }
+  .leaflet-sbs-range:disabled::-moz-range-thumb {
+    cursor: default;
+  }
+  .leaflet-sbs-range:disabled::-ms-thumb {
+    cursor: default;
+  }
+  .leaflet-sbs-range:disabled::-webkit-slider-thumb {
+    cursor: default;
+  }
+  .leaflet-sbs-range:disabled {
+    cursor: default;
+  }
+  .leaflet-sbs-range:focus {
+    outline: none !important;
+  }
+  .leaflet-sbs-range::-moz-focus-outer {
+    border: 0;
+  }
+
+  .leaflet-div-icon.leaflet-editing-icon.leaflet-edit-move.leaflet-interactive,
+  .leaflet-div-icon.leaflet-editing-icon.leaflet-edit-resize.leaflet-interactive {
+    cursor: crosshair;
+  }
+`;