Add 3d view to dashboard node, better key handling/errors
This commit is contained in:
Dave Conway-Jones
parent
0f61825466
commit
70bc32d049
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "node-red-contrib-web-worldmap",
|
||||
"version": "2.27.3",
|
||||
"version": "2.28.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",
|
||||
|
||||
@ -173,7 +173,7 @@ If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>c
|
||||
<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>
|
||||
<div class="form-row">
|
||||
<div class="form-row" id="node-input-baselayer">
|
||||
<label for="node-input-layer"><i class="fa fa-map"></i> Base map</label>
|
||||
<input type="text" id="node-input-layer" placeholder="Initial Map">
|
||||
</div>
|
||||
@ -188,7 +188,7 @@ If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>c
|
||||
<input type="checkbox" id="node-input-mapwms" style="display:inline-block; width:20px; vertical-align:baseline;">
|
||||
Map server uses WMS
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-row" id="node-input-overlaylist">
|
||||
<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>
|
||||
@ -369,7 +369,7 @@ If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>c
|
||||
allowFileDrop: {value:"false"},
|
||||
path: {value:"/worldmap"},
|
||||
overlist: {value:"DR,CO,RA,DN,HM"},
|
||||
maplist: {value:"OSMG,OSMC,EsriC,EsriS,EsriT,EsriDG,UKOS,SW"},
|
||||
maplist: {value:"OSMG,OSMC,EsriC,EsriS,EsriT,EsriDG,UKOS"},
|
||||
mapname: {value:""},
|
||||
mapurl: {value:""},
|
||||
mapopt: {value:"", validate:function(v) {try{ v.length===0 || JSON.parse(v); return true;} catch(e) {return false;}}},
|
||||
@ -391,8 +391,8 @@ If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>c
|
||||
oneditprepare: function() {
|
||||
var mshort;
|
||||
if (this.maplist === undefined) {
|
||||
$("#node-input-maplist").val("OSMG,OSMC,EsriC,EsriS,EsriT,EsriO,EsriDG,NatGeo,UKOS,OpTop,SW");
|
||||
this.maplist = "OSMG,OSMC,EsriC,EsriS,EsriT,EsriO,EsriDG,NatGeo,UKOS,OpTop,SW";
|
||||
$("#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";
|
||||
}
|
||||
if (this.overlist === undefined) {
|
||||
$("#node-input-overlist").val("DR,CO,RA,DN,HM");
|
||||
@ -482,7 +482,7 @@ If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>c
|
||||
allowFileDrop: {value:"false"},
|
||||
path: {value:"/worldmap"},
|
||||
overlist: {value:"DR,CO,RA,DN,HM"},
|
||||
maplist: {value:"OSMG,OSMC,EsriC,EsriS,EsriT,EsriDG,UKOS,SW"},
|
||||
maplist: {value:"OSMG,OSMC,EsriC,EsriS,EsriT,EsriDG,UKOS"},
|
||||
mapname: {value:""},
|
||||
mapurl: {value:""},
|
||||
mapopt: {value:""},
|
||||
@ -502,8 +502,8 @@ If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>c
|
||||
oneditprepare: function() {
|
||||
var mshort;
|
||||
if (this.maplist === undefined) {
|
||||
$("#node-input-maplist").val("OSMG,OSMC,EsriC,EsriS,EsriT,EsriO,EsriDG,NatGeo,UKOS,OpTop,SW");
|
||||
this.maplist = "OSMG,OSMC,EsriC,EsriS,EsriT,EsriO,EsriDG,NatGeo,UKOS,OpTop,SW";
|
||||
$("#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";
|
||||
}
|
||||
if (this.overlist === undefined) {
|
||||
$("#node-input-overlist").val("DR,CO,RA,DN,HM");
|
||||
@ -512,7 +512,7 @@ If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>c
|
||||
$("#node-input-maplist").typedInput({type:"mapitem", types:[{
|
||||
value: "mapitem",
|
||||
multiple: true,
|
||||
options: mlist
|
||||
options: mlist.concat([{ value:"MB3d", label:"Mapbox 3D" }])
|
||||
}]});
|
||||
$("#node-input-layer").typedInput({type:"laye", types:[{
|
||||
value: "laye",
|
||||
@ -524,8 +524,20 @@ If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>c
|
||||
options: olist
|
||||
}]});
|
||||
$("#node-input-maplist").on('change', function(event, type, value) {
|
||||
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" });
|
||||
}
|
||||
$("#node-input-layer").typedInput("types", [{
|
||||
value: "laye",
|
||||
options: mshort
|
||||
|
||||
@ -56,7 +56,13 @@ module.exports = function(RED) {
|
||||
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||""});
|
||||
if (process.env.MAPBOXGL_TOKEN) {
|
||||
res.send({key:process.env.MAPBOXGL_TOKEN});
|
||||
}
|
||||
else {
|
||||
node.error("No API key set");
|
||||
res.send({key:''})
|
||||
}
|
||||
});
|
||||
RED.httpNode.use(compression());
|
||||
RED.httpNode.use(node.path, express.static(__dirname + '/worldmap'));
|
||||
@ -167,6 +173,7 @@ module.exports = function(RED) {
|
||||
var frameWidth = (size.sx + size.cx) * width - size.cx;
|
||||
var frameHeight = (size.sy + size.cy) * height - size.cy;
|
||||
var url = encodeURI(path.posix.join(RED.settings.httpNodeRoot||RED.settings.httpRoot,config.path));
|
||||
if (config.layer === "MB3d") { url += "/index3d.html"; }
|
||||
var html = `<style>.nr-dashboard-ui_worldmap{padding:0;}</style><div style="overflow:hidden;">
|
||||
<iframe src="${url}" width="${frameWidth}px" height="${frameHeight}px" style="border:none;"></iframe></div>`;
|
||||
return html;
|
||||
|
||||
@ -18,22 +18,15 @@
|
||||
<script>
|
||||
|
||||
// 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
|
||||
// This can also be set as an environment variable MAPBOXGL_TOKEN available to the Node-RED session on your server
|
||||
mapboxgl.accessToken = '';
|
||||
|
||||
var people = {};
|
||||
// You can also replace this with a custom style if you like.
|
||||
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 do3dMap = function() {
|
||||
var people = {};
|
||||
var map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
style: mbstyle,
|
||||
@ -248,8 +241,24 @@ fetch('/-worldmap3d-key')
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
if (mapboxgl.accessToken !== '') {
|
||||
do3dMap();
|
||||
}
|
||||
else {
|
||||
fetch('/-worldmap3d-key', { credentials:'same-origin' })
|
||||
.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;
|
||||
}
|
||||
do3dMap();
|
||||
})
|
||||
.catch(error => { console.log("Unable to fetch MAPBOXGL_TOKEN.",error)} );
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
4
worldmap/leaflet/sockjs.min.js
vendored
4
worldmap/leaflet/sockjs.min.js
vendored
File diff suppressed because one or more lines are too long
@ -739,7 +739,7 @@ var addBaseMaps = function(maplist,first) {
|
||||
if (navigator.onLine) {
|
||||
var layerlookup = { OSMG:"OSM grey", OSMC:"OSM", OSMH:"OSM Humanitarian", EsriC:"Esri", EsriS:"Esri Satellite",
|
||||
EsriR:"Esri Relief", EsriT:"Esri Topography", EsriO:"Esri Ocean", EsriDG:"Esri Dark Grey", NatGeo: "National Geographic",
|
||||
UKOS:"UK OS OpenData", UKOS45:"UK OS 1919-1947", UKOS00:"UK OS 1900", OpTop:"Open Topo Map",
|
||||
UKOS:"UK OS OpenData", OS45:"UK OS 1919-1947", OS00:"UK OS 1900", OpTop:"Open Topo Map",
|
||||
HB:"Hike Bike OSM", ST:"Stamen Topography", SW:"Stamen Watercolor", AN:"AutoNavi (Chinese)"
|
||||
}
|
||||
|
||||
@ -747,6 +747,9 @@ var addBaseMaps = function(maplist,first) {
|
||||
var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
||||
var osmAttrib='Map data © OpenStreetMap contributors';
|
||||
|
||||
if (maplist.indexOf("MB3d")!==-1) { // handle the case of 3d by redirecting to that page instead.
|
||||
window.location.href("index3d.html");
|
||||
}
|
||||
if (maplist.indexOf("OSMG")!==-1) {
|
||||
basemaps[layerlookup["OSMG"]] = new L.TileLayer.Grayscale(osmUrl, {
|
||||
attribution:osmAttrib,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user