add heading to add marker, ans let http icon size scale

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v2.3.14 - Add heading to default addMarker, allow custom http icon size.
  - v2.3.13 - Fix geoson feature properties fill color, and better marker handling
  - v2.3.11 - Better editing of drawing layer, add OpenTopoMap, and better Esri satellite
  - v2.3.10 - Improve geojson layer and name handling.

README.md

@@ -11,6 +11,7 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v2.3.14 - Add heading to default addMarker, allow custom http icon size.
 - v2.3.13 - Fix geoson feature properties fill color, and better marker handling
 - v2.3.11 - Better editing of drawing layer, add OpenTopoMap, and better Esri satellite
 - v2.3.10 - Improve geojson layer and name handling.
@@ -63,7 +64,7 @@ Optional properties include
  - **ttl** : time to live, how long an individual marker stays on map in seconds (overrides general maxage setting, minimum 20 seconds)
  - **photoUrl** : adds an image pointed at by the url to the popup box.
  - **videoUrl** : adds an mp4 video pointed at by the url to the popup box. Ideally 320x240 in size.
- - **weblink** : adds a link to an external page for more information. Either set a url as a *string*, or an *object* like `{"name":"BBC News", "url":"http://news.bbc.co.uk", "target":"_new"}`
+ - **weblink** : adds a link to an external page for more information. Either set a url as a *string*, or an *object* like `{"name":"BBC News", "url":"https://news.bbc.co.uk", "target":"_new"}`
  - **addtoheatmap** : set to <i>false</i> to exclude point from contributing to the heatmap layer. (default true)
  - **intensity** : set to a value of 0.1 - 1.0 to set the intensity of the point on the heatmap layer. (default 1.0)
  - **popped** : set to true to automatically open the popup info box, set to false to close it.
@@ -84,7 +85,7 @@ If you use the name without the fa- prefix (eg `male`) you will get the icon ins
 
 You can also specify an emoji as the icon by using the :emoji name: syntax - for example `:smile:`. Here is a **[list of emojis](https://github.com/dceejay/RedMap/blob/master/emojilist.md)**.
 
-Or you can specify an image to load as an icon by setting the icon to http(s)://... It will be scaled to 32x32 pixels. For example `"https://img.icons8.com/windows/32/000000/bird.png"`
+Or you can specify an image to load as an icon by setting the icon to http(s)://... By default will be scaled to 32x32 pixels. You can change the size by setting **iconSize** to a number - eg 64. Example icon - `"https://img.icons8.com/windows/32/000000/bird.png"`
 
 There are also several special icons...
 
@@ -486,7 +487,7 @@ The `opt` property is optional. See the <a href="https://leafletjs.com/examples/
 
 The `fit` property is optional. If boolean true the map will automatically zoom to fit the area relevant to the geojson.
 
-see http://leafletjs.com/examples/geojson/ for more details about options for opt.
+see https://leafletjs.com/examples/geojson/ for more details about options for opt.
 
 #### To add a new KML, GPX, or TOPOJSON overlay
 

package.json

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

worldmap/worldmap.js

@@ -545,7 +545,7 @@ map.on('zoomend', function() {
 //});
 
 // single right click to add a marker
-var addmenu = "<b>Add marker</b><br><input type='text' id='rinput' autofocus onkeydown='if (event.keyCode == 13) addThing();' placeholder='name (,icon, layer, colour)'/>";
+var addmenu = "<b>Add marker</b><br><input type='text' id='rinput' autofocus onkeydown='if (event.keyCode == 13) addThing();' placeholder='name (,icon, layer, colour, heading)'/>";
 var rightmenuMap = L.popup({keepInView:true, minWidth:250}).setContent(addmenu);
 
 var rclk;
@@ -558,9 +558,10 @@ var addThing = function() {
     var icon = (bits[1] || "circle").trim();
     var lay = (bits[2] || "_drawing").trim();
     var colo = (bits[3] || "#910000").trim();
+    var hdg = parseFloat(bits[4] || 0);
     var drag = true;
     var regi = /^[S,G,E,I,O][A-Z]{4}.*/i;  // if it looks like a SIDC code
-    var d = {action:"point", name:bits[0].trim(), layer:lay, draggable:drag, lat:rclk.lat, lon:rclk.lng};
+    var d = {action:"point", name:bits[0].trim(), layer:lay, draggable:drag, lat:rclk.lat, lon:rclk.lng, bearing:hdg};
     if (regi.test(icon)) {
         d.SIDC = (icon.toUpperCase()+"------------").substr(0,12);
     }
@@ -1388,15 +1389,16 @@ function setMarker(data) {
             labelOffset = [12,-4];
         }
         else if (data.icon.match(/^https?:.*$/)) {
+            var sz = data.iconSize || 32;
             myMarker = L.icon({
                 iconUrl: data.icon,
-                iconSize: [32, 32],
+                iconSize: [sz, sz],
-                iconAnchor: [16, 16],
+                iconAnchor: [sz/2, sz/2],
-                popupAnchor: [0, -16]
+                popupAnchor: [0, -sz/2]
             });
             var dir = parseFloat(data.hdg || data.bearing || "0");
             marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag, rotationAngle:dir, rotationOrigin:"center"});
-            labelOffset = [12,-4];
+            labelOffset = [iz/2-4,-4];
         }
         else if (data.icon.substr(0,3) === "fa-") {
             var col = data.iconColor || "#910000";
@@ -1480,7 +1482,11 @@ function setMarker(data) {
         marker.on('dragend', function (e) {
             var l = marker.getLatLng().toString().replace('LatLng(','lat, 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,draggable:true,lat:parseFloat(marker.getLatLng().lat.toFixed(6)),lon:parseFloat(marker.getLatLng().lng.toFixed(6))}));
+            var b = marker.getPopup().getContent().split("bearing : ");
+            if (b.length === 2) { b = parseFloat(b[1].split("<br")[0]); }
+            else { b = undefined; }
+            console.log("P",marker.getPopup().getContent())
+            ws.send(JSON.stringify({action:"move",name:marker.name,layer:marker.lay,icon:marker.icon,iconColor:marker.iconColor,SIDC:marker.SIDC,draggable:true,lat:parseFloat(marker.getLatLng().lat.toFixed(6)),lon:parseFloat(marker.getLatLng().lng.toFixed(6)),bearing:b }));
         });
     }