Single side layer at a time

app/static/app/js/components/LayersControlLayer.jsx

@@ -78,6 +78,7 @@ export default class LayersControlLayer extends React.Component {
 
   componentDidMount(){
     PluginsAPI.Map.onMapTypeChanged(this.handleMapTypeChange);
+    PluginsAPI.Map.onSideBySideChanged(this.handleSideBySideChange);
   }
 
   handleMapTypeChange = (type, autoExpand) => {
@@ -88,6 +89,23 @@ export default class LayersControlLayer extends React.Component {
     }
   }
 
+  handleSideBySideChange = (layer, side) => {
+    // Toggle this layer's side off if it was previously sided
+    // when another layer is set to side
+    if (this.props.layer !== layer && this.state.side && side){
+        setTimeout(() => {
+            let visible = this.state.visible;
+            if (this.wasInvisibleOnSideClick){
+                visible = false;
+                this.wasInvisibleOnSideClick = false;
+            }
+    
+            this.setState({ side: false, visible });
+            PluginsAPI.Map.sideBySideChanged(this.props.layer, false);
+        }, 0);
+    }
+  }
+
   componentDidUpdate(prevProps, prevState){
     const { layer } = this.props;
 
@@ -126,6 +144,7 @@ export default class LayersControlLayer extends React.Component {
         this.exportReq = null;
     }
 
+    PluginsAPI.Map.offSideBySideChanged(this.handleSideBySideChange);
     PluginsAPI.Map.offMapTypeChanged(this.handleMapTypeChange);
   }
 

app/static/app/js/components/Map.jsx

@@ -737,7 +737,6 @@ _('Example:'),
 
   handleSideBySideChange = (layer, side) => {
     let { rightLayers, imageryLayers } = this.state;
-    let leftLayers = [];
 
     imageryLayers.forEach(l => l.restoreZIndex());
 
@@ -749,20 +748,20 @@ _('Example:'),
 
     this.setState({rightLayers});
 
+    // Make to reset clipping
+    imageryLayers.forEach(l => {
+      let container = l.getContainer();
+      if (container) container.style.clip = '';
+    });
+
     if (rightLayers.length > 0){
       if (!this.sideBySideCtrl){
-        this.sideBySideCtrl = L.control.sideBySide(leftLayers, rightLayers).addTo(this.map);
+        this.sideBySideCtrl = L.control.sideBySide([], rightLayers).addTo(this.map);
       }else{
         this.sideBySideCtrl.setRightLayers(rightLayers);
-        this.sideBySideCtrl.setLeftLayers(leftLayers);
       }
     }else{
       if (this.sideBySideCtrl){
-        // Make sure clipping is removed
-        imageryLayers.forEach(l => {
-          let container = l.getContainer();
-          if (container) container.style.clip = '';
-        });
         this.sideBySideCtrl.remove();
         this.sideBySideCtrl = null;
       }