Add setLeftLayers() and setRightLayers()

CHANGELOG.md

@@ -3,11 +3,15 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
-## v1.1.1
+## Unreleased
+
+- ADDED: Add `setLeftLayers()` and `setRightLayers()` methods
+
+## [v1.1.1] - 2015-12-03
 
 - FIXED: fix package.json settings for npm distribution
 
-## v1.1.0 - 2015-12-03
+## [v1.1.0] - 2015-12-03
 
 - ADDED: Events
 - FIXED: Fix initial divider position in Firefox, should start in middle of map
@@ -15,3 +19,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## v1.0.2 - 2015-12-02
 
 Initial release
+
+[Unreleased]: https://github.com/digidem/leaflet-side-by-side/compare/v1.1.1...HEAD
+[v1.1.1]: https://github.com/digidem/leaflet-side-by-side/compare/v1.1.0...v1.1.1
+[v1.1.0]: https://github.com/digidem/leaflet-side-by-side/compare/v1.0.2...v1.1.0

README.md

@@ -12,8 +12,8 @@ Creates a new Leaflet Control for comparing two layers or collections of layers.
 
 | 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`* |
+| `leftLayers`  | L.Layer\|array | A Leaflet Layer or array of layers to show on the left side of the map. Any layer added to the map that is in this array 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 layer added to the map that is in this array will be shown on the right. These *should not be* the same as any layers in `leftLayers` |
 
 ### Events
 
@@ -27,6 +27,13 @@ Subscribe to events using [these methods](http://leafletjs.com/reference.html#ev
 | `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. |
 
+### Methods
+
+| Method           | Returns        | Description   |
+| ----------       | -------------- | ------------- |
+| `setLeftLayers`  | `this`         | Set the layer(s) for the left side  |
+| `setRightLayers` | `this`         | Set the layer(s) for the right side |
+
 ### Usage
 
 Add the script to the top of your page (css is included in the javascript):

index.js

@@ -33,14 +33,19 @@ function uncancelMapDrag (e) {
   this._map.dragging.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 () {
   return
 }
 
 L.Control.SideBySide = L.Control.extend({
   initialize: function (leftLayers, rightLayers) {
-    this._leftLayers = Array.isArray(leftLayers) ? leftLayers : [leftLayers]
-    this._rightLayers = Array.isArray(rightLayers) ? rightLayers : [rightLayers]
+    this.setLeftLayers(leftLayers)
+    this.setRightLayers(rightLayers)
   },
 
   getPosition: noop,
@@ -64,7 +69,6 @@ L.Control.SideBySide = L.Control.extend({
     range.value = 0.5
     this._addEvents()
     this._updateLayers()
-    this._updateClip()
     return this
   },
 
@@ -80,6 +84,18 @@ L.Control.SideBySide = L.Control.extend({
     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 rangeValue = this._range.value