Add Events

README.md

@@ -10,11 +10,23 @@ Creates a new Leaflet Control for comparing two layers or collections of layers.
 
 ### Parameters
 
-| parameter                     | type           | description                                                                                           |
-| ----------------------------- | -------------- | ----------------------------------------------------------------------------------------------------- |
+| parameter     | type           | description   |
+| ----------    | -------------- | ------------- |
 | `leftLayers`  | L.Layer\|array | A Leaflet Layer or array of layers to show on the left side of the map. Any layers in this array that are added to the map will be shown on the left |
 | `rightLayers` | L.Layer\|array | A Leaflet Layer or array of layers to show on the right side of the map. Any layers in this array that are added to the map will be shown on the right. These *should not be the same as any layers in `leftLayers`* |
 
+### Events
+
+Subscribe to events using [these methods](http://leafletjs.com/reference.html#events)
+
+| Event         | Data           | Description   |
+| ----------    | -------------- | ------------- |
+| `leftlayeradd`  | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | Fired when a layer is added to the left-hand-side pane |
+| `leftlayerremove` | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | Fired when a layer is removed from the left-hand-side pane |
+| `rightlayeradd` | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | Fired when a layer is added to the right-hand-side pane |
+| `rightlayerremove` | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | You guessed it... fired when a layer is removed from the right-hand-side pane |
+| `dividermove` | {x: Number} | Fired when the divider is moved. Returns an event object with the property `x` = the pixels of the divider from the left side of the map container. |
+
 ### Usage
 
 Add the script to the top of your page (css is included in the javascript):

index.js

@@ -11,6 +11,7 @@ function on (el, types, 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)
@@ -46,6 +47,8 @@ L.Control.SideBySide = L.Control.extend({
 
   setPosition: noop,
 
+  includes: L.Mixin.Events,
+
   addTo: function (map) {
     this.remove()
     this._map = map
@@ -84,8 +87,10 @@ L.Control.SideBySide = L.Control.extend({
     var se = map.containerPointToLayerPoint(map.getSize())
     var offset = (0.5 - rangeValue) * 44
     var clipX = nw.x + (se.x - nw.x) * rangeValue + offset
+    var dividerX = map.getSize().x * rangeValue + offset
 
-    this._divider.style.left = map.getSize().x * rangeValue + offset + 'px'
+    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) {
@@ -97,13 +102,27 @@ L.Control.SideBySide = L.Control.extend({
   },
 
   _updateLayers: function () {
+    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
+      if (this._map.hasLayer(layer)) {
+        this._leftLayer = layer
+      }
     }, this)
     this._rightLayers.forEach(function (layer) {
-      if (this._map.hasLayer(layer)) this._rightLayer = 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()
   },