rotate http icons, and let tracks handle arrays

to close #124, to close #125
This commit is contained in:
Dave Conway-Jones 2020-04-08 22:06:48 +01:00
parent 7908311561
commit e405c73510
No known key found for this signature in database
GPG Key ID: 302A6725C594817F
7 changed files with 72 additions and 4 deletions

View File

@ -1,5 +1,6 @@
### Change Log for Node-RED Worldmap
- v2.3.5 - Let tracks node handle array of points. Let http icons be rotated to hdg or bearing.
- v2.3.4 - Add bus icon
- v2.3.3 - Fix satellite view max zoom
- v2.3.2 - Add better geojson support - name plus geojson properties

View File

@ -10,6 +10,7 @@ map web page for plotting "things" on.
### Updates
- v2.3.5 - Let tracks node handle array of points. Let http icons be rotated to hdg or bearing.
- v2.3.4 - Add bus icon
- v2.3.3 - Fix satellite view max zoom
- v2.3.2 - Add better geojson support - name plus geojson properties
@ -55,7 +56,7 @@ Optional properties include
- **bearing** : when combined with speed, draws a vector.
- **accuracy** : when combined with bearing, draws a polygon of possible direction.
- **color** : CSS color name or #rrggbb value for bearing line or accuracy polygon
- **icon** : <a href="https://fontawesome.com/v4.7.0/icons/" target="mapinfo">font awesome</a> icon name, <a href="https://github.com/Paul-Reed/weather-icons-lite" target="mapinfo">weather-lite</a> icon, :emoji name:, or http://
- **icon** : <a href="https://fontawesome.com/v4.7.0/icons/" target="mapinfo">font awesome</a> icon name, <a href="https://github.com/Paul-Reed/weather-icons-lite" target="mapinfo">weather-lite</a> icon, :emoji name:, or https://
- **iconColor** : Standard CSS colour name or #rrggbb hex value.
- **SIDC** : NATO symbology code (can be used instead of icon). See below.
- **building** : OSMbulding GeoJSON feature set to add 2.5D buildings to buildings layer. See below.

View File

@ -1,6 +1,6 @@
{
"name": "node-red-contrib-web-worldmap",
"version": "2.3.4",
"version": "2.3.5",
"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

@ -260,7 +260,7 @@ module.exports = function(RED) {
this.layer = n.layer || "combined"; // separate, single
var node = this;
node.on("input", function(msg) {
var doTrack = function(msg) {
if (msg.hasOwnProperty("payload") && msg.payload.hasOwnProperty("name")) {
var newmsg = RED.util.cloneMessage(msg);
if (msg.payload.deleted) {
@ -343,6 +343,13 @@ module.exports = function(RED) {
}
}
}
}
node.on("input", function(m) {
if (Array.isArray(m)) {
m.forEach(item => doTrack(item));
}
else { doTrack(m); }
});
node.on("close", function() {

View File

@ -62,6 +62,7 @@
<script src="leaflet/TileLayer.GrayscaleWMS.js"></script>
<script src="leaflet/L.Terminator.js"></script>
<script src="leaflet/leaflet-velocity.min.js"></script>
<script src="leaflet/leaflet.rotatedMarker.js"></script>
<script src="leaflet/leaflet-side-by-side.js"></script>
<script src="leaflet/OSMBuildings-Leaflet.js"></script>
<script src="leaflet/leaflet-omnivore.min.js"></script>

View File

@ -0,0 +1,57 @@
(function() {
// save these original methods before they are overwritten
var proto_initIcon = L.Marker.prototype._initIcon;
var proto_setPos = L.Marker.prototype._setPos;
var oldIE = (L.DomUtil.TRANSFORM === 'msTransform');
L.Marker.addInitHook(function () {
var iconOptions = this.options.icon && this.options.icon.options;
var iconAnchor = iconOptions && this.options.icon.options.iconAnchor;
if (iconAnchor) {
iconAnchor = (iconAnchor[0] + 'px ' + iconAnchor[1] + 'px');
}
this.options.rotationOrigin = this.options.rotationOrigin || iconAnchor || 'center bottom' ;
this.options.rotationAngle = this.options.rotationAngle || 0;
// Ensure marker keeps rotated during dragging
this.on('drag', function(e) { e.target._applyRotation(); });
});
L.Marker.include({
_initIcon: function() {
proto_initIcon.call(this);
},
_setPos: function (pos) {
proto_setPos.call(this, pos);
this._applyRotation();
},
_applyRotation: function () {
if(this.options.rotationAngle) {
this._icon.style[L.DomUtil.TRANSFORM+'Origin'] = this.options.rotationOrigin;
if(oldIE) {
// for IE 9, use the 2D rotation
this._icon.style[L.DomUtil.TRANSFORM] = 'rotate(' + this.options.rotationAngle + 'deg)';
} else {
// for modern browsers, prefer the 3D accelerated version
this._icon.style[L.DomUtil.TRANSFORM] += ' rotateZ(' + this.options.rotationAngle + 'deg)';
}
}
},
setRotationAngle: function(angle) {
this.options.rotationAngle = angle;
this.update();
return this;
},
setRotationOrigin: function(origin) {
this.options.rotationOrigin = origin;
this.update();
return this;
}
});
})();

View File

@ -1360,7 +1360,8 @@ function setMarker(data) {
iconAnchor: [16, 16],
popupAnchor: [0, -16]
});
marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
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];
}
else if (data.icon.substr(0,3) === "fa-") {