Hi all, working on my first map. Have it working fine using npm and running local.
It is a multi layer map from gps data files.
The layers work fine using NPM. But when I try to deploy only the basic map is visible.
I used the build command, and posted that up to the remote server.
Some questions:
Does the remote server need https?
When reading gps data files, which are located at wwwroot/data/**.gps, what is the proper file path that I need to use.
url: './data/brandywine2.gpx'
worked for the npm development, but will this work for deployment?
What about the JS file?
That is located wwwroot/js/**.gps
Do I need to make changes for that to work?
Many thanks in advance
The full main.js code is as follows:
import 'ol/ol.css';
//import GeoJSON from 'ol/format/GeoJSON';
//import Feature from 'ol/Feature';
import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import {fromLonLat} from 'ol/proj';
import GPX from 'ol/format/GPX.js';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';
//import Overlay from 'ol/Overlay';
var style = {
'Point': new Style({
image: new CircleStyle({
fill: new Fill({
color: 'red'
}),
radius: 3,
stroke: new Stroke({
color: '#ff0',
width: 1
})
})
}),
'LineString': new Style({
stroke: new Stroke({
color: '#f00',
width: 10
})
}),
'MultiLineString': new Style({
stroke: new Stroke({
color: '#0f0',
width: 5
})
})
,
'MultiLineString2': new Style({
stroke: new Stroke({
color: 'red',
width: 5
})
}),
'MultiLineString3': new Style({
stroke: new Stroke({
color: 'blue',
width: 5
})
}),
'MultiLineStringMetalDome': new Style({
stroke: new Stroke({
color: 'orange',
width: 5
})
}),
'MultiLineStringBCS': new Style({
stroke: new Stroke({
color: 'red',
width: 5
})
})
};
var mapSelect = document.getElementById('Map-select');
var DisplayBCSTrails = document.getElementById('DisplayBCSTrails');
var DisplayWPTs = document.getElementById('DisplayWPTs');
var DisplayMetalDomeTrail = document.getElementById('DisplayMetalDomeTrail');
var tileLayer = new TileLayer({
source: new OSM()
});
var vector = new VectorLayer({
source: new VectorSource({
url: './data/brandywine1.gpx',
format: new GPX()
}),
style: function(feature) {
return style[feature.getGeometry().getType()];
},
visible: true
});
var vector2 = new VectorLayer({
source: new VectorSource({
url: './data/brandywine2.gpx',
format: new GPX()
}),
// style: new Style({
// color: 'red',
// width: 5
// })
style: function(feature) {
return style['MultiLineString2'];
},
visible: true
});
var vector3 = new VectorLayer({
source: new VectorSource({
url: './data/brandywine3.gpx',
format: new GPX()
}),
// style: new Style({
// color: 'red',
// width: 5
// })
style: function(feature) {
return style['MultiLineString3'];
},
visible: true
});
var vectorMetalDome = new VectorLayer({
source: new VectorSource({
url: './data/MetalDome.gpx',
format: new GPX()
}),
style: function(feature) {
return style['MultiLineStringMetalDome'];
},
visible: true
});
var vectorBCS = new VectorLayer({
source: new VectorSource({
url: './data/BCSTrails.gpx',
format: new GPX()
}),
style: function(feature) {
return style['MultiLineStringBCS'];
},
visible: true
});
var vectorWPTs = new VectorLayer({
source: new VectorSource({
url: './data/BrandywineWPTs.gpx',
format: new GPX()
}),
style: function(feature) {
return style['Point'];
},
visible: true
});
var map = new Map({
target: 'map-container',
layers: [tileLayer, vector, vector2, vector3, vectorMetalDome, vectorBCS, vectorWPTs],
view: new View({
center: fromLonLat([-123.191558, 50.090620]),
zoom: 12
})
});
//*****************
//*****************
function ToggleBCSTrailsDisplay() {
if(vectorBCS.visible === false){
vectorBCS.visible = true;
vectorBCS.setVisible(true);
}
else{
vectorBCS.visible = false;
vectorBCS.setVisible(false);
}
}
function ToggleWPTDisplay() {
if (vectorWPTs.visible === false) {
vectorWPTs.visible = true;
vectorWPTs.setVisible(true);
} else {
vectorWPTs.visible = false;
vectorWPTs.setVisible(false);
}
}
function ToggleDisplayMetalDomeTrail() {
if(vectorMetalDome.visible === false) {
vectorMetalDome.visible = true;
vectorMetalDome.setVisible(true);}
else {
vectorMetalDome.visible = false;
vectorMetalDome.setVisible(false);
}
}
DisplayBCSTrails.addEventListener('click', ToggleBCSTrailsDisplay);
DisplayWPTs.addEventListener('click', ToggleWPTDisplay);
DisplayMetalDomeTrail.addEventListener('click', ToggleDisplayMetalDomeTrail);