tweak drawing colours

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

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

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",

worldmap/css/worldmap.css

@@ -207,12 +207,13 @@ a {
    transform-origin:0 100%;
 }
 
-.wm-red { color: #F56361; }
+.wm-red { color: #FF4040; }
-.wm-blue { color: #96CCE1; }
+.wm-blue { color: #4040F0; }
-.wm-green { color: #ADD5A6; }
+.wm-green { color: #40D040; }
-.wm-yellow { color: #F5EF91; }
+.wm-yellow { color: #FFFF40; }
-.wm-black { color: #444444; }
+.wm-black { color: #333333; }
 .wm-white { color: #EEEEEE; }
+.wm-magenta { color: #F020F0; }
 
 .legend {
     padding: 6px 8px;

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 redButton = L.easyButton('fa-square wm-red', function(btn) { changeDrawColour("#FF4040"); })
-        var blueButton = L.easyButton('fa-square wm-blue', function(btn) { changeDrawColour("#94CCE2"); })
+        var blueButton = L.easyButton('fa-square wm-blue', function(btn) { changeDrawColour("#4040F0"); })
-        var greenButton = L.easyButton('fa-square wm-green', function(btn) { changeDrawColour("#ACD6A4"); })
+        var greenButton = L.easyButton('fa-square wm-green', function(btn) { changeDrawColour("#40D040"); })
-        var yellowButton = L.easyButton('fa-square wm-yellow', function(btn) { changeDrawColour("#F5F08B"); })
+        var yellowButton = L.easyButton('fa-square wm-yellow', function(btn) { changeDrawColour("#FFFF40"); })
-        var blackButton = L.easyButton('fa-square wm-black', function(btn) { changeDrawColour("#444444"); })
+        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")) {