rotate http icons, and let tracks handle arrays
to close #124, to close #125
This commit is contained in:
parent
7908311561
commit
e405c73510
@ -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
|
||||
|
@ -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.
|
||||
|
@ -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",
|
||||
|
@ -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() {
|
||||
|
@ -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>
|
||||
|
57
worldmap/leaflet/leaflet.rotatedMarker.js
Normal file
57
worldmap/leaflet/leaflet.rotatedMarker.js
Normal 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;
|
||||
}
|
||||
});
|
||||
})();
|
@ -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-") {
|
||||
|
Loading…
Reference in New Issue
Block a user