Add side by side command mode

CHANGELOG.md

@@ -1,6 +1,7 @@
 ### Change Log for Node-RED Worldmap
 
- - v1.5.3 - Make manually added icons moveable by default.
+ - v1.5.3 - Add side by side mode (via `msg.command` only).
+ - v1.5.2 - Make manually added icons moveable by default.
  - v1.5.0 - Add multi-map capability - can now have multiple map endpoints. Issue #40 PR #51
    - Also add built-in world countries overlay layer for offline use.
  - v1.4.6 - allow more variation in fa-icon modifiers, so fa-3x and fa-spin work.

README.md

@@ -9,7 +9,8 @@ map web page for plotting "things" on.
 
 ### Updates
 
-- v1.5.3 - Make manually added icons moveable by default.
+- v1.5.3 - Add side by side mode (via `msg.command` only).
+- v1.5.2 - Make manually added icons moveable by default.
 - v1.5.0 - Add multi-map capability - can now have multiple map endpoints.
   - Also add built-in world countries overlay layer for offline use.
 - v1.4.6 - allow more variation in fa-icon modifiers, so fa-3x and fa-spin work.
@@ -245,6 +246,7 @@ Optional properties include
  - **layer** - set map to specified base layer name - `{command:{layer:"Esri"}}`
  - **showlayer** - show the named overlay - `{command:{showlayer:"foo"}}`
  - **hidelayer** - hide the named overlay - `{command:{hidelayer:"bar"}}`
+ - **side** - add a second map alongside with slide between them. Use the name of the *baselayer* to add - or "none" to remove the control. - `{command:{side:"Esri Satellite"}}`
  - **map** - Object containing details of a new map layer:
    - **name** - name of the map base layer OR **overlay** - name of overlay layer
    - **url** - url of the map layer

worldmap/index.html

@@ -53,6 +53,7 @@
     <script type="text/javascript" src="leaflet/TileLayer.GrayscaleWMS.js"></script>
     <script type="text/javascript" src="leaflet/L.Terminator.js"></script>
     <script type="text/javascript" src="leaflet/leaflet-velocity.min.js"></script>
+    <script type="text/javascript" src="leaflet/leaflet-side-by-side.js"></script>
     <script type="text/javascript" src="leaflet/tile.stamen.js"></script>
     <script type="text/javascript" src="leaflet/OSMBuildings-Leaflet.js"></script>
     <script type="text/javascript" src="leaflet/leaflet-omnivore.min.js"></script>
@@ -126,6 +127,7 @@ var initialposition = false;
 var inIframe = false;
 var showUserMenu = true;
 var showLayerMenu = true;
+var sidebyside;
 var layercontrol;
 var ws;
 
@@ -1475,6 +1477,20 @@ function doCommand(cmd) {
         baselayername = cmd.layer;
         basemaps[baselayername].addTo(map);
     }
