From 7e70f169a05d747430777fac295655a27d75e5dd Mon Sep 17 00:00:00 2001 From: Dave Conway-Jones Date: Sun, 10 Mar 2019 18:29:44 +0000 Subject: [PATCH] Add mouse pointer co-ordinates option --- README.md | 1 + worldmap.html | 13 ++++++++++ worldmap.js | 2 ++ worldmap/css/map.css | 2 +- worldmap/index.html | 31 ++++++++++++++++++++++++ worldmap/leaflet/Leaflet.Coordinates.css | 1 + worldmap/leaflet/Leaflet.Coordinates.js | 2 ++ worldmap/worldmap.appcache | 2 +- 8 files changed, 52 insertions(+), 2 deletions(-) create mode 100644 worldmap/leaflet/Leaflet.Coordinates.css create mode 100644 worldmap/leaflet/Leaflet.Coordinates.js diff --git a/README.md b/README.md index b55fe85..91b9801 100644 --- a/README.md +++ b/README.md @@ -277,6 +277,7 @@ Optional properties include - **panlock** - lock the map area to the current visible area. - `{"command":{"panlock":true}}` - **zoomlock** - locks the zoom control to the current value and removes zoom control - `{"command":{"zoomlock":true}}` - **hiderightclick** - disables the right click that allows adding or deleting points on the map - `{"command":{"hiderightclick":true}}` + - **coords** - turns on and off a display of the current mouse co-ordinates. Values can be "deg", "dms", or "none" (default). - `{"command":{"coords":"deg"}}` - **button** - if supplied with a `name` and `icon` property - adds a button to provide user input - sends a msg `{"action":"button", "name":"the_button_name"}` to the worldmap in node. If supplied with a `name` property only, it will remove the button. Optional `position` property can be 'bottomright', 'bottomleft', 'topleft' or 'topright' (default). diff --git a/worldmap.html b/worldmap.html index b41bbef..c3c4d3a 100644 --- a/worldmap.html +++ b/worldmap.html @@ -85,6 +85,14 @@ +
+ + +
@@ -161,6 +169,7 @@ then by default ⌘⇧m - ctrl-shift-m will load the m panlock: {value:"false"}, zoomlock: {value:"false"}, hiderightclick: {value:"false"}, + coords: {value: "false"}, path: {value:"/worldmap"} }, inputs:1, @@ -185,6 +194,10 @@ then by default ⌘⇧m - ctrl-shift-m will load the m $("#node-input-hiderightclick").val("false"); this.hiderightclick = "false"; } + if ($("#node-input-coords").val() === null) { + $("#node-input-coords").val("none"); + this.coords = "none"; + } $("#node-input-zoom").spinner({min:0, max:18}); $("#node-input-cluster").spinner({min:0, max:19}); } diff --git a/worldmap.js b/worldmap.js index 3ba05b6..ba1c28d 100644 --- a/worldmap.js +++ b/worldmap.js @@ -39,6 +39,7 @@ module.exports = function(RED) { this.zoomlock = n.zoomlock || "false"; this.panit = n.panit || "false"; this.hiderightclick = n.hiderightclick || "false"; + this.coords = n.coords || "none"; this.path = n.path || "/worldmap"; if (this.path.charAt(0) != "/") { this.path = "/" + this.path; } if (!sockets[this.path]) { @@ -72,6 +73,7 @@ module.exports = function(RED) { c.zoomlock = node.zoomlock; c.showlayers = node.layers; c.hiderightclick = node.hiderightclick; + c.coords = node.coords; client.write(JSON.stringify({command:c})); } }); diff --git a/worldmap/css/map.css b/worldmap/css/map.css index f16fcca..4e90461 100644 --- a/worldmap/css/map.css +++ b/worldmap/css/map.css @@ -60,7 +60,7 @@ a { #foot { position:absolute; - bottom:1px; + bottom:-1px; left:-1px; z-index:1; font-size:9px; diff --git a/worldmap/index.html b/worldmap/index.html index a26c617..65ae9c5 100644 --- a/worldmap/index.html +++ b/worldmap/index.html @@ -33,6 +33,7 @@ + @@ -61,6 +62,7 @@ + @@ -135,6 +137,7 @@ var initialposition = false; var inIframe = false; var showUserMenu = true; var showLayerMenu = true; +var showMouseCoords = false; var sidebyside; var layercontrol; @@ -884,6 +887,17 @@ layercontrol = L.control.layers(basemaps, overlays); if (!inIframe) { layercontrol.addTo(map); } else { showLayerMenu = false;} +var coords = L.control.coordinates({ + position:"bottomleft", //optional default "bootomright" + decimals:4, //optional default 4 + decimalSeperator:".", //optional default "." + labelTemplateLat:" Lat: {y}", //optional default "Lat: {y}" + labelTemplateLng:" Lon: {x}", //optional default "Lng: {x}" + enableUserInput:false, //optional default true + useDMS:true, //optional default false + useLatLngOrder: true, //ordering of labels, default false-> lng-lat +}); + // Add the dialog box for messages var dialogue = L.control.dialog().addTo(map); dialogue.freeze(); @@ -1513,6 +1527,23 @@ function doCommand(cmd) { } } } + if (cmd.hasOwnProperty("coords")) { + if (cmd.coords === "dms" && showMouseCoords === false) { + coords.options.useDMS = true; + showMouseCoords = true; + coords.addTo(map); + } + if (cmd.coords === "deg" && showMouseCoords === false) { + coords.options.useDMS = false; + showMouseCoords = true; + coords.addTo(map); + } + if (cmd.coords === "none" && showMouseCoords === true) { + showMouseCoords = false + coords.removeFrom(map); + } + } + var existsalready = false; // Add a new base map layer if (cmd.map && cmd.map.hasOwnProperty("name") && cmd.map.hasOwnProperty("url") && cmd.map.hasOwnProperty("opt")) { diff --git a/worldmap/leaflet/Leaflet.Coordinates.css b/worldmap/leaflet/Leaflet.Coordinates.css new file mode 100644 index 0000000..9d037b3 --- /dev/null +++ b/worldmap/leaflet/Leaflet.Coordinates.css @@ -0,0 +1 @@ +.leaflet-control-coordinates{background-color:#D8D8D8;background-color:rgba(255,255,255,.8);cursor:pointer}.leaflet-control-coordinates,.leaflet-control-coordinates .uiElement input{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.leaflet-control-coordinates .uiElement{margin:4px}.leaflet-control-coordinates .uiElement .labelFirst{margin-right:4px}.leaflet-control-coordinates .uiHidden{display:none}.leaflet-control-coordinates .uiElement.label{color:inherit;font-weight:inherit;font-size:inherit;padding:0;display:inherit} diff --git a/worldmap/leaflet/Leaflet.Coordinates.js b/worldmap/leaflet/Leaflet.Coordinates.js new file mode 100644 index 0000000..199f35f --- /dev/null +++ b/worldmap/leaflet/Leaflet.Coordinates.js @@ -0,0 +1,2 @@ +/*! Leaflet.Coordinates 02-03-2016 */ +L.Control.Coordinates=L.Control.extend({options:{position:"bottomright",decimals:4,decimalSeperator:".",labelTemplateLat:"Lat: {y}",labelTemplateLng:"Lng: {x}",labelFormatterLat:void 0,labelFormatterLng:void 0,enableUserInput:!0,useDMS:!1,useLatLngOrder:!1,centerUserCoordinates:!1,markerType:L.marker,markerProps:{}},onAdd:function(a){this._map=a;var b="leaflet-control-coordinates",c=this._container=L.DomUtil.create("div",b),d=this.options;this._labelcontainer=L.DomUtil.create("div","uiElement label",c),this._label=L.DomUtil.create("span","labelFirst",this._labelcontainer),this._inputcontainer=L.DomUtil.create("div","uiElement input uiHidden",c);var e,f;return d.useLatLngOrder?(f=L.DomUtil.create("span","",this._inputcontainer),this._inputY=this._createInput("inputY",this._inputcontainer),e=L.DomUtil.create("span","",this._inputcontainer),this._inputX=this._createInput("inputX",this._inputcontainer)):(e=L.DomUtil.create("span","",this._inputcontainer),this._inputX=this._createInput("inputX",this._inputcontainer),f=L.DomUtil.create("span","",this._inputcontainer),this._inputY=this._createInput("inputY",this._inputcontainer)),e.innerHTML=d.labelTemplateLng.replace("{x}",""),f.innerHTML=d.labelTemplateLat.replace("{y}",""),L.DomEvent.on(this._inputX,"keyup",this._handleKeypress,this),L.DomEvent.on(this._inputY,"keyup",this._handleKeypress,this),a.on("mousemove",this._update,this),a.on("dragstart",this.collapse,this),a.whenReady(this._update,this),this._showsCoordinates=!0,d.enableUserInput&&L.DomEvent.addListener(this._container,"click",this._switchUI,this),c},_createInput:function(a,b){var c=L.DomUtil.create("input",a,b);return c.type="text",L.DomEvent.disableClickPropagation(c),c},_clearMarker:function(){this._map.removeLayer(this._marker)},_handleKeypress:function(a){switch(a.keyCode){case 27:this.collapse();break;case 13:this._handleSubmit(),this.collapse();break;default:this._handleSubmit()}},_handleSubmit:function(){var a=L.NumberFormatter.createValidNumber(this._inputX.value,this.options.decimalSeperator),b=L.NumberFormatter.createValidNumber(this._inputY.value,this.options.decimalSeperator);if(void 0!==a&&void 0!==b){var c=this._marker;c||(c=this._marker=this._createNewMarker(),c.on("click",this._clearMarker,this));var d=new L.LatLng(b,a);c.setLatLng(d),c.addTo(this._map),this.options.centerUserCoordinates&&this._map.setView(d,this._map.getZoom())}},expand:function(){this._showsCoordinates=!1,this._map.off("mousemove",this._update,this),L.DomEvent.addListener(this._container,"mousemove",L.DomEvent.stop),L.DomEvent.removeListener(this._container,"click",this._switchUI,this),L.DomUtil.addClass(this._labelcontainer,"uiHidden"),L.DomUtil.removeClass(this._inputcontainer,"uiHidden")},_createCoordinateLabel:function(a){var b,c,d=this.options;return d.customLabelFcn?d.customLabelFcn(a,d):(b=d.labelLng?d.labelFormatterLng(a.lng):L.Util.template(d.labelTemplateLng,{x:this._getNumber(a.lng,d)}),c=d.labelFormatterLat?d.labelFormatterLat(a.lat):L.Util.template(d.labelTemplateLat,{y:this._getNumber(a.lat,d)}),d.useLatLngOrder?c+" "+b:b+" "+c)},_getNumber:function(a,b){var c;return c=b.useDMS?L.NumberFormatter.toDMS(a):L.NumberFormatter.round(a,b.decimals,b.decimalSeperator)},collapse:function(){if(!this._showsCoordinates){this._map.on("mousemove",this._update,this),this._showsCoordinates=!0;this.options;if(L.DomEvent.addListener(this._container,"click",this._switchUI,this),L.DomEvent.removeListener(this._container,"mousemove",L.DomEvent.stop),L.DomUtil.addClass(this._inputcontainer,"uiHidden"),L.DomUtil.removeClass(this._labelcontainer,"uiHidden"),this._marker){var a=this._createNewMarker(),b=this._marker.getLatLng();a.setLatLng(b);var c=L.DomUtil.create("div",""),d=L.DomUtil.create("div","",c);d.innerHTML=this._ordinateLabel(b);var e=L.DomUtil.create("a","",c);e.innerHTML="Remove",e.href="#";var f=L.DomEvent.stopPropagation;L.DomEvent.on(e,"click",f).on(e,"mousedown",f).on(e,"dblclick",f).on(e,"click",L.DomEvent.preventDefault).on(e,"click",function(){this._map.removeLayer(a)},this),a.bindPopup(c),a.addTo(this._map),this._map.removeLayer(this._marker),this._marker=null}}},_switchUI:function(a){L.DomEvent.stop(a),L.DomEvent.stopPropagation(a),L.DomEvent.preventDefault(a),this._showsCoordinates?this.expand():this.collapse()},onRemove:function(a){a.off("mousemove",this._update,this)},_update:function(a){var b=a.latlng,c=this.options;b&&(b=b.wrap(),this._currentPos=b,this._inputY.value=L.NumberFormatter.round(b.lat,c.decimals,c.decimalSeperator),this._inputX.value=L.NumberFormatter.round(b.lng,c.decimals,c.decimalSeperator),this._label.innerHTML=this._createCoordinateLabel(b))},_createNewMarker:function(){return this.options.markerType(null,this.options.markerProps)}}),L.control.coordinates=function(a){return new L.Control.Coordinates(a)},L.Map.mergeOptions({coordinateControl:!1}),L.Map.addInitHook(function(){this.options.coordinateControl&&(this.coordinateControl=new L.Control.Coordinates,this.addControl(this.coordinateControl))}),L.NumberFormatter={round:function(a,b,c){var d=L.Util.formatNum(a,b)+"",e=d.split(".");if(e[1]){for(var f=b-e[1].length;f>0;f--)e[1]+="0";d=e.join(c||".")}return d},toDMS:function(a){var b=Math.floor(Math.abs(a)),c=60*(Math.abs(a)-b),d=Math.floor(c),e=60*(c-d),f=Math.round(e);60==f&&(d++,f="00"),60==d&&(b++,d="00"),10>f&&(f="0"+f),10>d&&(d="0"+d);var g="";return 0>a&&(g="-"),""+g+b+"° "+d+"' "+f+"''"},createValidNumber:function(a,b){if(a&&a.length>0){var c=a.split(b||".");try{var d=Number(c.join("."));return isNaN(d)?void 0:d}catch(e){return void 0}}return void 0}}; diff --git a/worldmap/worldmap.appcache b/worldmap/worldmap.appcache index 7a9645a..21a9852 100644 --- a/worldmap/worldmap.appcache +++ b/worldmap/worldmap.appcache @@ -1,5 +1,5 @@ CACHE MANIFEST -# date: Mar 2nd 2019 - v1.5.29b +# date: Mar 2nd 2019 - v1.5.29c CACHE: index.html