tidy up popup location and timing

Add countries layer if no internet

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v1.5.28 - Tidy up popup location and timing. Auto add countries overlay if no internet.
  - v1.5.27 - Add hide right click option to config panel
  - v1.5.26 - Ensure all map tiles loaded over https
  - v1.5.25 - Add button command to allow user to add and remove buttons

README.md

@@ -9,6 +9,7 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v1.5.28 - Tidy up popup location and timing. Auto add countries overlay if no internet.
 - v1.5.27 - Add hide right click option to config panel
 - v1.5.26 - Ensure all map tiles loaded over https
 - v1.5.25 - Add button command to allow user to add and remove buttons

package.json

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

worldmap/index.html

@@ -164,6 +164,7 @@ var connect = function() {
             document.getElementById("foot").innerHTML = "<font color='#494'>"+ibmfoot+"</font>";
         }
         ws.send(JSON.stringify({action:"connected"}));
+        onoffline();
     };
     ws.onclose = function() {
         console.log("DISCONNECTED");
@@ -198,6 +199,10 @@ var connect = function() {
 console.log("CONNECT TO",location.pathname + 'socket');
 connect();
 
+var onoffline = function() {
+    if (!navigator.onLine) {  map.addLayer(layers["_countries"]); }
+}
+
 document.addEventListener ("keydown", function (ev) {
     if (ev.ctrlKey  &&  ev.altKey  &&  ev.code === "Digit3") {
         ws.close();
@@ -1195,18 +1200,6 @@ function setMarker(data) {
             });
             marker =  L.marker(ll, { title:data.name, icon:myicon, draggable:drag });
         }
-        else if (data.icon && (data.icon.substr(0,3) === "fa-")) {
-            var col = data.iconColor || "#910000";
-            var imod = "";
-            if (data.icon.indexOf(" ") === -1) { imod = "fa-2x "; }
-            myMarker = L.divIcon({
-                className:"faicon",
-                html: '<center><i class="fa fa-fw '+imod+data.icon+'" style="color:'+col+'"></i></center>',
-                iconSize: [30, 30]
-            });
-            marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
-            labelOffset = [14,-16];
-        }
         else if (data.icon && (data.icon.match(/^:.*:$/g))) {
             var em = emojify(data.icon);
             var col = data.iconColor || "#910000";
@@ -1218,6 +1211,29 @@ function setMarker(data) {
             marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
             labelOffset = [20,-12];
         }
+        else if (data.icon && (data.icon.match(/^https?:.*$/))) {
+            myMarker = L.icon({
+                iconUrl: data.icon,
+                iconSize: [32, 32],
+                iconAnchor: [16, 16],
+                popupAnchor: [0, -16]
+            });
+            marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
+            labelOffset = [20,-12];
+        }
+        else if (data.icon && (data.icon.substr(0,3) === "fa-")) {
+            var col = data.iconColor || "#910000";
+            var imod = "";
+            if (data.icon.indexOf(" ") === -1) { imod = "fa-2x "; }
+            myMarker = L.divIcon({
+                className:"faicon",
+                html: '<center><i class="fa fa-fw '+imod+data.icon+'" style="color:'+col+'"></i></center>',
+                iconSize: [32, 32],
+                popupAnchor: [0, -16]
+            });
+            marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
+            labelOffset = [16,-16];
+        }
         else {
             myMarker = L.VectorMarkers.icon({
                 icon: data.icon || "circle",
@@ -1310,7 +1326,8 @@ function setMarker(data) {
             var llc = data.lineColor;
             delete data.lat;
             delete data.lon;
-            delete data.lineColor;
+            if (data.layer) { delete data.layer; }
+            if (data.lineColor) { delete data.lineColor; }
             if (data.draggable) { delete data.draggable; }
             for (var i in data) {
                 if ((i != "name") && (i != "length")) {
@@ -1390,7 +1407,10 @@ function setMarker(data) {
         }
         if (popped === true) {
             if (popid == data.name) {
-                if (popmark) { popmark.closePopup(); }
+                if (popmark) {
+                    popmark.closePopup();
+                    setTimeout(function() { marker.openPopup(); },100);
+                }
                 marker.openPopup();
             }
             else { popmark.openPopup(); }

worldmap/worldmap.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# date: Feb 25th 2019 - v1.5.27
+# date: Feb 28th 2019 - v1.5.28
 
 CACHE:
 index.html