fix add to layer, update popup lat/lon on move

README.md

@@ -9,7 +9,7 @@ map web page for plotting "things" on.
 
 ### Updates
 
-- v1.5.1 - Make manually added icons moveable by default.
+- v1.5.2 - Make manually added icons moveable by default.
 - v1.5.0 - Add multi-map capability - can now have multiple map endpoints.
   - Also add built-in world countries overlay layer for offline use.
 - v1.4.6 - allow more variation in fa-icon modifiers, so fa-3x and fa-spin work.

package.json

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

worldmap/css/map.css

@@ -109,6 +109,14 @@ a {
     width:237px;
 }
 
+#delbutton {
+    font-size: 14px;
+    margin-top: 4px;
+    border-radius: 4px;
+    background-color: #910000;
+    color: white;
+}
+
 .circle {
     background-color:rgba(255,255,40,0.7);
     border-color:darkgrey;

worldmap/index.html

@@ -68,7 +68,7 @@
 </div>
 <div id="results">
     <span id="searchRes"></span>
-    <span id="bars" onclick='toggleMenu()' onmouseover='toggleMenu()'><i class="fa fa-bars fa-2x fa-inverse"></i></span>
+    <span id="bars" onclick='toggleMenu()'><i class="fa fa-bars fa-2x fa-inverse"></i></span>
 </div>
 <div id="menu"><table>
     <tr><td><input type='text' name='search' id='search' size='20' style="width:150px;"/>&nbsp;<span onclick='doSearch();'><i class="fa fa-search fa-lg"></i></span></td></tr>
@@ -513,7 +513,7 @@ map.on('zoomend', function() {
 //    ws.send(JSON.stringify({action:"rightclick", lat:e.latlng.lat.toFixed(5), lon:e.latlng.lng.toFixed(5)}));
 //});
 
-var rightmenuMap = L.popup({keepInView:true, minWidth:250}).setContent("<input type='text' id='rinput' onkeydown='if (event.keyCode == 13) addThing();' placeholder='name (,icon, layer, colour)'/>");
+var rightmenuMap = L.popup({keepInView:true, minWidth:250}).setContent("<b>Add marker</b><br><input type='text' id='rinput' onkeydown='if (event.keyCode == 13) addThing();' placeholder='name (,icon, layer, colour)'/>");
 
 var rclk;
 var addThing = function() {
@@ -534,8 +534,8 @@ var addThing = function() {
     else {
         d = {name:bits[0].trim(),layer:lay,icon:icon,iconColor:colo,draggable:drag,lat:rclk.lat,lon:rclk.lng};
     }
-    map.addLayer(layers[lay]);
     setMarker(d);
+    map.addLayer(layers[lay]);
     d.action = "point";
     ws.send(JSON.stringify(d));
 }
@@ -1102,10 +1102,12 @@ function setMarker(data) {
         // send new position at end of move event if point is draggable
         if (data.draggable === true) {
             marker.name = data.name;
-            marker.icon = data.icon;
-            marker.iconColor = data.iconColor;
-            marker.SIDC = data.SIDC;
+            if (data.icon) { marker.icon = data.icon; }
+            if (data.iconCOlor) { marker.iconColor = data.iconColor; }
+            if (data.SIDC) { marker.SIDC = data.SIDC; }
             marker.on('dragend', function (e) {
+                var l = marker.getLatLng().toString().replace('Lng(',', Lon : ').replace(')','')
+                marker.setPopupContent(marker.getPopup().getContent().split("Lat, Lon")[0] + l);
                 ws.send(JSON.stringify({action:"move",name:marker.name,layer:marker.lay,icon:marker.icon,iconColor:marker.iconColor,SIDC:marker.SIDC,lat:parseFloat(marker.getLatLng().lat.toFixed(6)),lon:parseFloat(marker.getLatLng().lng.toFixed(6))}));
             });
         }
@@ -1155,6 +1157,8 @@ function setMarker(data) {
             }
 
             // Add any remaining properties to the info box
+            delete data.lat;
+            delete data.lon;
             for (var i in data) {
                 if ((i != "name") && (i != "length")) {
                     if (typeof data[i] === "object") {
@@ -1165,10 +1169,10 @@ function setMarker(data) {
                 }
             }
             words = data.popup || words;
-            marker.bindPopup(words, {keepInView:true, minWidth:348});
+            marker.bindPopup(words + marker.getLatLng().toString().replace('Lng(',', Lon : ').replace(')',''), {keepInView:true, minWidth:348});
             marker._popup.dname = data.name;
             marker.lay = lay;                       // and the layer it is on
-            var rightmenuMarker = L.popup().setContent("<b>"+data.name+"</b><br/><button onclick='delMarker(\""+data.name+"\");'>Delete</button>");
+            var rightmenuMarker = L.popup().setContent("<b>"+data.name+"</b><br/><button id='delbutton' onclick='delMarker(\""+data.name+"\");'>Delete</button>");
             marker.on('contextmenu', function(e) {
                 rightmenuMarker.setLatLng(e.latlng);
                 map.openPopup(rightmenuMarker);

worldmap/worldmap.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# date: Oct 13th 2018 - v1.5.1
+# date: Oct 14th 2018 - v1.5.2
 
 CACHE:
 index.html