Fix 3d stuff to work again... vaguely...

worldmap.js

@@ -54,6 +54,9 @@ module.exports = function(RED) {
         //node.log("Serving "+__dirname+" as "+node.path);
         node.log("started at "+node.path);
         var clients = {};
+        RED.httpNode.get("/-worldmap3d-key",  RED.auth.needsPermission('worldmap3d.read'), function(req, res) {
+            res.send({key:process.env.MAPBOXGL_TOKEN||""});
+        });
         RED.httpNode.use(compression());
         RED.httpNode.use(node.path, express.static(__dirname + '/worldmap'));
         // RED.httpNode.use(node.path, express.static(__dirname + '/worldmap', {maxage:3600000}));

worldmap/index3d.html

@@ -6,8 +6,8 @@
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <script src="leaflet/sockjs.min.js"></script>
-    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script>
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet'/>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet'/>
     <style>
         body { margin:0; padding:0; }
         #map { position:absolute; top:0; bottom:0; width:100%; }
@@ -17,11 +17,22 @@
 <div id='map'></div>
 <script>
 
-// If you have a mapbox API key it may be better to use that - uncomment these lines and comment out the mbstyle below.
+// TO MAKE THE MAP APPEAR YOU MUST ADD YOUR ACCESS TOKEN FROM https://account.mapbox.com
-// mapboxgl.accessToken = 'insert your key here';
+// This needs to be set as an environment variable MAPBOXGL_TOKEN available to the Node-RED session on your server
-// var mbstyle = 'mapbox://styles/mapbox/streets-v9';
+mapboxgl.accessToken = '';
 
-var mbstyle = 'https://data.osmbuildings.org/0.2/anonymous/style.json';
+var people = {};
+var mbstyle = 'mapbox://styles/mapbox/streets-v10';
+// var mbstyle = 'mapbox://styles/mapbox/light-v10';
+
+fetch('/-worldmap3d-key')
+    .then(response => response.json())
+    .then(data => {
+        mapboxgl.accessToken = data.key;
+        if (mapboxgl.accessToken === "") {
+            alert("To make the map appear you must add your Access Token from https://account.mapbox.com by setting the MAPBOXGL_TOKEN environment variable on your server.");
+            return;
+        }
 
         var map = new mapboxgl.Map({
             container: 'map',
@@ -33,11 +44,7 @@ var map = new mapboxgl.Map({
             attributionControl: true
         });
 
-var people = {};
-
-
         map.on('load', function() {
-
             var layers = map.getStyle().layers;
             var firstSymbolId;
             for (var i = 0; i < layers.length; i++) {
@@ -65,7 +72,7 @@ map.on('load', function() {
                         "interpolate", ["linear"], ["zoom"],
                         15, 0, 15.05, ["get", "min_height"]
                     ],
-            'fill-extrusion-opacity': .3
+                    'fill-extrusion-opacity': .4
                 }
             }, firstSymbolId);
 
@@ -199,8 +206,8 @@ map.on('load', function() {
                 //console.log({p},{t},{fac},{base},{tall});
                 var sin = 1;
                 var cos = 0;
-        p.hdg = p.hdg || p.heading;
+                p.hdg = Number(p.hdg || p.heading);
-        if (p.hasOwnProperty("hdg")) {
+                if (p.hasOwnProperty("hdg") && !isNaN(p.hdg)) {
                     sin = Math.sin((90 - p.hdg) * Math.PI / 180);
                     cos = Math.cos((90 - p.hdg) * Math.PI / 180);
                 }
@@ -240,6 +247,10 @@ map.on('load', function() {
             });
 
 });
+
+})
+.catch(error => { console.log("Unable to fetch MAPBOXGL_TOKEN.",error)} );
+
 </script>
 </body>
 </html>