node-red-contrib-web-worldmap 4.3.3 → 4.5.0

package/.github/workflows/eslint.yml

@@ -0,0 +1,50 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+# ESLint is a tool for identifying and reporting on patterns
+# found in ECMAScript/JavaScript code.
+# More details at https://github.com/eslint/eslint
+# and https://eslint.org
+
+name: ESLint
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "master" ]
+  schedule:
+    - cron: '38 2 * * 4'
+
+jobs:
+  eslint:
+    name: Run eslint scanning
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      security-events: write
+      actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Install ESLint
+        run: |
+          npm install eslint@8.10.0
+          npm install @microsoft/eslint-formatter-sarif@2.1.7
+
+      - name: Run ESLint
+        run: npx eslint .
+          --config .eslintrc.js
+          --ext .js,.jsx,.ts,.tsx
+          --format @microsoft/eslint-formatter-sarif
+          --output-file eslint-results.sarif
+        continue-on-error: true
+
+      - name: Upload analysis results to GitHub
+        uses: github/codeql-action/upload-sarif@v2
+        with:
+          sarif_file: eslint-results.sarif
+          wait-for-processing: true

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 ### Change Log for Node-RED Worldmap
 
+ - v4.5.0 - Fix pmtiles to look for maps in userdir rather than modules
+ - v4.4.0 - Add quad(copter) drone icon.
  - v4.3.3 - Fix for objects changing layers.
  - v4.3.2 - Fix geojson popup missing label name.
  - v4.3.1 - Small fix to icon transparency, and routing detail.

package/README.md

@@ -13,6 +13,8 @@ Feel free to [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%
 
 ### Updates
 
+- v4.5.0  - Fix pmtiles to look for maps in userdir rather than modules
+- v4.4.0  - Add quad(copter) drone icon.
 - v4.3.3  - Fix for objects changing layers.
 - v4.3.2  - Fix geojson popup missing label name.
 - v4.3.1  - Small fix to icon transparency, and routing detail.
@@ -106,7 +108,8 @@ There are also several special icons...
  - **ship** : a ship icon that aligns with the heading of travel.
  - **car** : a car icon that aligns with the heading of travel.
  - **bus** : a bus/coach icon that aligns with the heading of travel.
- - **uav** : a small uav like icon that aligns with the heading of travel.
+ - **uav** : a small drone uav like icon that aligns with the heading of travel.
+ - **quad** : a small quadcopter uav like icon that aligns with the heading of travel.
  - **helicopter** : a small helicopter icon that aligns with the heading of travel.
  - **sensor** : a camera icon that points to the heading angle.
  - **arrow** : a map GPS arrow type pointer that aligns with the heading of travel.
@@ -718,7 +721,7 @@ You can use a PMtiles format map archive file from [Protomaps](https://docs.prot
 
 **Note**: the whole planet file is over 100GB so be warned both for local storage and your download speed. You can download or extract just a portion of it if you use the **pmtiles** command line with the extract option. Use `pmtiles extract --help` to see the options.
 
-Copy, or create an alias to, your .pmtiles file(s) into your `~/.node-red/node_modules/node-red-contrib-web-worldmap/worldmap/` directory. On re-starting Node-RED the node will detect the file(s) and add them to the base map layer menu, using the file name as the layer name.
+Copy your .pmtiles file(s) into your `~/.node-red` user directory. On re-starting Node-RED the node will detect the file(s) and add them to the base map layer menu, using the file name as the layer name.
 
 ### Using a Docker Map Server
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "4.3.3",
+    "version": "4.5.0",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "@turf/bezier-spline": "~6.5.0",

package/worldmap/worldmap.js

@@ -1845,6 +1845,18 @@ function setMarker(data) {
             });
             marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
         }
