allow GPX, KML icon
This commit is contained in:
Dave Conway-Jones
parent
2313d9703a
commit
e3b65979fc
@ -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.
|
||||
|
||||
12
README.md
12
README.md
@ -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.
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -1239,7 +1239,34 @@ 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}}};
|
||||
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>');
|
||||
}
|
||||
@ -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);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
CACHE MANIFEST
|
||||
# date: Sept 10th 2018 - v1.4.2
|
||||
# date: Sept 20th 2018 - v1.4.3
|
||||
|
||||
CACHE:
|
||||
index.html
|
||||
|
||||
Loading…
Reference in New Issue
Block a user