From 19def98cf8366346cad9d48c4082fd12ca0574bd Mon Sep 17 00:00:00 2001
From: Dave Conway-Jones <conway@uk.ibm.com>
Date: Mon, 10 Jan 2022 15:48:26 +0000
Subject: [PATCH] tweak drawing colours

---
 CHANGELOG.md              |  1 +
 README.md                 |  1 +
 package.json              |  2 +-
 worldmap/css/worldmap.css | 11 ++++++-----
 worldmap/worldmap.js      | 21 +++++++++++----------
 5 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7b71318..5be10c9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v2.24.2 - Changes to drawing colours to be more visible.
  - v2.24.1 - Fix ellipse accuracy.
  - v2.24.0 - Add greatcircle option, fix non default httpRoot. Issue #193
  - v2.23.5 - Fix addtoheatmap. Issue #192
diff --git a/README.md b/README.md
index b60dfdd..d061616 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,7 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v2.24.2 - Changes to drawing colours to be more visible.
 - v2.24.1 - Fix ellipse accuracy
 - v2.24.0 - Add greatcircle option, fix non default httpRoot. Issue #193
 - v2.23.5 - Fix addtoheatmap. Issue #192
diff --git a/package.json b/package.json
index 05eaf18..f381dfb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "2.24.1",
+    "version": "2.24.2",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "@turf/bezier-spline": "~6.5.0",
diff --git a/worldmap/css/worldmap.css b/worldmap/css/worldmap.css
index a3e58cf..54e688f 100644
--- a/worldmap/css/worldmap.css
+++ b/worldmap/css/worldmap.css
@@ -207,12 +207,13 @@ a {
    transform-origin:0 100%;
 }
 
-.wm-red { color: #F56361; }
-.wm-blue { color: #96CCE1; }
-.wm-green { color: #ADD5A6; }
-.wm-yellow { color: #F5EF91; }
-.wm-black { color: #444444; }
+.wm-red { color: #FF4040; }
+.wm-blue { color: #4040F0; }
+.wm-green { color: #40D040; }
+.wm-yellow { color: #FFFF40; }
+.wm-black { color: #333333; }
 .wm-white { color: #EEEEEE; }
+.wm-magenta { color: #F020F0; }
 
 .legend {
     padding: 6px 8px;
diff --git a/worldmap/worldmap.js b/worldmap/worldmap.js
index a0b467e..9f49ced 100644
--- a/worldmap/worldmap.js
+++ b/worldmap/worldmap.js
@@ -565,8 +565,8 @@ map.on('overlayadd', function(e) {
     }
     if (e.name == "drawing") {
         overlays["drawing"].bringToFront();
-        map.addControl(drawControl);
         map.addControl(colorControl);
+        map.addControl(drawControl);
     }
     ws.send(JSON.stringify({action:"addlayer", name:e.name}));
 });
@@ -579,8 +579,8 @@ map.on('overlayremove', function(e) {
         layers["_daynight"].clearLayers();
     }
     if (e.name == "drawing") {
-        map.removeControl(colorControl);
         map.removeControl(drawControl);
+        map.removeControl(colorControl);
     }
     ws.send(JSON.stringify({action:"dellayer", name:e.name}));
 });
@@ -922,13 +922,14 @@ var addOverlays = function(overlist) {
     // Add the drawing layer...
     if (overlist.indexOf("DR")!==-1) {
         //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) { 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 redButton = L.easyButton('fa-square wm-red', function(btn) { changeDrawColour("#FF4040"); })
+        var blueButton = L.easyButton('fa-square wm-blue', function(btn) { changeDrawColour("#4040F0"); })
+        var greenButton = L.easyButton('fa-square wm-green', function(btn) { changeDrawColour("#40D040"); })
+        var yellowButton = L.easyButton('fa-square wm-yellow', function(btn) { changeDrawColour("#FFFF40"); })
+        var magentaButton = L.easyButton('fa-square wm-magenta', function(btn) { changeDrawColour("#F020F0"); })
+        var blackButton = L.easyButton('fa-square wm-black', function(btn) { changeDrawColour("#000000"); })
         var whiteButton = L.easyButton('fa-square wm-white', function(btn) { changeDrawColour("#EEEEEE"); })
-        colorControl = L.easyBar([redButton,blueButton,greenButton,yellowButton,blackButton,whiteButton]);
+        colorControl = L.easyBar([redButton,blueButton,greenButton,yellowButton,magentaButton,blackButton,whiteButton]);
 
         layers["_drawing"] = new L.FeatureGroup();
         overlays["drawing"] = layers["_drawing"];
@@ -953,7 +954,7 @@ var addOverlays = function(overlist) {
         });
         var changeDrawColour = function(col) {
             drawingColour = col;
-            console.log("COL",col)
+            console.log("COLOR",col)
             drawControl.setDrawingOptions({
                 polyline: { shapeOptions: { color:drawingColour } },
                 circle: { shapeOptions: { color:drawingColour } },
@@ -2085,7 +2086,7 @@ function setMarker(data) {
 function doCommand(cmd) {
     // console.log("COMMAND",cmd);
     if (cmd.init && cmd.hasOwnProperty("maplist")) {
-        basemaps = [];
+        //basemaps = {};
         addBaseMaps(cmd.maplist,cmd.layer);
     }
     if (cmd.init && cmd.hasOwnProperty("overlist")) {