Deployment to Webserver

General talk
1

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);
2

Can you explain in a bit more detail what you are actually doing? There are many different ways of converting OSM data into a map that people can see. If you’re following an online set of instructions somewhere it’d be good to link to them.

3

I am following an example located here:
https://openlayers.org/en/latest/doc/quickstart.html
The examples with npm works fine in development mode (up to the last example - deploy step)
But the issue I am having is getting it to work in real mode
The map shows up, but not the tracks.

So what I am doing is I have multiple GPX files, and the map loads these files and displays them.
There is also a file of wpts that is also being displayed.
Some toggle buttons that turn alternate the visibilty feature.
Again, the development mode works great, no issues. Just tryin to deploy to a real web site and the map shows, but not the tracks…
I was thinking it was a path issue - either to the JS file or the GPS files, but then I have no clue.

4

Have you checked your browser’s console (F12 in FireFox)? This might give you a hint why the browser is struggling. Also check you web server’s log. Here you can see what he client is requesting and how the server responds.

5

Solved:, the issue was the mime settings on the host
Had to add GPX file mime to their settings.
Now the webserver can read the files and dosp[lay the data.
There are also setting for this in Startup.cs file, not sure if had an impavt, but I put them in.

[code]// Set up custom content types - associating file extension to MIME type
var provider = new FileExtensionContentTypeProvider();
// Add new mappings
provider.Mappings[“.kml”] = “application/vnd.google-earth.kml+xml”;
provider.Mappings[“.gpx”] = “application/gpx+xml”;

        app.UseStaticFiles(new StaticFileOptions { ContentTypeProvider = provider });