window.onload = function() {
      var routes = []
      var gpxRoutes = gpxurl.length;
      var factor = 256 / gpxRoutes;
      for (var i = 0; i < gpxRoutes; i++) {
        var greenShade = parseInt((i*factor), 10)
        var hex = greenShade.toString(16);
        var lineColor = "#00" + hex + "00"
        var style = {
            'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: lineColor,
              width: 3
            })
          })
        };

        var vector = new ol.layer.Vector({
          source: new ol.source.Vector({
            url: gpxurl[i],
            format: new ol.format.GPX()
          }),
          style: new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: lineColor,
              width: 3
            })
          })
        });
        routes.push(vector)
      } 

      var routesAndMap = [
          new ol.layer.Tile({
            source: new ol.source.OSM({
              attributions: [
                'All maps courtesy of ',
                ol.source.OSM.ATTRIBUTION
              ],
              url: 'https://{a-c}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=0b4a7d5e6f1f40f096a492c70e14eb02'
            })
          })]
      routesAndMap.push.apply(routesAndMap, routes)

      var map = new ol.Map({
        target: 'map',
        layers: routesAndMap,
        view: new ol.View({
          center: ol.proj.fromLonLat([lonCentre, latCentre]),
          zoom: mapZoom 
        })
      });

      map.addControl(new ol.control.ScaleLine({units: 'us'}))
};