+    // Add side by side control
+    if (cmd.side) { console.log("SIDE",cmd.side); }
+    if (cmd.side && (cmd.side === "none")) {
+        sidebyside.remove();
+        map.removeLayer(basemaps[sidebyside.lay]);
+        sidebyside = undefined;
+    }
+    if (cmd.side && basemaps.hasOwnProperty(cmd.side)) {
+        if (sidebyside) { sidebyside.removeFrom(map); }
+        basemaps[cmd.side].addTo(map);
+        sidebyside = L.Control.sideBySide(basemaps[baselayername], basemaps[cmd.side]);
+        sidebyside.addTo(map);
+        sidebyside.lay = cmd.side;
+    }
     // Turn on an existing overlay
     if (cmd.hasOwnProperty("showlayer") && overlays.hasOwnProperty(cmd.showlayer)) {
         map.addLayer(overlays[cmd.showlayer]);

worldmap/leaflet/leaflet-side-by-side.js

@@ -0,0 +1,214 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+(function (global){
+var L = (typeof window !== "undefined" ? window['L'] : typeof global !== "undefined" ? global['L'] : null)
+require('./layout.css')
+require('./range.css')
+
+var mapWasDragEnabled
+
+// 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)
+  })
+}
+
+function getRangeEvent (rangeInput) {
+  return 'oninput' in rangeInput ? 'input' : 'change'
+}
+
+function cancelMapDrag () {
+  mapWasDragEnabled = this._map.dragging.enabled()
+  this._map.dragging.disable()
+}
+
+function uncancelMapDrag (e) {
+  if (!mapWasDragEnabled) return
+  this._refocusOnMap(e)
+  this._map.dragging.enable()
+}
+
+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]
+  },
+
+  getPosition: noop,
+
+  setPosition: noop,
+
+  includes: 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
+    this._addEvents()
+    this._updateLayers()
+    this._updateClip()
+    return this
+  },
+
+  remove: function () {
+      if (!this._map) { return this; }
+      this._removeEvents()
+      this._container.parentNode.removeChild(this._container)
+      this._map = null
+      return this
+  },
+
+  _updateClip: function () {
+    var map = this._map
+    var rangeValue = this._range.value
+    var nw = map.containerPointToLayerPoint([0, 0])
+    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 = 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 () {
+    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)
+    on(range, getRangeEvent(range), this._updateClip, this)
+    on(range, 'mousedown touchstart', cancelMapDrag, this)
+    on(range, 'mouseup touchend', uncancelMapDrag, this)
+  },
+
+  _removeEvents: function () {
+    var range = this._range
+    var map = this._map
+    if (range) {
+      off(range, getRangeEvent(range), this._updateClip, this)
+      off(range, 'mousedown touchstart', cancelMapDrag, this)
+      off(range, 'mouseup touchend', 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.export = L.Control.sideBySide
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"./layout.css":2,"./range.css":4}],2:[function(require,module,exports){
+var css = ".leaflet-sbs-range {\n    position: absolute;\n    top: 50%;\n    width: 100%;\n    z-index: 999;\n}\n.leaflet-sbs-divider {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 50%;\n    margin-left: -2px;\n    width: 4px;\n    background-color: #fff;\n    pointer-events: none;\n    z-index: 999;\n}\n"; (require("./node_modules/cssify"))(css, undefined, '/Users/gregor/Dev/DdDev/leaflet-side-by-side/layout.css'); module.exports = css;
+},{"./node_modules/cssify":3}],3:[function(require,module,exports){
+function injectStyleTag(document, fileName, cb) {
+  var style = document.getElementById(fileName);
+
+  if (style) {
+    cb(style);
+  } else {
+    var head = document.getElementsByTagName('head')[0];
+
+    style = document.createElement('style');
+    style.id = fileName;
+    cb(style);
+    head.appendChild(style);
+  }
+
+  return style;
+}
+
+module.exports = function (css, customDocument, fileName) {
+  var doc = customDocument || document;
+  if (doc.createStyleSheet) {
+    var sheet = doc.createStyleSheet()
+    sheet.cssText = css;
+    return sheet.ownerNode;
+  } else {
+    return injectStyleTag(doc, fileName, function(style) {
+      if (style.styleSheet) {
+        style.styleSheet.cssText = css;
+      } else {
+        style.innerHTML = css;
+      }
+    });
+  }
+};
+
+module.exports.byUrl = function(url) {
+  if (document.createStyleSheet) {
+    return document.createStyleSheet(url).ownerNode;
+  } else {
+    var head = document.getElementsByTagName('head')[0],
+        link = document.createElement('link');
+
+    link.rel = 'stylesheet';
+    link.href = url;
+
+    head.appendChild(link);
+    return link;
+  }
+};
+
+},{}],4:[function(require,module,exports){
+var css = ".leaflet-sbs-range {\n    -webkit-appearance: none;\n    display: inline-block!important;\n    vertical-align: middle;\n    height: 0;\n    padding: 0;\n    margin: 0;\n    border: 0;\n    background: rgba(0, 0, 0, 0.25);\n    min-width: 100px;\n    cursor: pointer;\n    pointer-events: none;\n    z-index: 999;\n}\n.leaflet-sbs-range::-ms-fill-upper {\n    background: transparent;\n}\n.leaflet-sbs-range::-ms-fill-lower {\n    background: rgba(255, 255, 255, 0.25);\n}\n/* Browser thingies */\n\n.leaflet-sbs-range::-moz-range-track {\n    opacity: 0;\n}\n.leaflet-sbs-range::-ms-track {\n    opacity: 0;\n}\n.leaflet-sbs-range::-ms-tooltip {\n    display: none;\n}\n/* For whatever reason, these need to be defined\n * on their own so dont group them */\n\n.leaflet-sbs-range::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    margin: 0;\n    padding: 0;\n    background: #fff;\n    height: 40px;\n    width: 40px;\n    border-radius: 20px;\n    cursor: ew-resize;\n    pointer-events: auto;\n    border: 1px solid #ddd;\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\n    background-position: 50% 50%;\n    background-repeat: no-repeat;\n    background-size: 40px 40px;\n}\n.leaflet-sbs-range::-ms-thumb {\n    margin: 0;\n    padding: 0;\n    background: #fff;\n    height: 40px;\n    width: 40px;\n    border-radius: 20px;\n    cursor: ew-resize;\n    pointer-events: auto;\n    border: 1px solid #ddd;\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\n    background-position: 50% 50%;\n    background-repeat: no-repeat;\n    background-size: 40px 40px;\n}\n.leaflet-sbs-range::-moz-range-thumb {\n    padding: 0;\n    right: 0    ;\n    background: #fff;\n    height: 40px;\n    width: 40px;\n    border-radius: 20px;\n    cursor: ew-resize;\n    pointer-events: auto;\n    border: 1px solid #ddd;\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\n    background-position: 50% 50%;\n    background-repeat: no-repeat;\n    background-size: 40px 40px;\n}\n.leaflet-sbs-range:disabled::-moz-range-thumb {\n    cursor: default;\n}\n.leaflet-sbs-range:disabled::-ms-thumb {\n    cursor: default;\n}\n.leaflet-sbs-range:disabled::-webkit-slider-thumb {\n    cursor: default;\n}\n.leaflet-sbs-range:disabled {\n    cursor: default;\n}\n.leaflet-sbs-range:focus {\n    outline: none!important;\n}\n.leaflet-sbs-range::-moz-focus-outer {\n    border: 0;\n}\n\n"; (require("./node_modules/cssify"))(css, undefined, '/Users/gregor/Dev/DdDev/leaflet-side-by-side/range.css'); module.exports = css;
+},{"./node_modules/cssify":3}]},{},[1]);

worldmap/worldmap.appcache

@@ -24,6 +24,7 @@ leaflet/fullscreen@2x.png
 leaflet/l.ellipse.min.js
 leaflet/leaflet-heat.js
 leaflet/leaflet-omnivore.min.js
+leaflet/leaflet-side-by-side.js
 leaflet/leaflet-slider.css
 leaflet/leaflet-slider.js
 leaflet/leaflet-velocity.min.css