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

Add colour options for drawing layer

Browse Source
This commit is contained in:
Dave Conway-Jones 2020-03-11 12:18:18 +00:00
parent 3350094154
commit 57d1032fef
No known key found for this signature in database
GPG Key ID: 302A6725C594817F
4 changed files with 22 additions and 10 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
- v2.3.0 - Add colour options for drawing layer
- v2.2.1 - Better implementation of legend create/show/hide
- v2.2.0 - Add rangering arcs function
- v2.1.6 - Add legend command to allow inserting an html legend

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "node-red-contrib-web-worldmap",
"version": "2.2.1",
"version": "2.3.0",
"description": "A Node-RED node to provide a web page of a world map for plotting things on.",
"dependencies": {
"cgi": "0.3.1",

1
worldmap/css/worldmap.css
View File

@ -207,6 +207,7 @@ a {
.wm-green { color: #ADD5A6; }
.wm-yellow { color: #F5EF91; }
.wm-black { color: #444444; }
.wm-white { color: #EEEEEE; }
.legend {
padding: 6px 8px;

28
worldmap/worldmap.js
View File

@ -25,6 +25,7 @@ var showLayerMenu = true;
var showMouseCoords = false;
var sidebyside;
var layercontrol;
var drawingColour = "#910000";
var iconSz = {
"Team/Crew": 24,
@ -141,12 +142,13 @@ var fullscreenButton = L.control.fullscreen();
var rulerButton = L.control.ruler({position:"topleft"});
//var colorPickButton = L.easyButton({states:[{icon:'fa-tint fa-lg', onClick:function() { console.log("PICK"); }, title:'Pick Colour'}]});
var redButton = L.easyButton('fa-square wm-red', function(btn) { console.log("RED",btn); })
var blueButton = L.easyButton('fa-square wm-blue', function(btn) { console.log("BLUE",btn); })
var greenButton = L.easyButton('fa-square wm-green', function(btn) { console.log("GREEN",btn); })
var yellowButton = L.easyButton('fa-square wm-yellow', function(btn) { console.log("YELLOW",btn); })
var blackButton = L.easyButton('fa-square wm-black', function(btn) { console.log("BLACK",btn); })
var colorControl = L.easyBar([redButton,blueButton,greenButton,yellowButton,blackButton]);
var redButton = L.easyButton('fa-square wm-red', function(btn) { changeDrawColour("#E7827F"); })
var blueButton = L.easyButton('fa-square wm-blue', function(btn) { changeDrawColour("#94CCE2"); })
var greenButton = L.easyButton('fa-square wm-green', function(btn) { changeDrawColour("#ACD6A4"); })
var yellowButton = L.easyButton('fa-square wm-yellow', function(btn) { changeDrawColour("#F5F08B"); })
var blackButton = L.easyButton('fa-square wm-black', function(btn) { changeDrawColour("#444444"); })
var whiteButton = L.easyButton('fa-square wm-white', function(btn) { changeDrawColour("#EEEEEE"); })
var colorControl = L.easyBar([redButton,blueButton,greenButton,yellowButton,blackButton,whiteButton]);
function onLocationFound(e) {
@ -468,7 +470,7 @@ map.on('overlayadd', function(e) {
if (e.name == "drawing") {
overlays["drawing"].bringToFront();
map.addControl(drawControl);
//map.addControl(colorControl);
map.addControl(colorControl);
}
ws.send(JSON.stringify({action:"addlayer", name:e.name}));
});
@ -481,7 +483,7 @@ map.on('overlayremove', function(e) {
layers["_daynight"].clearLayers();
}
if (e.name == "drawing") {
//map.removeControl(colorControl);
map.removeControl(colorControl);
map.removeControl(drawControl);
}
ws.send(JSON.stringify({action:"dellayer", name:e.name}));
@ -746,7 +748,7 @@ var drawControl = new L.Control.Draw({
polyline: { shapeOptions: { clickable:true } },
marker: false,
//circle: false,
circle: { shapeOptions: { clickable:false } },
circle: { shapeOptions: { clickable:true } },
circlemarker: false,
rectangle: { shapeOptions: { clickable:true } },
polygon: { shapeOptions: { clickable:true } }
@ -758,6 +760,14 @@ var drawControl = new L.Control.Draw({
// edit: true
// }
});
var changeDrawColour = function(col) {
drawControl.setDrawingOptions({
polyline: { shapeOptions: { color:col } },
circle: { shapeOptions: { color:col } },
rectangle: { shapeOptions: { color:col } },
polygon: { shapeOptions: { color:col } }
});
}
map.on('draw:created', function (e) {
var name = e.layerType + drawCount;
drawCount = drawCount + 1;