dmxm/node-red-contrib-jwht-map
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix split map position in iframe

Browse Source
This commit is contained in:
Dave Conway-Jones 2022-12-16 18:28:17 +00:00
parent 23a0aa12e1
commit 9667df12f3
No known key found for this signature in database
GPG Key ID: 88BA2B8A411BE9FF
4 changed files with 240 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -1,5 +1,6 @@
### Change Log for Node-RED Worldmap ### Change Log for Node-RED Worldmap
- v2.32.2 - Fix map split in iframe position
- v2.32.1 - Let command.heatmap replace complete heatmap array. - v2.32.1 - Let command.heatmap replace complete heatmap array.
- v2.32.0 - Change || to nullish operator ?? to fix numerous dodgy assignments. Issue #219 - v2.32.0 - Change || to nullish operator ?? to fix numerous dodgy assignments. Issue #219
Delete marker now also removes from heatmap layer. Issue #218 Delete marker now also removes from heatmap layer. Issue #218

1
README.md
View File

@ -11,6 +11,7 @@ map web page for plotting "things" on.
### Updates ### Updates
- v2.32.2 - Fix map split in iframe position
- v2.32.1 - Let command.map.heatmap replace complete heatmap array. - v2.32.1 - Let command.map.heatmap replace complete heatmap array.
- v2.32.0 - Change || to nullish operator ?? to fix numerous dodgy assignments. Issue #219 - v2.32.0 - Change || to nullish operator ?? to fix numerous dodgy assignments. Issue #219
Delete marker now also removes from heatmap layer. Issue #218 Delete marker now also removes from heatmap layer. Issue #218

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "node-red-contrib-web-worldmap", "name": "node-red-contrib-web-worldmap",
"version": "2.32.1", "version": "2.32.2",
"description": "A Node-RED node to provide a web page of a world map for plotting things on.", "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
"dependencies": { "dependencies": {
"@turf/bezier-spline": "~6.5.0", "@turf/bezier-spline": "~6.5.0",

113
worldmap/leaflet/leaflet-side-by-side.js
View File

@ -1,38 +1,39 @@
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){ (function () { function r(e, n, t) { function o(i, f) { if (!n[i]) { if (!e[i]) { var c = "function" == typeof require && require; if (!f && c) return c(i, !0); if (u) return u(i, !0); var a = new Error("Cannot find module '" + i + "'"); throw a.code = "MODULE_NOT_FOUND", a } var p = n[i] = { exports: {} }; e[i][0].call(p.exports, function (r) { var n = e[i][1][r]; return o(n || r) }, p, p.exports, r, e, n, t) } return n[i].exports } for (var u = "function" == typeof require && require, i = 0; i < t.length; i++)o(t[i]); return o } return r })()({
(function (global){ 1: [function (require, module, exports) {
var L = (typeof window !== "undefined" ? window['L'] : typeof global !== "undefined" ? global['L'] : null) (function (global) {
require('./layout.css') var L = (typeof window !== "undefined" ? window['L'] : typeof global !== "undefined" ? global['L'] : null)
require('./range.css') require('./layout.css')
require('./range.css')
var mapWasDragEnabled var mapWasDragEnabled
var mapWasTapEnabled var mapWasTapEnabled
// Leaflet v0.7 backwards compatibility // Leaflet v0.7 backwards compatibility
function on (el, types, fn, context) { function on(el, types, fn, context) {
types.split(' ').forEach(function (type) { types.split(' ').forEach(function (type) {
L.DomEvent.on(el, type, fn, context) L.DomEvent.on(el, type, fn, context)
}) })
} }
// Leaflet v0.7 backwards compatibility // Leaflet v0.7 backwards compatibility
function off (el, types, fn, context) { function off(el, types, fn, context) {
types.split(' ').forEach(function (type) { types.split(' ').forEach(function (type) {
L.DomEvent.off(el, type, fn, context) L.DomEvent.off(el, type, fn, context)
}) })
} }
function getRangeEvent (rangeInput) { function getRangeEvent(rangeInput) {
return 'oninput' in rangeInput ? 'input' : 'change' return 'oninput' in rangeInput ? 'input' : 'change'
} }
function cancelMapDrag () { function cancelMapDrag() {
mapWasDragEnabled = this._map.dragging.enabled() mapWasDragEnabled = this._map.dragging.enabled()
mapWasTapEnabled = this._map.tap && this._map.tap.enabled() mapWasTapEnabled = this._map.tap && this._map.tap.enabled()
this._map.dragging.disable() this._map.dragging.disable()
this._map.tap && this._map.tap.disable() this._map.tap && this._map.tap.disable()
} }
function uncancelMapDrag (e) { function uncancelMapDrag(e) {
this._refocusOnMap(e) this._refocusOnMap(e)
if (mapWasDragEnabled) { if (mapWasDragEnabled) {
this._map.dragging.enable() this._map.dragging.enable()
@ -40,16 +41,16 @@ function uncancelMapDrag (e) {
if (mapWasTapEnabled) { if (mapWasTapEnabled) {
this._map.tap.enable() this._map.tap.enable()
} }
} }
// convert arg to an array - returns empty array if arg is undefined // convert arg to an array - returns empty array if arg is undefined
function asArray (arg) { function asArray(arg) {
return (arg === 'undefined') ? [] : Array.isArray(arg) ? arg : [arg] return (arg === 'undefined') ? [] : Array.isArray(arg) ? arg : [arg]
} }
function noop () {} function noop() { }
L.Control.SideBySide = L.Control.extend({ L.Control.SideBySide = L.Control.extend({
options: { options: {
thumbSize: 42, thumbSize: 42,
padding: 0 padding: 0
@ -90,8 +91,8 @@ L.Control.SideBySide = L.Control.extend({
return this return this
}, },
setSplit: function(s) { setSplit: function (s) {
this._range.value = s/100; this._range.value = s / 100;
this._updateClip(); this._updateClip();
}, },
@ -129,11 +130,12 @@ L.Control.SideBySide = L.Control.extend({
var map = this._map var map = this._map
var nw = map.containerPointToLayerPoint([0, 0]) var nw = map.containerPointToLayerPoint([0, 0])
var se = map.containerPointToLayerPoint(map.getSize()) var se = map.containerPointToLayerPoint(map.getSize())
se.y += 40;
var clipX = nw.x + this.getPosition() var clipX = nw.x + this.getPosition()
var dividerX = this.getPosition() var dividerX = this.getPosition()
this._divider.style.left = dividerX + 'px' this._divider.style.left = dividerX + 'px'
this.fire('dividermove', {x: dividerX}) this.fire('dividermove', { x: dividerX })
var clipLeft = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)' 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)' var clipRight = 'rect(' + [nw.y, se.x, se.y, clipX].join('px,') + 'px)'
if (this._leftLayer) { if (this._leftLayer) {
@ -162,12 +164,12 @@ L.Control.SideBySide = L.Control.extend({
} }
}, this) }, this)
if (prevLeft !== this._leftLayer) { if (prevLeft !== this._leftLayer) {
prevLeft && this.fire('leftlayerremove', {layer: prevLeft}) prevLeft && this.fire('leftlayerremove', { layer: prevLeft })
this._leftLayer && this.fire('leftlayeradd', {layer: this._leftLayer}) this._leftLayer && this.fire('leftlayeradd', { layer: this._leftLayer })
} }
if (prevRight !== this._rightLayer) { if (prevRight !== this._rightLayer) {
prevRight && this.fire('rightlayerremove', {layer: prevRight}) prevRight && this.fire('rightlayerremove', { layer: prevRight })
this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer}) this._rightLayer && this.fire('rightlayeradd', { layer: this._rightLayer })
} }
this._updateClip() this._updateClip()
}, },
@ -196,25 +198,25 @@ L.Control.SideBySide = L.Control.extend({
map.off('move', this._updateClip, this) map.off('move', this._updateClip, this)
} }
} }
}) })
L.control.sideBySide = function (leftLayers, rightLayers, options) { L.control.sideBySide = function (leftLayers, rightLayers, options) {
return new L.Control.SideBySide(leftLayers, rightLayers, options) return new L.Control.SideBySide(leftLayers, rightLayers, options)
} }
module.exports = L.Control.SideBySide module.exports = L.Control.SideBySide
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) }).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){ }, { "./layout.css": 2, "./range.css": 4 }], 2: [function (require, module, exports) {
var inject = require('./node_modules/cssify'); var inject = require('./node_modules/cssify');
var css = ".leaflet-sbs-range {\r\n position: absolute;\r\n top: 50%;\r\n width: 100%;\r\n z-index: 999;\r\n}\r\n.leaflet-sbs-divider {\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n left: 50%;\r\n margin-left: -2px;\r\n width: 4px;\r\n background-color: #fff;\r\n pointer-events: none;\r\n z-index: 999;\r\n}\r\n"; var css = ".leaflet-sbs-range {\r\n position: absolute;\r\n top: 50%;\r\n width: 100%;\r\n z-index: 999;\r\n}\r\n.leaflet-sbs-divider {\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n left: 50%;\r\n margin-left: -2px;\r\n width: 4px;\r\n background-color: #fff;\r\n pointer-events: none;\r\n z-index: 999;\r\n}\r\n";
inject(css, undefined, '_i6aomd'); inject(css, undefined, '_i6aomd');
module.exports = css; module.exports = css;
},{"./node_modules/cssify":3}],3:[function(require,module,exports){ }, { "./node_modules/cssify": 3 }], 3: [function (require, module, exports) {
'use strict' 'use strict'
function injectStyleTag (document, fileName, cb) { function injectStyleTag(document, fileName, cb) {
var style = document.getElementById(fileName) var style = document.getElementById(fileName)
if (style) { if (style) {
@ -229,9 +231,9 @@ function injectStyleTag (document, fileName, cb) {
} }
return style return style
} }
module.exports = function (css, customDocument, fileName) { module.exports = function (css, customDocument, fileName) {
var doc = customDocument || document var doc = customDocument || document
/* istanbul ignore if: not supported by Electron */ /* istanbul ignore if: not supported by Electron */
if (doc.createStyleSheet) { if (doc.createStyleSheet) {
@ -248,9 +250,9 @@ module.exports = function (css, customDocument, fileName) {
} }
}) })
} }
} }
module.exports.byUrl = function (url) { module.exports.byUrl = function (url) {
/* istanbul ignore if: not supported by Electron */ /* istanbul ignore if: not supported by Electron */
if (document.createStyleSheet) { if (document.createStyleSheet) {
return document.createStyleSheet(url).ownerNode return document.createStyleSheet(url).ownerNode
@ -264,12 +266,13 @@ module.exports.byUrl = function (url) {
head.appendChild(link) head.appendChild(link)
return link return link
} }
} }
},{}],4:[function(require,module,exports){ }, {}], 4: [function (require, module, exports) {
var inject = require('./node_modules/cssify'); var inject = require('./node_modules/cssify');
var css = ".leaflet-sbs-range {\r\n -webkit-appearance: none;\r\n display: inline-block!important;\r\n vertical-align: middle;\r\n height: 0;\r\n padding: 0;\r\n margin: 0;\r\n border: 0;\r\n background: rgba(0, 0, 0, 0.25);\r\n min-width: 100px;\r\n cursor: pointer;\r\n pointer-events: none;\r\n z-index: 999;\r\n}\r\n.leaflet-sbs-range::-ms-fill-upper {\r\n background: transparent;\r\n}\r\n.leaflet-sbs-range::-ms-fill-lower {\r\n background: rgba(255, 255, 255, 0.25);\r\n}\r\n/* Browser thingies */\r\n\r\n.leaflet-sbs-range::-moz-range-track {\r\n opacity: 0;\r\n}\r\n.leaflet-sbs-range::-ms-track {\r\n opacity: 0;\r\n}\r\n.leaflet-sbs-range::-ms-tooltip {\r\n display: none;\r\n}\r\n/* For whatever reason, these need to be defined\r\n * on their own so dont group them */\r\n\r\n.leaflet-sbs-range::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n padding: 0;\r\n background: #fff;\r\n height: 40px;\r\n width: 40px;\r\n border-radius: 20px;\r\n cursor: ew-resize;\r\n pointer-events: auto;\r\n border: 1px solid #ddd;\r\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\r\n background-position: 50% 50%;\r\n background-repeat: no-repeat;\r\n background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range::-ms-thumb {\r\n margin: 0;\r\n padding: 0;\r\n background: #fff;\r\n height: 40px;\r\n width: 40px;\r\n border-radius: 20px;\r\n cursor: ew-resize;\r\n pointer-events: auto;\r\n border: 1px solid #ddd;\r\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\r\n background-position: 50% 50%;\r\n background-repeat: no-repeat;\r\n background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range::-moz-range-thumb {\r\n padding: 0;\r\n right: 0 ;\r\n background: #fff;\r\n height: 40px;\r\n width: 40px;\r\n border-radius: 20px;\r\n cursor: ew-resize;\r\n pointer-events: auto;\r\n border: 1px solid #ddd;\r\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\r\n background-position: 50% 50%;\r\n background-repeat: no-repeat;\r\n background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range:disabled::-moz-range-thumb {\r\n cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled::-ms-thumb {\r\n cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled::-webkit-slider-thumb {\r\n cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled {\r\n cursor: default;\r\n}\r\n.leaflet-sbs-range:focus {\r\n outline: none!important;\r\n}\r\n.leaflet-sbs-range::-moz-focus-outer {\r\n border: 0;\r\n}\r\n\r\n"; var css = ".leaflet-sbs-range {\r\n -webkit-appearance: none;\r\n display: inline-block!important;\r\n vertical-align: middle;\r\n height: 0;\r\n padding: 0;\r\n margin: 0;\r\n border: 0;\r\n background: rgba(0, 0, 0, 0.25);\r\n min-width: 100px;\r\n cursor: pointer;\r\n pointer-events: none;\r\n z-index: 999;\r\n}\r\n.leaflet-sbs-range::-ms-fill-upper {\r\n background: transparent;\r\n}\r\n.leaflet-sbs-range::-ms-fill-lower {\r\n background: rgba(255, 255, 255, 0.25);\r\n}\r\n/* Browser thingies */\r\n\r\n.leaflet-sbs-range::-moz-range-track {\r\n opacity: 0;\r\n}\r\n.leaflet-sbs-range::-ms-track {\r\n opacity: 0;\r\n}\r\n.leaflet-sbs-range::-ms-tooltip {\r\n display: none;\r\n}\r\n/* For whatever reason, these need to be defined\r\n * on their own so dont group them */\r\n\r\n.leaflet-sbs-range::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n padding: 0;\r\n background: #fff;\r\n height: 40px;\r\n width: 40px;\r\n border-radius: 20px;\r\n cursor: ew-resize;\r\n pointer-events: auto;\r\n border: 1px solid #ddd;\r\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\r\n background-position: 50% 50%;\r\n background-repeat: no-repeat;\r\n background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range::-ms-thumb {\r\n margin: 0;\r\n padding: 0;\r\n background: #fff;\r\n height: 40px;\r\n width: 40px;\r\n border-radius: 20px;\r\n cursor: ew-resize;\r\n pointer-events: auto;\r\n border: 1px solid #ddd;\r\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\r\n background-position: 50% 50%;\r\n background-repeat: no-repeat;\r\n background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range::-moz-range-thumb {\r\n padding: 0;\r\n right: 0 ;\r\n background: #fff;\r\n height: 40px;\r\n width: 40px;\r\n border-radius: 20px;\r\n cursor: ew-resize;\r\n pointer-events: auto;\r\n border: 1px solid #ddd;\r\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\r\n background-position: 50% 50%;\r\n background-repeat: no-repeat;\r\n background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range:disabled::-moz-range-thumb {\r\n cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled::-ms-thumb {\r\n cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled::-webkit-slider-thumb {\r\n cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled {\r\n cursor: default;\r\n}\r\n.leaflet-sbs-range:focus {\r\n outline: none!important;\r\n}\r\n.leaflet-sbs-range::-moz-focus-outer {\r\n border: 0;\r\n}\r\n\r\n";
inject(css, undefined, '_1tlt668'); inject(css, undefined, '_1tlt668');
module.exports = css; module.exports = css;
},{"./node_modules/cssify":3}]},{},[1]); }, { "./node_modules/cssify": 3 }]
}, {}, [1]);