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

This commit is contained in:
Dave Conway-Jones 2020-06-30 20:13:22 +01:00
parent 5f8c6c3658
commit df1d70c262
No known key found for this signature in database
GPG Key ID: 302A6725C594817F
4 changed files with 19 additions and 11 deletions

View File

@ -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.

View File

@ -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

View File

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

View File

@ -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],
iconAnchor: [16, 16],
popupAnchor: [0, -16]
iconSize: [sz, sz],
iconAnchor: [sz/2, sz/2],
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 }));
});
}