allow GPX, KML icon

This commit is contained in:
Dave Conway-Jones 2018-09-20 22:26:17 +01:00
parent 2313d9703a
commit e3b65979fc
No known key found for this signature in database
GPG Key ID: 9E7F9C73F5168CD4
5 changed files with 61 additions and 25 deletions

View File

@ -1,5 +1,6 @@
### Change Log for Node-RED Worldmap
- v1.4.3 - support custom icon for GPX and KML. Better readme for geojson.
- v1.4.2 - add NVG layer capability
- v1.4.1 - let `msg.payload.popup` set the popup contents.
- v1.4.0 - only send to specific _ sessionid if specified.

View File

@ -9,6 +9,7 @@ map web page for plotting "things" on.
### Updates
- v1.4.3 - support custom icon for GPX and KML. Better readme for geojson.
- v1.4.2 - add NVG layer capability
- v1.4.1 - let `msg.payload.popup` set the popup contents.
- v1.4.0 - only send to specific _ sessionid if specified.
@ -278,17 +279,20 @@ Optional properties include
msg.payload.command.map = {
overlay:"myGeoJSON",
geojson:{ your geojson feature as an object },
opt:{ optional geojson options, style, filter, onEach, Feature, etc },
opt:{ optional geojson options, style, etc },
fit:true
};
The geojson features may contain a `properties` property. That may also include a `style` with properties - stroke, stroke-width, stroke-opacity, fill, fill-opacity. Any other properties will be listed in the popup.
The `opt` property is optional. See the <a href="https://leafletjs.com/examples/geojson/">Leaflet geojson docs</a> for more info on possible options. Note: only simple options are supported as functions cannot be serialised.
The `fit` property is optional. If present 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.
#### To add a new KML, GPX, or TOPOJSON overlay
As per the geojson overlay you can also inject a KML layer or TOPOJSON layer. The syntax is the same but with either a `kml` property - containing the KML string - or a `topojson` property containing the topojson.
As per the geojson overlay you can also inject a KML layer, GPX layer or TOPOJSON layer. The syntax is the same but with either a `kml` property containing the KML string - a `gpx` property containing a GPX string - or a `topojson` property containing the topojson.
msg.payload.command.map = {
overlay:"myKML",
@ -296,9 +300,9 @@ As per the geojson overlay you can also inject a KML layer or TOPOJSON layer. Th
};
For GPX layers, it is possible to define which icon to use for point markers by adding the
For GPX and KML layers, it is possible to define which icon to use for point markers by adding the
following properties to `msg.payload.command.map`:
- **icon** : <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="mapinfo">font awesome</a> icon name.
- **icon** : <a href="https://fontawesome.com/v4.7.0/icons/" target="mapinfo">font awesome</a> icon name.
- **iconColor** : Standard CSS colour name or #rrggbb hex value.
Again the `fit` property can be added to make the map zoom to the relevant area.

View File

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

@ -1239,8 +1239,35 @@ function doCommand(cmd) {
map.removeLayer(overlays[cmd.map.overlay]);
existsalready = true;
}
var opt = cmd.map.opt || {style:function(feature) {return {color:feature.properties.color||feature.properties.roofColor}}};
opt.onEachFeature = function (f, l) {
var opt = cmd.map.opt || { style:function(feature) {
var st = { stroke:true, weight:2, fill:true };
if (feature.hasOwnProperty("properties")) {
st.color = feature.properties.color||feature.properties.roofColor||"black";
if (feature.properties.hasOwnProperty("color")) { delete feature.properties.color; }
if (feature.properties.hasOwnProperty("roofColor")) { delete feature.properties.roofColor; }
}
if (feature.hasOwnProperty("properties") && feature.properties.hasOwnProperty('style')) {
if (feature.properties.style.hasOwnProperty('stroke')) {
st.color = feature.properties.style.stroke;
}
if (feature.properties.style.hasOwnProperty('stroke-width')) {
st.weight = feature.properties.style["stroke-width"];
}
if (feature.properties.style.hasOwnProperty('stroke-opacity')) {
st.opacity = feature.properties.style["stroke-opacity"];
}
if (feature.properties.style.hasOwnProperty('fill')) {
if (feature.properties.style.fill == "none") { st.fill = false; }
else { st.fillColor = feature.properties.style.fill; }
}
if (feature.properties.style.hasOwnProperty('fill-opacity')) {
st.fillOpacity = feature.properties.style["fill-opacity"];
}
}
delete feature.properties.style;
return st;
}};
opt.onEachFeature = function (f,l) {
l.bindPopup('<pre>'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>');
}
overlays[cmd.map.overlay] = L.geoJson(cmd.map.geojson,opt);
@ -1289,6 +1316,25 @@ function doCommand(cmd) {
map.addLayer(overlays[cmd.map.overlay]);
if (cmd.map.hasOwnProperty("fit")) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
}
var custIco = function() {
var customLayer = L.geoJson();
if (cmd.map.hasOwnProperty("icon")) {
var col = cmd.map.iconColor || "#910000";
var myMarker = L.divIcon({
className:"faicon",
html: '<center><i class="fa fa-fw '+cmd.map.icon+'" style="color:'+col+'"></i></center>',
iconSize: [15, 15],
});
customLayer = L.geoJson(null, {
pointToLayer: function(geoJsonPoint, latlng) {
return L.marker(latlng, {icon: myMarker, title: geoJsonPoint.properties.name});
}
});
}
return customLayer;
}
// Add a new KML overlay layer
if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("kml") ) {
if (overlays.hasOwnProperty(cmd.map.overlay)) {
@ -1296,7 +1342,7 @@ function doCommand(cmd) {
existsalready = true;
}
//var opt = {async:true};
overlays[cmd.map.overlay] = omnivore.kml.parse(cmd.map.kml);
overlays[cmd.map.overlay] = omnivore.kml.parse(cmd.map.kml, null, custIco());
if (!existsalready) {
layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
}
@ -1322,22 +1368,7 @@ function doCommand(cmd) {
map.removeLayer(overlays[cmd.map.overlay]);
existsalready = true;
}
var customLayer = L.geoJson();
if (cmd.map.hasOwnProperty("icon")) {
var col = cmd.map.iconColor || "#910000";
var myMarker = L.divIcon({
className:"faicon",
html: '<center><i class="fa fa-fw '+cmd.map.icon+'" style="color:'+col+'"></i></center>',
iconSize: [15, 15],
});
customLayer = L.geoJson(null, {
pointToLayer: function(geoJsonPoint, latlng) {
return L.marker(latlng, {icon: myMarker, title: geoJsonPoint.properties.name});
}
});
}
overlays[cmd.map.overlay] = omnivore.gpx.parse(cmd.map.gpx, null, customLayer);
overlays[cmd.map.overlay] = omnivore.gpx.parse(cmd.map.gpx, null, custIco());
if (!existsalready) {
layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);

View File

@ -1,5 +1,5 @@
CACHE MANIFEST
# date: Sept 10th 2018 - v1.4.2
# date: Sept 20th 2018 - v1.4.3
CACHE:
index.html