+        else if (data.icon === "quad") {
+            data.iconColor = data.iconColor || "black";
+            icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22">';
+            icon+= '<path d="m6 3a3 3 0 0 0 -3 3 3 3 0 0 0 3 3 3 3 0 0 0 1.0859375-.2070312c.5392711.8209481.9140625 1.6424172.9140625 2.2070312 0 .563623-.3724493 1.384498-.9101562 2.205078a3 3 0 0 0 -1.0898438-.205078 3 3 0 0 0 -3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0 -.2050781-1.080078c.8233483-.542436 1.6446221-.919922 2.2050781-.919922.55949 0 1.37815.375313 2.201172.916016a3 3 0 0 0 -.201172 1.083984 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0 -3-3 3 3 0 0 0 -1.085938.207031c-.539273-.820943-.914062-1.642417-.914062-2.207031 0-.563623.372445-1.3844956.910156-2.2050781a3 3 0 0 0 .002.00195 3 3 0 0 0 1.087844.2031281 3 3 0 0 0 3-3 3 3 0 0 0 -3-3 3 3 0 0 0 -3 3 3 3 0 0 0 .205078 1.0800781c-.823351.5424443-1.644622.9199219-2.205078.9199219-.55949 0-1.3781473-.3753084-2.2011719-.9160156a3 3 0 0 0 .2011719-1.0839844 3 3 0 0 0 -3-3zm0 1a2 2 0 0 1 2 2 2 2 0 0 1 -.0527344.453125c-.4577913-.368834-.8926099-.7589139-1.2402344-1.1601562a1 1 0 0 0 -.6933593-.2929688 1 1 0 0 0 -.7207031.2929688 1 1 0 0 0 0 1.4140624 1 1 0 0 0 .058594.054688c.3824613.333788.7551689.7476371 1.1074216 1.1835933a2 2 0 0 1 -.4589844.0546875 2 2 0 0 1 -2-2 2 2 0 0 1 2-2zm10 0a2 2 0 0 1 2 2 2 2 0 0 1 -2 2 2 2 0 0 1 -.457031-.054687c.37051-.4592027.761959-.8951713 1.164062-1.2382813a1 1 0 0 0 0-1.4140624 1 1 0 0 0 -1.414062 0 1 1 0 0 0 -.05274.054687c-.337606.3818392-.750702.7543351-1.185541 1.1054687a2 2 0 0 1 -.054688-.453125 2 2 0 0 1 2-2zm-10 10a2 2 0 0 1 .4570312.05469c-.3705108.459203-.7619484.895165-1.1640624 1.238281a1 1 0 0 0 0 1.414062 1 1 0 0 0 1.4140624 0 1 1 0 0 0 .052734-.05469c.3376223-.381857.7507063-.754333 1.1855473-1.105468a2 2 0 0 1 .0546875.453125 2 2 0 0 1 -2 2 2 2 0 0 1 -2-2 2 2 0 0 1 2-2zm10 0a2 2 0 0 1 2 2 2 2 0 0 1 -2 2 2 2 0 0 1 -2-2 2 2 0 0 1 .05273-.453125c.457792.368835.892604.758903 1.240235 1.160156a1 1 0 0 0 1.414062 0 1 1 0 0 0 0-1.414062c-.01717-.01465-.0336-.03387-.05078-.04883a1 1 0 0 0 -.0078-.0059c-.382475-.333732-.755177-.747602-1.107431-1.183551a2 2 0 0 1 .458984-.054688z" fill="'+data.iconColor+'"/></svg>';
+            var svgquad = "data:image/svg+xml;base64," + btoa(icon);
+            myMarker = L.divIcon({
+                className:"quadicon",
+                iconAnchor: [16, 16],
+                html:'<img src="'+svgquad+'" style="width:32px; height:32px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>',
+            });
+            marker = L.marker(ll, {title:data["name"], icon:myMarker, draggable:drag});
+        }
         else if (data.icon === "car") {
             data.iconColor = data.iconColor || "black";
             icon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="47px" height="47px" viewBox="0 0 47 47">';
@@ -2262,6 +2274,15 @@ function setMarker(data) {
         marker.bindPopup(words, wopt);
         marker._popup.dname = data["name"];
     }
+
+    if (data.hasOwnProperty("clickURL")) {
+        marker.on('click', function () {
+            console.log("Click URL - ",data.clickURL)
+            window.open(data.clickURL.replace('@',''), 'newwindow', 'width=640, height=480');
+            return false;
+        });
+    }
+
     marker.lay = lay;                       // and the layer it is on
 
     // marker.on('click', function(e) {

package/worldmap.html

@@ -1,4 +1,8 @@
 <script type="text/html" data-template-name="worldmap">
+<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>
 <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>
@@ -108,10 +112,6 @@
         <option value="true">Enable</option>
     </select>
 </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>
 <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>
 </script>
@@ -155,6 +155,10 @@ If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>c
 
 
 <script type="text/html" data-template-name="ui_worldmap">
+<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>
 <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">
@@ -274,10 +278,6 @@ If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>c
         <option value="true">Enable</option>
     </select>
 </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>
 <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>
 </script>
@@ -593,6 +593,10 @@ If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>c
 
 
 <script type="text/html" data-template-name="worldmap in">
+    <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>
     <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">
@@ -601,10 +605,6 @@ If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>c
         <label for="node-input-events"><i class="fa fa-sign-out"></i> Events</label>
         <input type="text" id="node-input-events" placeholder="select events">
     </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>
 </script>
 
 <script type="text/html" data-help-name="worldmap in">
@@ -679,6 +679,10 @@ If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>c
 
 
 <script type="text/html" data-template-name="worldmap-tracks">
+    <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>
     <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">
@@ -696,10 +700,6 @@ If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>c
         <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>
-    <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>
 
 <script type="text/html" data-help-name="worldmap-tracks">
@@ -739,14 +739,14 @@ If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>c
 
 
 <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>
+    <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>
 </script>
 
 <script type="text/html" data-help-name="worldmap-hull">

package/worldmap.js

@@ -13,7 +13,8 @@ module.exports = function(RED) {
     if (fs.existsSync((__dirname + '/mapserv'))) {
         RED.httpNode.use("/cgi-bin/mapserv", require('cgi')(__dirname + '/mapserv'));
     }
-    var pmtiles = fs.readdirSync(__dirname + '/worldmap').filter(fn => fn.endsWith('.pmtiles'));
+    //var pmtiles = fs.readdirSync(__dirname + '/worldmap').filter(fn => fn.endsWith('.pmtiles'));
+    var pmtiles = fs.readdirSync(RED.settings.userDir).filter(fn => fn.endsWith('.pmtiles'));
 
     function worldMap(node, n) {
         var allPoints = {};
@@ -121,7 +122,14 @@ module.exports = function(RED) {
                     //console.log("INIT",c)
                     client.write(JSON.stringify({command:c}));
                     for (var p=0; p<pmtiles.length; p++) {
-                        client.write(JSON.stringify({command: {map: {name:pmtiles[p].split('.')[0], pmtiles:pmtiles[p] }}}));
+                        fs.symlink(RED.settings.userDir+'/'+pmtiles[p], __dirname+'/worldmap/'+pmtiles[p], 'file', (err) => {
+                            if (err) {
+                                if (err.code !== "EEXIST") { console.log(err); }
+                            }
+                            else {
+                                client.write(JSON.stringify({command: {map: {name:pmtiles[p].split('.')[0], pmtiles:pmtiles[p] }}}));
+                            }
+                        })
                     }
                     var o = Object.values(allPoints);
                     o.map(v => delete v.tout);