2016-05-19 06:26:08 +08:00
<!DOCTYPE html>
2019-11-03 02:03:43 +08:00
< script type = "text/html" data-template-name = "worldmap" >
2016-06-12 19:40:29 +08:00
< div class = "form-row" >
< table border = "0" width = "96%" >
< tr > < td width = "100px" > < i class = "fa fa-globe" > < / i > Start< td > Latitude< / td > < td > Longitude< / td > < td width = "60px" > Zoom< / td > < / tr >
< tr > < td > < / td >
< td > < input type = "text" id = "node-input-lat" style = "width:90px;" > < / td >
< td > < input type = "text" id = "node-input-lon" style = "width:90px;" > < / td >
< td > < input type = "text" id = "node-input-zoom" style = "width:60px;" placeholder = "1 - 18" > < / td >
< / tr >
< / table >
< / div >
2021-11-03 00:13:47 +08:00
< div class = "form-row" >
< label for = "node-input-maplist" > < i class = "fa fa-list" > < / i > Map list< / label >
< input type = "text" id = "node-input-maplist" placeholder = "List of Maps" >
< / div >
2016-06-12 19:40:29 +08:00
< div class = "form-row" >
< label for = "node-input-layer" > < i class = "fa fa-map" > < / i > Base map< / label >
2021-11-03 00:13:47 +08:00
< input type = "text" id = "node-input-layer" placeholder = "Initial Map" >
2016-06-12 19:40:29 +08:00
< / div >
2021-09-24 23:22:35 +08:00
< div class = "form-row" id = "customMap" >
< label for = "node-input-mapname" > Map name< / label >
< input type = "text" id = "node-input-mapname" placeholder = "name for Layer Menu" > < br / >
< label for = "node-input-mapurl" > Map URL< / label >
< input type = "text" id = "node-input-mapurl" placeholder = "URL" > < br / >
< label for = "node-input-mapopt" > Map options< / label >
< input type = "text" id = "node-input-mapopt" placeholder = "options (Leaflet JSON string)" > < br / >
< label for = "node-input-mapwms" > < / label >
< input type = "checkbox" id = "node-input-mapwms" style = "display:inline-block; width:20px; vertical-align:baseline;" >
Map server uses WMS
< / div >
2021-11-03 00:13:47 +08:00
< div class = "form-row" >
< label for = "node-input-overlist" > < i class = "fa fa-map-o" > < / i > Overlays< / label >
< input type = "text" id = "node-input-overlist" placeholder = "Initial Overlays" >
< / div >
2016-06-15 19:57:31 +08:00
< div class = "form-row" >
2019-04-02 16:13:07 +08:00
< label for = "node-input-cluster" > < i class = "fa fa-dot-circle-o" > < / i > Cluster when< / label >
zoom level is less than < input type = "text" id = "node-input-cluster" placeholder = "0 (0,off - 19)" style = "width:100px;" >
2016-06-15 19:57:31 +08:00
< / div >
< div class = "form-row" >
2016-11-22 16:21:56 +08:00
< label for = "node-input-maxage" > < i class = "fa fa-clock-o" > < / i > Max age< / label >
2019-01-11 19:11:58 +08:00
Remove markers after < input type = "text" id = "node-input-maxage" placeholder = "600" style = "width:67px;" > seconds
2016-11-22 16:21:56 +08:00
< / div >
< div class = "form-row" >
2017-10-11 06:51:18 +08:00
< label for = "node-input-usermenu" > < i class = "fa fa-user" > < / i > User menu< / label >
2020-08-03 20:16:53 +08:00
< select id = "node-input-usermenu" style = "width:70px;" >
2016-11-22 16:21:56 +08:00
< option value = "show" > Show< / option >
< option value = "hide" > Hide< / option >
< / select >
2021-11-03 00:13:47 +08:00
< i class = "fa fa-bars" style = "margin-left:53px;" > < / i > Layer menu
2020-08-03 20:16:53 +08:00
< select id = "node-input-layers" style = "width:70px;" >
2017-10-11 06:51:18 +08:00
< option value = "show" > Show< / option >
< option value = "hide" > Hide< / option >
< / select >
< / div >
2018-12-23 22:30:26 +08:00
< div class = "form-row" >
< label for = "node-input-panlock" > < i class = "fa fa-lock" > < / i > Lock map< / label >
2020-08-03 20:16:53 +08:00
< select id = "node-input-panlock" style = "width:70px;" >
2018-12-23 22:30:26 +08:00
< option value = "false" > False< / option >
< option value = "true" > True< / option >
< / select >
2021-11-03 00:13:47 +08:00
< i class = "fa fa-lock" style = "margin-left:54px;" > < / i > Lock zoom
2020-08-03 20:16:53 +08:00
< select id = "node-input-zoomlock" style = "width:70px;" >
2018-12-23 22:30:26 +08:00
< option value = "false" > False< / option >
< option value = "true" > True< / option >
< / select >
< / div >
2017-10-11 06:51:18 +08:00
< div class = "form-row" >
< label for = "node-input-panit" > < i class = "fa fa-arrows-alt" > < / i > Auto-pan< / label >
2020-08-03 20:16:53 +08:00
< select id = "node-input-panit" style = "width:80px;" >
2019-02-28 06:05:02 +08:00
< option value = "true" > Enable< / option >
< option value = "false" > Disable< / option >
< / select >
2021-11-03 00:13:47 +08:00
< i class = "fa fa-hand-o-right" style = "margin-left:43px;" > < / i > Right click
2020-08-03 20:16:53 +08:00
< select id = "node-input-hiderightclick" style = "width:80px;" >
2019-02-28 06:05:02 +08:00
< option value = "false" > Enable< / option >
< option value = "true" > Disable< / option >
2016-11-22 16:21:56 +08:00
< / select >
2016-06-15 19:57:31 +08:00
< / div >
2019-03-11 02:29:44 +08:00
< div class = "form-row" >
< label for = "node-input-coords" > < i class = "fa fa-compass" > < / i > Co-ordinates< / label >
2021-09-24 23:22:35 +08:00
< select id = "node-input-coords" style = "width:101px;" >
2019-03-11 02:29:44 +08:00
< option value = "none" > Not shown< / option >
< option value = "deg" > Degrees< / option >
< option value = "dms" > D.M.S< / option >
2022-01-24 17:09:14 +08:00
< option value = "utm" > UTM< / option >
< option value = "mgrs" > MGRS< / option >
2022-01-30 01:49:36 +08:00
< option value = "qth" > QTH/Maidenhead< / option >
2019-03-11 02:29:44 +08:00
< / select >
2019-04-22 05:32:01 +08:00
< i class = "fa fa-th" style = "margin-left:22px;" > < / i > Graticule
2021-09-24 23:22:35 +08:00
< select id = "node-input-showgrid" style = "width:101px;" >
2019-04-22 05:32:01 +08:00
< option value = "false" > Not shown< / option >
< option value = "true" > Visible< / option >
< / select >
2019-03-11 02:29:44 +08:00
< / div >
2018-10-13 06:58:20 +08:00
< div class = "form-row" >
< label for = "node-input-path" > < i class = "fa fa-globe" > < / i > Web Path< / label >
2020-12-07 07:53:47 +08:00
< input type = "text" id = "node-input-path" placeholder = "worldmap" style = "width:30%;" >
< i class = "fa fa-hand-paper-o" style = "margin-left:22px;" > < / i > File Drop
< select id = "node-input-allowFileDrop" style = "width:80px;" >
< option value = "false" > Disable< / option >
< option value = "true" > Enable< / option >
< / select >
2018-10-13 06:58:20 +08:00
< / div >
2016-06-12 19:40:29 +08:00
< div class = "form-row" >
< label for = "node-input-name" > < i class = "fa fa-file" > < / i > Name< / label >
< input type = "text" id = "node-input-name" placeholder = "name" >
< / div >
2021-09-24 23:22:35 +08:00
< div class = "form-tips" > Set < i > Cluster when< / i > to 0 to disable clustering of points.< br / >
If < i > Web Path< / i > is left empty, then by default < code > ⌘⇧m< / code > - < code > ctrl-shift-m< / code > will load the map in a new tab.< / div >
2016-04-01 18:31:07 +08:00
< / script >
2019-11-03 02:03:43 +08:00
< script type = "text/html" data-help-name = "worldmap" >
2016-04-01 18:31:07 +08:00
< p > Plots "things" on a web map. Needs an internet connection.< / p >
2018-10-15 23:18:22 +08:00
< p > It is possible to instantiate multiple worldmap nodes but each one must be given a unique
path. Worldmap-in nodes are matched to worldmap nodes by having exactly the same path.
< p > Shortcut - < code > ⌘⇧m< / code > - ctrl-shift-m to jump to the default Map (< tt > /worldmap< / tt > ).< / p >
2016-05-19 06:26:08 +08:00
< p > The minimum < code > msg.payload< / code > must contain < code > name< / code > , < code > lat< / code > and < code > lon< / code > properties, e.g.< / p >
2019-02-17 01:40:28 +08:00
< pre > {"name":"Joe", "lat":51, "lon":-1.05}< / pre >
2016-04-01 18:31:07 +08:00
< p > < code > name< / code > must be a unique identifier.< / p >
< p > Optional properties include< / p >
< ul >
< li > < code > layer< / code > : specify a layer on the map to add marker to.< / li >
2020-12-15 19:02:12 +08:00
< li > < code > heading< / code > : combined with speed, draws a vector.< / li >
< li > < code > speed< / code > : combined with heading, draws a vector.< / li >
< li > < code > accuracy< / code > : combined with heading, draws a polygon of possible direction.< / li >
2019-03-04 16:45:56 +08:00
< li > < code > icon< / code > : < a href = "https://fontawesome.com/v4.7.0/icons/" target = "_new" > font awesome< / a > icon name or < a href = "https://github.com/dceejay/RedMap/blob/master/emojilist.md" target = "_new" > :emoji name:< / a > , or url of icon image.< / li >
2016-04-01 18:31:07 +08:00
< li > < code > iconColor< / code > : standard CSS color name or #rrggbb hex value.< / li >
2018-06-01 05:50:50 +08:00
< li > < code > SIDC< / code > : NATO symbology code (instead of icon).< / li >
2019-03-10 22:23:53 +08:00
< li > < code > label< / code > : permanent label next to marker, or< / li >
< li > < code > tooltip< / code > : hover over text for marker. (alternative to label)< / li >
2018-06-01 05:50:50 +08:00
< li > < code > bulding< / code > : OSMBuildings GeoJSON object.< / li >
2019-02-07 18:58:49 +08:00
< li > < code > ttl< / code > : time to live of an individual marker before deletion.< / li >
2016-06-06 01:37:17 +08:00
< li > < code > photoUrl< / code > : adds an image pointed at by the url to the popup box.< / li >
2018-06-01 05:50:50 +08:00
< li > < code > videoUrl< / code > : adds an mp4 (320x240) pointed at by the url to Popup box< / li >
< li > < code > weblink< / code > : link to an external web page.< / li >
2016-04-01 18:31:07 +08:00
< li > < code > deleted< / code > : set to < i > true< / i > to remove the named marker. (default false)< / li >
< / ul >
2019-03-10 22:23:53 +08:00
< p > Any other sub-properties of < code > msg.payload< / code > will be added to the marker popup text box as extra information.< / p >
2018-06-01 05:50:50 +08:00
< p > Icons of type < i > plane< / i > , < i > ship< / i > , < i > car< / i > , < i > uav< / i > or < i > arrow< / i > will use built in SVG icons that align to the
2016-04-01 18:31:07 +08:00
< code > bearing< / code > value.< / p >
2019-02-12 00:40:34 +08:00
< p > Font Awesome (< a href = "https://fontawesome.com/v4.7.0/icons/" target = "_new" > fa-icons 4.7< / a > ) can also be used, as can
2020-11-19 19:48:54 +08:00
NATO symbology codes (< a href = "https://spatialillusions.com/unitgenerator/" > SIDC< / a > ), or < a href = "https://github.com/dceejay/RedMap/blob/master/emojilist.md" target = "_new" > :emoji name:< / a > ,
2019-03-04 16:45:56 +08:00
or the url of a small icon image (32x32)< / p >
2018-06-01 05:50:50 +08:00
< p > See the < a href = "https://www.npmjs.com/package/node-red-contrib-web-worldmap" target = "_new" > README< / a > for further
details and examples of icons and commands for drawing < b > lines< / b > and < b > areas< / b > , and to < b > add layers< / b > and
to < b > control< / b > the map remotely, including how to use a local map server.< / p >
2016-04-01 18:31:07 +08:00
< / script >
2019-09-02 20:22:38 +08:00
2019-11-03 02:03:43 +08:00
< script type = "text/html" data-template-name = "ui_worldmap" >
2019-09-02 20:22:38 +08:00
< div class = "form-row" id = "template-row-group" >
< label for = "node-input-group" > < i class = "fa fa-table" > < / i > Group< / span > < / label >
< input type = "text" id = "node-input-group" >
< / div >
< div class = "form-row" id = "template-row-size" >
< label > < i class = "fa fa-object-group" > < / i > Size< / span > < / label >
< input type = "hidden" id = "node-input-width" >
< input type = "hidden" id = "node-input-height" >
< button class = "editor-button" id = "node-input-size" > < / button >
< / div >
< div class = "form-row" >
< table border = "0" width = "96%" >
< tr > < td width = "100px" > < i class = "fa fa-globe" > < / i > Start< td > Latitude< / td > < td > Longitude< / td > < td width = "60px" > Zoom< / td > < / tr >
< tr > < td > < / td >
< td > < input type = "text" id = "node-input-lat" style = "width:90px;" > < / td >
< td > < input type = "text" id = "node-input-lon" style = "width:90px;" > < / td >
< td > < input type = "text" id = "node-input-zoom" style = "width:60px;" placeholder = "1 - 18" > < / td >
< / tr >
< / table >
< / div >
2021-11-03 00:13:47 +08:00
< div class = "form-row" >
< label for = "node-input-maplist" > < i class = "fa fa-list" > < / i > Map list< / label >
< input type = "text" id = "node-input-maplist" placeholder = "List of Maps" >
< / div >
2022-03-08 05:04:08 +08:00
< div class = "form-row" id = "node-input-baselayer" >
2019-09-02 20:22:38 +08:00
< label for = "node-input-layer" > < i class = "fa fa-map" > < / i > Base map< / label >
2021-11-03 00:13:47 +08:00
< input type = "text" id = "node-input-layer" placeholder = "Initial Map" >
2019-09-02 20:22:38 +08:00
< / div >
2021-09-24 23:22:35 +08:00
< div class = "form-row" id = "customMap" >
< label for = "node-input-mapname" > Map name< / label >
< input type = "text" id = "node-input-mapname" placeholder = "name for Layer Menu" > < br / >
< label for = "node-input-mapurl" > Map URL< / label >
< input type = "text" id = "node-input-mapurl" placeholder = "URL" > < br / >
< label for = "node-input-mapopt" > Map options< / label >
< input type = "text" id = "node-input-mapopt" placeholder = "options (Leaflet JSON string)" > < br / >
< label for = "node-input-mapwms" > < / label >
< input type = "checkbox" id = "node-input-mapwms" style = "display:inline-block; width:20px; vertical-align:baseline;" >
Map server uses WMS
< / div >
2022-03-08 05:04:08 +08:00
< div class = "form-row" id = "node-input-overlaylist" >
2021-11-03 00:13:47 +08:00
< label for = "node-input-overlist" > < i class = "fa fa-map-o" > < / i > Overlays< / label >
< input type = "text" id = "node-input-overlist" placeholder = "Initial Overlays" >
< / div >
2019-09-02 20:22:38 +08:00
< div class = "form-row" >
< label for = "node-input-cluster" > < i class = "fa fa-dot-circle-o" > < / i > Cluster when< / label >
zoom level is less than < input type = "text" id = "node-input-cluster" placeholder = "0 (0,off - 19)" style = "width:100px;" >
< / div >
< div class = "form-row" >
< label for = "node-input-maxage" > < i class = "fa fa-clock-o" > < / i > Max age< / label >
Remove markers after < input type = "text" id = "node-input-maxage" placeholder = "600" style = "width:67px;" > seconds
< / div >
< div class = "form-row" >
< label for = "node-input-usermenu" > < i class = "fa fa-user" > < / i > User menu< / label >
2020-08-03 20:16:53 +08:00
< select id = "node-input-usermenu" style = "width:70px;" >
2019-09-02 20:22:38 +08:00
< option value = "show" > Show< / option >
< option value = "hide" > Hide< / option >
< / select >
2021-11-03 00:13:47 +08:00
< i class = "fa fa-bars" style = "margin-left:53px;" > < / i > Layer menu
2020-08-03 20:16:53 +08:00
< select id = "node-input-layers" style = "width:70px;" >
2019-09-02 20:22:38 +08:00
< option value = "show" > Show< / option >
< option value = "hide" > Hide< / option >
< / select >
< / div >
< div class = "form-row" >
< label for = "node-input-panlock" > < i class = "fa fa-lock" > < / i > Lock map< / label >
2020-08-03 20:16:53 +08:00
< select id = "node-input-panlock" style = "width:70px;" >
2019-09-02 20:22:38 +08:00
< option value = "false" > False< / option >
< option value = "true" > True< / option >
< / select >
2021-11-03 00:13:47 +08:00
< i class = "fa fa-lock" style = "margin-left:54px;" > < / i > Lock zoom
2020-08-03 20:16:53 +08:00
< select id = "node-input-zoomlock" style = "width:70px;" >
2019-09-02 20:22:38 +08:00
< option value = "false" > False< / option >
< option value = "true" > True< / option >
< / select >
< / div >
< div class = "form-row" >
< label for = "node-input-panit" > < i class = "fa fa-arrows-alt" > < / i > Auto-pan< / label >
2020-08-03 20:16:53 +08:00
< select id = "node-input-panit" style = "width:80px;" >
2019-09-02 20:22:38 +08:00
< option value = "true" > Enable< / option >
< option value = "false" > Disable< / option >
< / select >
2021-11-03 00:13:47 +08:00
< i class = "fa fa-hand-o-right" style = "margin-left:43px;" > < / i > Right click
2020-08-03 20:16:53 +08:00
< select id = "node-input-hiderightclick" style = "width:80px;" >
2019-09-02 20:22:38 +08:00
< option value = "false" > Enable< / option >
< option value = "true" > Disable< / option >
< / select >
< / div >
< div class = "form-row" >
< label for = "node-input-coords" > < i class = "fa fa-compass" > < / i > Co-ordinates< / label >
2021-09-24 23:22:35 +08:00
< select id = "node-input-coords" style = "width:101px;" >
2019-09-02 20:22:38 +08:00
< option value = "none" > Not shown< / option >
< option value = "deg" > Degrees< / option >
< option value = "dms" > D.M.S< / option >
2022-01-24 17:09:14 +08:00
< option value = "utm" > UTM< / option >
< option value = "mgrs" > MGRS< / option >
2022-01-30 01:49:36 +08:00
< option value = "gth" > QTH/Maidenhead< / option >
2019-09-02 20:22:38 +08:00
< / select >
< i class = "fa fa-th" style = "margin-left:22px;" > < / i > Graticule
2021-09-24 23:22:35 +08:00
< select id = "node-input-showgrid" style = "width:101px;" >
2019-09-02 20:22:38 +08:00
< option value = "false" > Not shown< / option >
< option value = "true" > Visible< / option >
< / select >
< / div >
< div class = "form-row" >
< label for = "node-input-path" > < i class = "fa fa-globe" > < / i > Web Path< / label >
2020-12-07 07:53:47 +08:00
< input type = "text" id = "node-input-path" placeholder = "worldmap" style = "width:30%;" >
< i class = "fa fa-hand-paper-o" style = "margin-left:22px;" > < / i > File Drop
< select id = "node-input-allowFileDrop" style = "width:80px;" >
< option value = "false" > Disable< / option >
< option value = "true" > Enable< / option >
< / select >
2019-09-02 20:22:38 +08:00
< / div >
< div class = "form-row" >
< label for = "node-input-name" > < i class = "fa fa-file" > < / i > Name< / label >
< input type = "text" id = "node-input-name" placeholder = "name" >
< / div >
2021-09-24 23:22:35 +08:00
< div class = "form-tips" > Set < i > Cluster when< / i > to 0 to disable clustering of points.< br / >
If < i > Web Path< / i > is left empty, then by default < code > ⌘⇧m< / code > - < code > ctrl-shift-m< / code > will load the map in a new tab.< / div >
2019-09-02 20:22:38 +08:00
< / script >
2019-11-03 02:03:43 +08:00
< script type = "text/html" data-help-name = "ui_worldmap" >
2019-09-02 20:22:38 +08:00
< p > Plots "things" on a map in Node-RED Dashboard. Needs an internet connection.< / p >
< p > It is possible to instantiate multiple worldmap nodes but each one must be given a unique
path. Worldmap-in nodes are matched to worldmap nodes by having exactly the same path.
< p > Shortcut - < code > ⌘⇧m< / code > - ctrl-shift-m to jump to the default Map (< tt > /worldmap< / tt > ).< / p >
< p > The minimum < code > msg.payload< / code > must contain < code > name< / code > , < code > lat< / code > and < code > lon< / code > properties, e.g.< / p >
< pre > {"name":"Joe", "lat":51, "lon":-1.05}< / pre >
< p > < code > name< / code > must be a unique identifier.< / p >
< p > Optional properties include< / p >
< ul >
< li > < code > layer< / code > : specify a layer on the map to add marker to.< / li >
< li > < code > speed< / code > : combined with bearing, draws a vector.< / li >
< li > < code > bearing< / code > : combined with speed, draws a vector.< / li >
< li > < code > accuracy< / code > : combined with bearing, draws a polygon of possible direction.< / li >
< li > < code > icon< / code > : < a href = "https://fontawesome.com/v4.7.0/icons/" target = "_new" > font awesome< / a > icon name or < a href = "https://github.com/dceejay/RedMap/blob/master/emojilist.md" target = "_new" > :emoji name:< / a > , or url of icon image.< / li >
< li > < code > iconColor< / code > : standard CSS color name or #rrggbb hex value.< / li >
< li > < code > SIDC< / code > : NATO symbology code (instead of icon).< / li >
< li > < code > label< / code > : permanent label next to marker, or< / li >
< li > < code > tooltip< / code > : hover over text for marker. (alternative to label)< / li >
< li > < code > bulding< / code > : OSMBuildings GeoJSON object.< / li >
< li > < code > ttl< / code > : time to live of an individual marker before deletion.< / li >
< li > < code > photoUrl< / code > : adds an image pointed at by the url to the popup box.< / li >
< li > < code > videoUrl< / code > : adds an mp4 (320x240) pointed at by the url to Popup box< / li >
< li > < code > weblink< / code > : link to an external web page.< / li >
< li > < code > deleted< / code > : set to < i > true< / i > to remove the named marker. (default false)< / li >
< / ul >
< p > Any other sub-properties of < code > msg.payload< / code > will be added to the marker popup text box as extra information.< / p >
< p > Icons of type < i > plane< / i > , < i > ship< / i > , < i > car< / i > , < i > uav< / i > or < i > arrow< / i > will use built in SVG icons that align to the
< code > bearing< / code > value.< / p >
< p > Font Awesome (< a href = "https://fontawesome.com/v4.7.0/icons/" target = "_new" > fa-icons 4.7< / a > ) can also be used, as can
2021-11-03 23:13:51 +08:00
NATO symbology codes (< a href = "https://spatialillusions.com/unitgenerator/" > SIDC< / a > ), or < a href = "https://github.com/dceejay/RedMap/blob/master/emojilist.md" target = "_new" > :emoji name:< / a > ,
2019-09-02 20:22:38 +08:00
or the url of a small icon image (32x32)< / p >
< p > See the < a href = "https://www.npmjs.com/package/node-red-contrib-web-worldmap" target = "_new" > README< / a > for further
details and examples of icons and commands for drawing < b > lines< / b > and < b > areas< / b > , and to < b > add layers< / b > and
to < b > control< / b > the map remotely, including how to use a local map server.< / p >
< / script >
2016-04-01 18:31:07 +08:00
< script type = "text/javascript" >
2021-11-03 00:13:47 +08:00
var mlist = [
{ value: "OSMG", label: "OpenStreetMap Greyscale" },
{ value: "OSMC", label: "OpenStreetMap" },
{ value: "OSMH", label: "OpenStreetMap Humanitarian" },
{ value: "EsriC", label: "ESRI Streetmap" },
{ value: "EsriS", label: "ESRI Satellite" },
{ value: "EsriT", label: "ESRI Topography" },
{ value: "EsriO", label: "ESRI Ocean" },
{ value: "EsriDG", label: "ESRI Dark Grey" },
{ value: "NatGeo", label: "National Geographic" },
{ value: "UKOS", label: "UK OS Opendata" },
{ value: "OS45", label: "UK OS 1919-47" },
{ value: "OS00", label: "UK OS 1900" },
{ value: "OpTop", label: "Open Topo Map" },
{ value: "HB", label: "Hike Bike OSM" },
{ value: "AN", label: "Autonavi (Chinese)" },
{ value: "ST", label: "Stamen Terrain" },
{ value: "SW", label: "Stamen Watercolor" }
]
var olist = [
{ value: "DR", label: "Drawing" },
{ value: "CO", label: "Countries" },
{ value: "RA", label: "Rainfall" },
{ value: "DN", label: "Day/Night" },
{ value: "BU", label: "Buildings" },
{ value: "RW", label: "Railways" },
{ value: "SN", label: "Ship Navigation" },
{ value: "AC", label: "Air Corridors" },
{ value: "TL", label: "Place Labels" },
{ value: "HM", label: "Heatmap" }
]
2017-04-20 20:44:19 +08:00
var lnk = document.location.host+RED.settings.httpNodeRoot+"/worldmap";
2018-10-13 06:58:20 +08:00
lnk = lnk.replace(new RegExp('\/{1,}','g'),'/');
2017-04-20 20:44:19 +08:00
if (!RED.hasOwnProperty("actions")) {
RED.keyboard.add("*",/* m */ 77,{ctrl:true, shift:true},function() { window.open(document.location.protocol+"//"+lnk) });
}
else {
RED.actions.add("Show Map",function() { window.open(document.location.protocol+"//"+lnk) });
2020-11-16 17:13:30 +08:00
RED.keyboard.add("*","ctrl-shift-m","Show Map");
2017-04-20 20:44:19 +08:00
}
2016-04-01 18:31:07 +08:00
RED.nodes.registerType('worldmap',{
category: 'location',
color:"darksalmon",
defaults: {
2016-11-22 16:21:56 +08:00
name: {value:""},
2016-06-12 19:40:29 +08:00
lat: {value:""},
lon: {value:""},
zoom: {value:""},
layer: {value:""},
2016-06-15 19:57:31 +08:00
cluster: {value:""},
maxage: {value:""},
2016-11-22 16:21:56 +08:00
usermenu: {value:"show"},
2017-10-11 06:51:18 +08:00
layers: {value:"show"},
2018-10-13 06:58:20 +08:00
panit: {value:"false"},
2018-12-23 22:30:26 +08:00
panlock: {value:"false"},
zoomlock: {value:"false"},
2019-02-28 06:05:02 +08:00
hiderightclick: {value:"false"},
2019-04-22 05:32:01 +08:00
coords: {value:"false"},
showgrid: {value:"false"},
2020-12-07 07:53:47 +08:00
allowFileDrop: {value:"false"},
2021-09-24 23:22:35 +08:00
path: {value:"/worldmap"},
2021-11-03 00:13:47 +08:00
overlist: {value:"DR,CO,RA,DN,HM"},
2022-03-08 05:04:08 +08:00
maplist: {value:"OSMG,OSMC,EsriC,EsriS,EsriT,EsriDG,UKOS"},
2021-09-24 23:22:35 +08:00
mapname: {value:""},
mapurl: {value:""},
mapopt: {value:"", validate:function(v) {try{ v.length===0 || JSON.parse(v); return true;} catch(e) {return false;}}},
mapwms: {value:false}
2016-04-01 18:31:07 +08:00
},
2016-05-19 06:26:08 +08:00
inputs:1,
2016-04-01 18:31:07 +08:00
outputs:0,
icon: "white-globe.png",
align: "right",
label: function() {
2019-02-05 23:01:45 +08:00
return this.name||(this.path.charAt(0)==='/'?this.path.substr(1):this.path)||"world map";
2016-04-01 18:31:07 +08:00
},
labelStyle: function() {
return this.name?"node_label_italic":"";
},
info: function() {
2018-10-13 06:58:20 +08:00
return 'The map can be found [here]('+RED.settings.httpNodeRoot.slice(0,-1)+this.path+').';
2016-06-15 19:57:31 +08:00
},
oneditprepare: function() {
2021-12-17 05:45:21 +08:00
var mshort;
2021-11-03 00:13:47 +08:00
if (this.maplist === undefined) {
2022-03-08 05:04:08 +08:00
$("#node-input-maplist").val("OSMG,OSMC,EsriC,EsriS,EsriT,EsriO,EsriDG,NatGeo,UKOS,OpTop");
this.maplist = "OSMG,OSMC,EsriC,EsriS,EsriT,EsriO,EsriDG,NatGeo,UKOS,OpTop";
2021-11-03 00:13:47 +08:00
}
if (this.overlist === undefined) {
$("#node-input-overlist").val("DR,CO,RA,DN,HM");
this.overlist = "DR,CO,RA,DN,HM";
}
$("#node-input-maplist").typedInput({type:"mapitem", types:[{
value: "mapitem",
multiple: true,
options: mlist
}]});
$("#node-input-layer").typedInput({type:"laye", types:[{
value: "laye",
2021-12-17 05:45:21 +08:00
options: mshort
2021-11-03 00:13:47 +08:00
}]});
$("#node-input-overlist").typedInput({type:"overlay", types:[{
value: "overlay",
multiple: true,
options: olist
}]});
$("#node-input-maplist").on('change', function(event, type, value) {
2021-12-17 05:45:21 +08:00
mshort = mlist.filter(e => value.indexOf(e.value)!==-1);
2021-11-03 00:13:47 +08:00
mshort.push({ value:"Custom", label:"Custom Map Provider" });
$("#node-input-layer").typedInput("types", [{
value: "laye",
options: mshort
}]);
});
2018-10-13 06:58:20 +08:00
if ($("#node-input-path").val() === undefined) {
$("#node-input-path").val("worldmap");
this.path = "worldmap";
}
2019-02-28 06:05:02 +08:00
if ($("#node-input-hiderightclick").val() === null) {
$("#node-input-hiderightclick").val("false");
this.hiderightclick = "false";
2019-09-02 20:22:38 +08:00
}
if ($("#node-input-coords").val() === null) {
$("#node-input-coords").val("none");
this.coords = "none";
}
$("#node-input-zoom").spinner({min:0, max:18});
$("#node-input-cluster").spinner({min:0, max:19});
2021-09-24 23:22:35 +08:00
$("#node-input-layer").on("change",function() {
if ($("#node-input-layer").val() === "Custom") {
$("#customMap").show();
} else {
$("#customMap").hide();
}
});
2019-09-02 20:22:38 +08:00
}
});
2021-12-30 20:29:05 +08:00
$.get('-ui-worldmap', function (data) {
2019-09-05 05:13:01 +08:00
if (data === "true") {
RED.nodes.registerType('ui_worldmap',{
category: 'dashboard',
2019-10-19 06:52:18 +08:00
color: '#38989f',
2019-09-05 05:13:01 +08:00
defaults: {
group: {type: 'ui_group', required:true},
order: {value: 0},
width: {
value: 0,
validate: function(v) {
var valid = true
var width = v||0;
var currentGroup = $('#node-input-group').val()|| this.group;
var groupNode = RED.nodes.node(currentGroup);
valid = !groupNode || +width < = +groupNode.width;
$("#node-input-size").toggleClass("input-error",!valid);
return valid;
}},
height: {value: 0},
name: {value:""},
lat: {value:""},
lon: {value:""},
zoom: {value:""},
layer: {value:""},
cluster: {value:""},
maxage: {value:""},
usermenu: {value:"hide"},
layers: {value:"hide"},
panit: {value:"false"},
panlock: {value:"false"},
zoomlock: {value:"false"},
hiderightclick: {value:"true"},
coords: {value:"false"},
showgrid: {value:"false"},
2020-12-07 07:53:47 +08:00
allowFileDrop: {value:"false"},
2021-09-24 23:22:35 +08:00
path: {value:"/worldmap"},
2021-11-03 00:13:47 +08:00
overlist: {value:"DR,CO,RA,DN,HM"},
2022-03-08 05:04:08 +08:00
maplist: {value:"OSMG,OSMC,EsriC,EsriS,EsriT,EsriDG,UKOS"},
2021-09-24 23:22:35 +08:00
mapname: {value:""},
mapurl: {value:""},
mapopt: {value:""},
mapwms: {value:false}
2019-09-05 05:13:01 +08:00
},
inputs:1,
outputs:0,
icon: "white-globe.png",
align: "right",
paletteLabel: "worldmap",
label: function() {
return this.name||(this.path.charAt(0)==='/'?this.path.substr(1):this.path)||"world map";
},
labelStyle: function() {
return this.name?"node_label_italic":"";
},
oneditprepare: function() {
2021-12-17 05:45:21 +08:00
var mshort;
2021-11-03 00:13:47 +08:00
if (this.maplist === undefined) {
2022-03-08 05:04:08 +08:00
$("#node-input-maplist").val("OSMG,OSMC,EsriC,EsriS,EsriT,EsriO,EsriDG,NatGeo,UKOS,OpTop");
this.maplist = "OSMG,OSMC,EsriC,EsriS,EsriT,EsriO,EsriDG,NatGeo,UKOS,OpTop";
2021-11-03 00:13:47 +08:00
}
if (this.overlist === undefined) {
$("#node-input-overlist").val("DR,CO,RA,DN,HM");
this.overlist = "DR,CO,RA,DN,HM";
}
$("#node-input-maplist").typedInput({type:"mapitem", types:[{
value: "mapitem",
multiple: true,
2022-03-08 05:04:08 +08:00
options: mlist.concat([{ value:"MB3d", label:"Mapbox 3D" }])
2021-11-03 00:13:47 +08:00
}]});
$("#node-input-layer").typedInput({type:"laye", types:[{
value: "laye",
2021-12-17 05:45:21 +08:00
options: mshort
2021-11-03 00:13:47 +08:00
}]});
$("#node-input-overlist").typedInput({type:"overlay", types:[{
value: "overlay",
multiple: true,
options: olist
}]});
$("#node-input-maplist").on('change', function(event, type, value) {
2022-03-08 05:04:08 +08:00
if (value.indexOf("MB3d") > -1) {
mshort = [{ value:"MB3d", label:"Mapbox 3D" }];
$('#node-input-maplist option').prop('selected', false);
$("#node-input-maplist").val("MB3d");
this.maplist = "MB3d";
$("#node-input-baselayer").hide();
$("#node-input-overlaylist").hide();
}
else {
$("#node-input-baselayer").show();
$("#node-input-overlaylist").show();
mshort = mlist.filter(e => value.indexOf(e.value)!==-1);
mshort.push({ value:"Custom", label:"Custom Map Provider" });
}
2021-11-03 00:13:47 +08:00
$("#node-input-layer").typedInput("types", [{
value: "laye",
options: mshort
}]);
});
2019-09-05 05:13:01 +08:00
$("#node-input-size").elementSizer({
width: "#node-input-width",
height: "#node-input-height",
group: "#node-input-group"
});
if ($("#node-input-path").val() === undefined) {
$("#node-input-path").val("worldmap");
this.path = "worldmap";
}
if ($("#node-input-hiderightclick").val() === null) {
$("#node-input-hiderightclick").val("false");
this.hiderightclick = "false";
}
if ($("#node-input-coords").val() === null) {
$("#node-input-coords").val("none");
this.coords = "none";
}
$("#node-input-zoom").spinner({min:0, max:18});
$("#node-input-cluster").spinner({min:0, max:19});
2021-09-24 23:22:35 +08:00
$("#node-input-layer").on("change",function() {
if ($("#node-input-layer").val() === "Custom") {
$("#customMap").show();
} else {
$("#customMap").hide();
}
});
2019-09-05 05:13:01 +08:00
}
2019-09-02 20:22:38 +08:00
});
2019-09-05 05:13:01 +08:00
}
else {
2019-09-05 05:29:53 +08:00
console.log("ui_worldmap: Node-RED-Dashboard not found.");
2016-04-01 18:31:07 +08:00
}
});
< / script >
2016-05-19 06:26:08 +08:00
2021-11-03 00:13:47 +08:00
2019-11-03 02:03:43 +08:00
< script type = "text/html" data-template-name = "worldmap in" >
2018-10-13 06:58:20 +08:00
< div class = "form-row" >
< label for = "node-input-path" > < i class = "fa fa-globe" > < / i > Web Path< / label >
< input type = "text" id = "node-input-path" placeholder = "worldmap" >
< / div >
2019-09-02 22:08:34 +08:00
< div class = "form-row" >
2021-11-03 00:13:47 +08:00
< label for = "node-input-events" > < i class = "fa fa-sign-out" > < / i > Events< / label >
< input type = "text" id = "node-input-events" placeholder = "select events" >
2019-09-02 22:08:34 +08:00
< / div >
2016-05-19 06:26:08 +08:00
< div class = "form-row" >
< label for = "node-input-name" > < i class = "fa fa-file" > < / i > Name< / label >
< input type = "text" id = "node-input-name" placeholder = "name" >
< / div >
< / script >
2019-11-03 02:03:43 +08:00
< script type = "text/html" data-help-name = "worldmap in" >
2019-02-17 01:40:28 +08:00
< p > Receives actions from a worldmap web page.< / p >
< p > Actions include
< ul > < li > < b > connected< / b > - when a new client connects
2019-02-17 01:58:41 +08:00
< li > < b > disconnect< / b > - when a client disconnects
2019-02-17 01:40:28 +08:00
< li > < b > click< / b > - when a marker is clicked< / li >
< li > < b > move< / b > - when a marker is dragged/moved< / li >
2019-02-17 17:40:26 +08:00
< li > < b > delete< / b > - when a point or shape is deleted< / li >
2019-02-17 01:40:28 +08:00
< li > < b > point< / b > - when a point is added manually using right-click< / li >
< li > < b > draw< / b > - when a shape is added manually to the drawing layer< / li >
< li > < b > layer< / b > - when a base layer is changed< / li >
< li > < b > addlayer< / b > - when an overlay is added to the map< / li >
< li > < b > dellayer< / b > - when an overlay is removed from the map< / li >
2019-03-10 22:23:53 +08:00
< li > < b > feedback< / b > - when a user calls the feedback() function in the browser< / li >
2019-02-17 01:40:28 +08:00
< / ul >
2019-02-17 01:58:41 +08:00
Use the debug node to see the complete payload of the msg returned.< / p >
< p > All actions also include a < code > msg._sessionid< / code > property that indicates which client session the
action came from. Any outgoing msg that includes this property will only go back to that session.< / p >
< p > Further information can be found in the
< a href = "https://github.com/dceejay/RedMap/blob/master/README.md#events-from-the-map" target = "_new" > Events section< / a >
2019-02-17 01:40:28 +08:00
of the README.< / p >
2016-05-19 06:26:08 +08:00
< / script >
< script type = "text/javascript" >
RED.nodes.registerType('worldmap in',{
category: 'location',
color:"darksalmon",
defaults: {
2018-10-13 06:58:20 +08:00
name: {value:""},
2019-09-02 22:08:34 +08:00
path: {value:"/worldmap"},
2021-11-26 20:47:41 +08:00
events: {value:"connect,disconnect,point,layer,bounds,files,draw,other"}
2016-05-19 06:26:08 +08:00
},
inputs:0,
outputs:1,
icon: "white-globe.png",
label: function() {
2018-11-17 20:10:46 +08:00
return this.name||this.path.substr(1)||"world map";
2016-05-19 06:26:08 +08:00
},
labelStyle: function() {
return this.name?"node_label_italic":"";
},
info: function() {
2018-10-13 06:58:20 +08:00
return 'The map can be found [here]('+RED.settings.httpNodeRoot.slice(0,-1)+this.path+').';
2021-11-03 00:13:47 +08:00
},
oneditprepare: function() {
if ($("#node-input-events").val() === "all") {
2021-11-26 20:47:41 +08:00
$("#node-input-events").val("connect,disconnect,point,layer,bounds,files,draw,other");
2021-11-03 00:13:47 +08:00
}
$("#node-input-events").typedInput({type:"event", types:[{
value: "event",
multiple: true,
options: [
{ value: "connect", label: "Connect"},
{ value: "disconnect", label: "Disconnect"},
{ value: "point", label: "Add, move, delete point"},
2021-11-26 20:47:41 +08:00
{ value: "layer", label: "Add, remove layers"},
2021-11-03 00:13:47 +08:00
{ value: "bounds", label: "Boundary change"},
{ value: "files", label: "File drop"},
{ value: "draw", label: "Drawing"},
{ value: "other", label: "All other"}
]
}]});
$("#node-input-events").on('change', function(event, type, value) {
this.events = value;
});
2016-05-19 06:26:08 +08:00
}
});
< / script >
2017-05-15 20:55:22 +08:00
2019-11-03 02:03:43 +08:00
< script type = "text/html" data-template-name = "worldmap-tracks" >
2020-07-10 05:09:57 +08:00
< div class = "form-row" >
< label for = "node-input-depth" > < i class = "fa fa-map-marker" > < / i > Number of< / label >
points in track < input type = "text" id = "node-input-depth" style = "width:50%" placeholder = "number - default 20" >
< / div >
< div class = "form-row" >
< label for = "node-input-layer" > < i class = "fa fa-map" > < / i > Track Layer< / label >
< select id = "node-input-layer" >
< option value = "combined" > on marker layer< / option >
< option value = "separate" > one per marker layer< / option >
< option value = "single" > single Track layer< / option >
< / select >
< / div >
2021-03-15 21:26:02 +08:00
< div class = "form-row" >
< label > < / label >
< input type = "checkbox" id = "node-input-smooth" style = "display:inline-block; width:auto; vertical-align:top;" >
< label for = "node-input-smooth" style = "width:70%;" > Smooth tracks using bezier curves.< / label >
< / div >
2020-07-10 05:09:57 +08:00
< div class = "form-row" >
< label for = "node-input-name" > < i class = "fa fa-file" > < / i > Name< / label >
< input type = "text" id = "node-input-name" placeholder = "name" >
< / div >
2021-11-03 00:13:47 +08:00
< / script >
2020-11-16 17:13:30 +08:00
2021-11-03 00:13:47 +08:00
< script type = "text/html" data-help-name = "worldmap-tracks" >
< p > Creates tracks lines based on a specified number of previous locations.< / p >
< p > The number of tracked points can be set per marker by specifying < code > msg.payload.trackpoints< / code > as part of the update for a marker.< / p >
< p > You can also specify the msg.payload.color, weight, opacity and dashArray properties for the track if required.< / p >
< p > Holds all the points in memory, so if you have a lot of points held for a
large depth then memory usage may become excessive.< / p >
< p > To delete a track send a msg.payload containing both the name of the object and
set deleted to true - for example < code > msg.payload = { "name":"Fred", "deleted":true }< / code > .< / p >
< p > This will also delete the point. If you just want to clear the track set the msg.payload to the
name+"_", for example < code > msg.payload = { "name":"Fred_", "deleted":true }< / code > < / p >
< / script >
2020-11-16 17:13:30 +08:00
2021-11-03 00:13:47 +08:00
< script type = "text/javascript" >
RED.nodes.registerType('worldmap-tracks',{
category: 'location',
color:"darksalmon",
defaults: {
name: {value:""},
depth: {value:20},
layer: {value:"combined"},
smooth: {value:false}
},
inputs:1,
outputs:1,
icon: "white-globe.png",
paletteLabel: "tracks",
label: function() {
return this.name||"tracks";
},
labelStyle: function() {
return this.name?"node_label_italic":"";
}
});
< / script >
2017-05-15 20:55:22 +08:00
2020-07-10 05:09:57 +08:00
< script type = "text/html" data-template-name = "worldmap-hull" >
< div class = "form-row" >
< label for = "node-input-prop" > < i class = "fa fa-ellipsis-h" > < / i > Property< / label >
< input type = "text" id = "node-input-prop" placeholder = "payload property to group" >
< / div >
< div class = "form-row" >
< label for = "node-input-name" > < i class = "fa fa-file" > < / i > Name< / label >
< input type = "text" id = "node-input-name" placeholder = "name" >
< / div >
2021-11-03 00:13:47 +08:00
< / script >
2020-11-16 17:13:30 +08:00
2021-11-03 00:13:47 +08:00
< script type = "text/html" data-help-name = "worldmap-hull" >
< p > Creates a convex-hull polygon around a set of supplied points.< / p >
< p > Points can be made part of the same shape if they have the same < code > msg.payload.layer< / code >
by default - this can be configured to another msg.payload property if desired.< / p >
< p > < b > Note< / b > : the outgoing msg only contains the polygon to draw, so this node should be wired
in parallel to other paths going to the worldmap node.< / p >
< / script >
2020-11-16 17:13:30 +08:00
2021-11-03 00:13:47 +08:00
< script type = "text/javascript" >
RED.nodes.registerType('worldmap-hull',{
category: 'location',
color:"darksalmon",
defaults: {
name: {value:""},
prop: {value:"layer",required:true}
},
inputs:1,
outputs:1,
icon: "white-globe.png",
paletteLabel: "convex-hull",
label: function() {
return this.name||"convex-hull";
},
labelStyle: function() {
return this.name?"node_label_italic":"";
}
});
< / script >
