diff --git a/CHANGELOG.md b/CHANGELOG.md index 117936a..bebf3bb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ### Change Log for Node-RED Worldmap + - v2.0.3-beta - Let circles have popups. Better drawing of ellipses - v2.0.2-beta - Let lines and areas also have popups - v2.0.1-beta - Add optional graticule. - v2.0.0-beta - Move to leaflet 1.4.x plus all plugins updated diff --git a/README.md b/README.md index cd0751f..345e46e 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,7 @@ map web page for plotting "things" on. ### Updates +- v2.0.3-beta - Let circles have popups. Better drawing of ellipses - v2.0.2-beta - Let lines and areas also have popups - v2.0.1-beta - Add optional graticule - v2.0.0-beta - Move to leaflet 1.4.x plus all plugins updated @@ -200,7 +201,7 @@ then rather than draw a point and icon it draws the polygon. Likewise if it cont - **clickable** : boolean - set to true to allow click to show popup. - **popup** : html string to display in popup (as well as name). -### Circles +### Circles and Ellipses If the msg.payload contains a **radius** property, as well as name, lat and lon, then rather than draw a point it will draw a circle. The *radius* property is specified in meters. @@ -209,8 +210,11 @@ than draw a point it will draw a circle. The *radius* property is specified in m As per Areas and Lines you may also specify *color*, *fillColor*, and *layer*. -If the payload contains a **sdlat** and **sdlon** property instead of *radius* an ellipse will be drawn. The sdlat and sdlon propertys specify the semi-axes of the ellipse. -These are specified in the Latitude/Longitude format. +If the **radius** property is an array of two numbers, these specify the minor and major radii +of an ellipse, in meters. A **tilt** property can also be applied to rotate the ellipse by +a number of degrees. + + msg.payload = { "name":"Bristol Channel", "lat":51.5, "lon":-2.9, "radius":[30000,70000], "tilt":45 }; ### Options @@ -224,7 +228,7 @@ Areas, Lines and Circles can also specify more optional properties: - fillOpacity - dashArray - clickable - if true sets the passed in name as popup - - popup - extra html string to display as part of popup + - popup - extra html string to display inside the popup ## Drawing diff --git a/package.json b/package.json index 1aa255b..5d2f947 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "node-red-contrib-web-worldmap", - "version": "2.0.2-beta", + "version": "2.0.3-beta", "description": "A Node-RED node to provide a web page of a world map for plotting things on.", "dependencies": { "cgi": "0.3.1", diff --git a/worldmap/index.html b/worldmap/index.html index 9f99127..1fb5891 100644 --- a/worldmap/index.html +++ b/worldmap/index.html @@ -1035,7 +1035,7 @@ function setMarker(data) { if (!data.hasOwnProperty("weight")) { opt.weight = 3; } //Standard settings different for lines if (!data.hasOwnProperty("opacity")) { opt.opacity = 0.8; } var polyln = L.polyline(data.line, opt); - if (opt.clickable) { + if (opt.clickable) { var words = ""+data.name+""; if (data.popup) { var words = words + "
" + data.popup; } polyln.bindPopup(words, {autoClose:false, closeButton:true, closeOnClick:false, minWidth:200}); @@ -1060,13 +1060,10 @@ function setMarker(data) { if (!data.hasOwnProperty("fillColor")) { opt.fillColor = "blue"; } delete opt.clickable; var ellipse = L.ellipse(new L.LatLng((data.lat*1), (data.lon*1)), [200000*data.sdlon*Math.cos(data.lat*Math.PI/180), 200000*data.sdlat], 0, opt); - if (data.clickable != false) { - ellipse.on('click', function(e) { - var popup = L.popup() - .setLatLng(new L.LatLng((data.lat*1), (data.lon*1))) - .setContent('

'+data.name+'
lat : '+data.lat+'
lon : '+data.lon+'

') - .openOn(map); - }); + if (opt.clickable) { + var words = ""+data.name+""; + if (data.popup) { var words = words + "
" + data.popup; } + ellipse.bindPopup(words, {autoClose:false, closeButton:true, closeOnClick:false, minWidth:200}); } polygons[data.name] = ellipse; polygons[data.name].lay = lay; @@ -1075,8 +1072,18 @@ function setMarker(data) { else { if (data.hasOwnProperty("radius")) { if (data.hasOwnProperty("lat") && data.hasOwnProperty("lon")) { - var polycirc = L.circle(new L.LatLng((data.lat*1), (data.lon*1)), data.radius*1, opt); - if (opt.clickable) { polycirc.bindPopup(data.name); } + var polycirc; + if (Array.isArray(data.radius)) { + polycirc = L.ellipse(new L.LatLng((data.lat*1), (data.lon*1)), [data.radius[0]*Math.cos(data.lat*Math.PI/180), data.radius[1]], data.tilt || 0, opt); + } + else { + polycirc = L.circle(new L.LatLng((data.lat*1), (data.lon*1)), data.radius*1, opt); + } + if (opt.clickable) { + var words = ""+data.name+""; + if (data.popup) { var words = words + "
" + data.popup; } + polycirc.bindPopup(words, {autoClose:false, closeButton:true, closeOnClick:false, minWidth:200}); + } polygons[data.name] = polycirc; polygons[data.name].lay = lay; layers[lay].addLayer(polycirc);