dmxm/node-red-contrib-jwht-map
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dave Conway-Jones 2022-01-16 17:25:05 +00:00
parent f5c8132e1e
commit f005ae2f4d
No known key found for this signature in database
GPG Key ID: 88BA2B8A411BE9FF
2 changed files with 227 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
worldmap.js
View File

@ -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}));

43
worldmap/index3d.html
View File

@ -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>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet'/>
<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/v2.6.1/mapbox-gl.css' rel='stylesheet'/>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
@ -17,13 +17,24 @@
<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.
// mapboxgl.accessToken = 'insert your key here';
// var mbstyle = 'mapbox://styles/mapbox/streets-v9';
// TO MAKE THE MAP APPEAR YOU MUST ADD YOUR ACCESS TOKEN FROM https://account.mapbox.com
// This needs to be set as an environment variable MAPBOXGL_TOKEN available to the Node-RED session on your server
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';
var map = new mapboxgl.Map({
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',
style: mbstyle,
center: [-1.3971, 51.0259],
@ -31,13 +42,9 @@ var map = new mapboxgl.Map({
pitch: 40,
bearing: 20,
attributionControl: true
});
var people = {};
map.on('load', function() {
});
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;
if (p.hasOwnProperty("hdg")) {
p.hdg = Number(p.hdg || p.heading);
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>