(function () {

  var container = document.getElementById('popup2');
  var content = document.getElementById('popup-content');
  var closer = document.getElementById('popup-closer');

  var overlay = new ol.Overlay({
    element: container,
    autoPan: true,
    autoPanAnimation: {
      duration: 250,
    },
  });

  closer.onclick = function () {
    overlay.setPosition(undefined);
    closer.blur();
    return false;
  };
  


// PUNTI start ************************************************************************************
var style = [];

  

    
      var vectorList_38 = [];
      var iconList = [];
              style['658'] = {
                    'LineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'black',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'black',
              width: 3,
            }),
          }),
          
        };
        // GPX start
                  var vectorgpx = new ol.layer.Vector({
            name: 'Bombai - Vigole - Sanico',
            description: 'Dalla piazza del Ponte di Toscolano si prende la strada per Maclino. <br /><br/>Dopo 200 m si tiene la destra per la ripida stradina asfaltata. <br /><br/>Giunti ad un incrocio si continua a salire e poco oltre la costruzione dell&rsquo;acquedotto Comunale si gira a sinistra per una stradina sterrata. <br /><br/>Percorse alcune centinaia di metri ci troviamo di fronte ad un cancello alla cui sinistra si intravede la traccia del sentiero. <br /><br/>Lo percorriamo ed entriamo nella valletta di Bombai. <br /><br/>Attraversiamo con un ponticello il piccolo torrente e ci portiamo sul lato destro della valletta. <br /><br/>Continuiamo in salita e ad un bivio deviamo momentaneamente a sinistra per un bel punto panoramico. <br /><br/>Ritorniamo sui nostri passi e proseguiamo per il sentiero che ci porta nell&rsquo;abitato di Vigole. <br /><br/>Nella piccola piazza troviamo una fontana, la oltrepassiamo e ci troviamo di fronte alla chiesetta di Vigole. <br /><br/>Saliamo ancora per la stradina acciottolata fino alla localit&agrave; Rosei e tenendo sempre la destra ci troveremo ad una santella nei pressi del paesino di Sanico. <br /><br/>Alla destra della santella imbocchiamo la stradina cementata in discesa e senza mai abbandonarla ci ritroveremo alla partenza del nostro itinerario.<br /><br/>Durante la discesa incontreremo la chiesetta di San Martino che merita una visita.&nbsp;',
            source: new ol.source.Vector({
              url: ['/files/gpx/track_N.gpx'],
              radius: 0,
              format: new ol.format.GPX()
            }),
            style: function (feature) {
              return style['658'][feature.getGeometry().getType()];
            },
          });
          vectorList_38.push(vectorgpx);
        
              
      var iconLayer = new ol.layer.Vector({
        source: new ol.source.Vector({  
          features: iconList,
        }),
      });
      vectorList_38.push(iconLayer);
    
      var vectorList_24 = [];
      var iconList = [];
              style['722'] = {
                    'Point': new ol.style.Style({
            image: new ol.style.Circle({
              fill: new ol.style.Fill({
                color: 'rgba(255,255,0,0.6)',
              }),
              radius: 10,
              stroke: new ol.style.Stroke({
                color: '#ff0',
                width: 1,
              }),
            }),
          }),
                    'LineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#be6acd',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#be6acd',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.600096564629, 45.64535393265])),
            name: 'Chiesa di San Martino',
            description: '<img src="/files/gpx_image/IMG_4888.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Nei pressi della frazione di Sanico, in localit&agrave; Prati di San Martino, su un cucuzzolo isolato vicino alla forra del torrente Toscolano, sorge la chiesetta di San Martino di Tours, usata come lazzaretto in caso di epidemie fin dall&rsquo;inizio del Seicento. Il cimitero adiacente ospitava fino alla fine dell&rsquo;Ottocento tutti i defunti di Maderno e delle sue frazioni. vi si addossa un piccolo edificio residenziale nel quale viveva un eremita. Il nucleo originario &egrave; l&rsquo;edificio a pianta circolare che attualmente costituisce la navata della chiesa e che in origine doveva essere provvisto di una piccola abside a est e di un pronao a ovest'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#be6acd'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
              
      var iconLayer = new ol.layer.Vector({
        source: new ol.source.Vector({  
          features: iconList,
        }),
      });
      vectorList_24.push(iconLayer);
    
      var vectorList_23 = [];
      var iconList = [];
              style['744'] = {
                    'Point': new ol.style.Style({
            image: new ol.style.Circle({
              fill: new ol.style.Fill({
                color: 'rgba(255,255,0,0.6)',
              }),
              radius: 10,
              stroke: new ol.style.Stroke({
                color: '#ff0',
                width: 1,
              }),
            }),
          }),
                    'LineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#385e39',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#385e39',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.608396690330533, 45.64106543677046])),
            name: 'Ex Municipio',
            description: '<img src="/files/gpx_image/IMG_5263_(1).jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Appartenuto al Comm. Ettore Bianchi, che fu direttore della cartiera Maffizzoli per diversi anni, ora &egrave; sede della Biblioteca e dell\'Ecomuseo.<br /><br/>Sulla base del balcone si legge la scritta latina NULLA DIES SINE LINEA, cio&egrave; \"nessun giorno senza una linea\", attribuita al pittore Apelle<br /><br/><br /><br/><br /><br/><br />'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#385e39'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['730'] = {
                    'Point': new ol.style.Style({
            image: new ol.style.Circle({
              fill: new ol.style.Fill({
                color: 'rgba(255,255,0,0.6)',
              }),
              radius: 10,
              stroke: new ol.style.Stroke({
                color: '#ff0',
                width: 1,
              }),
            }),
          }),
                    'LineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#385e39',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#385e39',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.609055700445758, 45.64140801163121])),
            name: 'Ponte vecchio',
            description: '<div style=\"text-align: justify;\"><span style=\"font-size: small;\">Cos&igrave; chiamato per distinguerlo dal &ldquo;Ponte Nuovo&rdquo; costruito nel 1908 da cui attualmente passa la strada statale, risale ai primi anni del Cinquecento. L&rsquo;ordine di costruzione &egrave; del 1497, a spese della Magnifica Patria. Si tramanda che fino alla met&agrave; dell&rsquo;Ottocento al vertice del parapetto verso monte esistessero due nicchie, in una delle quali era murato un frammento di una scultura che rappresentava una donna con un diadema sul capo.<br /><br/>Qui si trovava Contrada Ponte, la prima di Toscolano per chi arrivava da Maderno, e da qui passava la strada Regia, che subito dopo il ponte proseguiva sul tracciato dell&rsquo;attuale via Trento, in contrada Mezzacampagna. <br /><br/>In precedenza l&rsquo;attraversamento del fiume avveniva attraverso due guadi.&nbsp;</span></div>'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#385e39'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
              
      var iconLayer = new ol.layer.Vector({
        source: new ol.source.Vector({  
          features: iconList,
        }),
      });
      vectorList_23.push(iconLayer);
    
    

  
// PUNTI end ************************************************************************************

var view = new ol.View({
  center: ol.proj.transform([10.600677, 45.648558], 'EPSG:4326', 'EPSG:3857'),
  //maxZoom: 18,
  zoom: 14
})

  var map = new ol.Map({
    //controls: ol.control.defaults().extend([new ol.control.FullScreen()]),
    target: 'map',
    overlays: [overlay],
    layers: [
      // LAYOUT DELLA CARTINA
      new ol.layer.Group({
        title: 'Visualizza', // A layer must have a title to appear in the layerswitcher
        layers: [
          new ol.layer.Group({
            title: 'Terreno', // A layer must have a title to appear in the layerswitcher
            type: 'base', // Setting the layers type to 'base' results in it having a radio button and only one base layer being visibile at a time
            combine: true, // Setting combine to true causes sub-layers to be hidden in the layerswitcher, only the parent is shown
            visible: false,
            layers: [
              new ol.layer.Tile({
                source: new ol.source.Stamen({
                  layer: 'terrain'
                })
              })
            ]
          }),
          new ol.layer.Tile({
            title: 'Curve di livello',
            type: 'base',
            source: new ol.source.XYZ({
              attributions: 'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
               url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', 
            }),
          }),
          new ol.layer.Tile({
            title: 'Satellite',
            type: 'base',
            source: new ol.source.XYZ({
              attributions: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
               url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.jpg', 
              maxZoom: 19,
            }),
          }),
          new ol.layer.Tile({
            title: 'Mappa', // A layer must have a title to appear in the layerswitcher
            type: 'base', // Again set this layer as a base layer
            visible: true,
            source: new ol.source.OSM()
          }),


        ]
      }),
      
      new ol.layer.Group({
        title: 'Bombai - Vigole - Sanico',
        fold: 'open',  // Adding a 'fold' property set to either 'open' or 'close' makes the group layer collapsible
        layers: [

                      new ol.layer.Group({
              title: '<div style="color:black; font-size:50px; line-height:11px; float:left; display: inline;">•</div> TRACCIA GPS',
              layers: vectorList_38
            }),
                      new ol.layer.Group({
              title: '<div style="color:#be6acd; font-size:50px; line-height:11px; float:left; display: inline;">•</div> CHIESE',
              layers: vectorList_24
            }),
                      new ol.layer.Group({
              title: '<div style="color:#385e39; font-size:50px; line-height:11px; float:left; display: inline;">•</div> SITI CULTURALI',
              layers: vectorList_23
            }),
          
        ]
      }),

    ],
    view: view,
  });





 // GEOLOCALIZZAZIONE start ************************************************************************************

var geolocation = new ol.Geolocation({
    // enableHighAccuracy must be set to true to have the heading value.
    trackingOptions: {
      enableHighAccuracy: true,
    },
  projection: view.getProjection(),
});

function el(id) {
  return document.getElementById(id);
}

el('track').addEventListener('change', function () {
  geolocation.setTracking(this.checked);
});

geolocation.on('change', function () {
  el('accuracy').innerText = geolocation.getAccuracy() + ' [m]';
  el('altitude').innerText = geolocation.getAltitude() + ' [m]';
  el('altitudeAccuracy').innerText = geolocation.getAltitudeAccuracy() + ' [m]';
  el('heading').innerText = geolocation.getHeading() + ' [rad]'; 
  el('speed').innerText = geolocation.getSpeed() + ' [m/s]';
  el('position').innerText = geolocation.getPosition();
});

// handle geolocation error.
geolocation.on('error', function (error) {
  var info = document.getElementById('info-track');
  info.innerHTML = error.message;
  info.style.display = '';
});

var accuracyFeature = new ol.Feature();
geolocation.on('change:accuracyGeometry', function () {
  accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());

  map.getView().animate({ center: geolocation.getPosition() }, { duration: 750 });
});

var positionFeature = new ol.Feature();
positionFeature.setStyle(
  new ol.style.Style({
    image: new ol.style.Circle({
      radius: 6,
      fill: new ol.style.Fill({
        color: '#3399CC',
      }),
      stroke: new ol.style.Stroke({
        color: '#fff',
        width: 2,
      }),
    }),
  })
);
// geolocation.on('change:position', function () {
geolocation.on('change', function () {
  var coordinates = geolocation.getPosition();
  positionFeature.setGeometry(coordinates ? new ol.geom.Point(coordinates) : null);
});

new ol.layer.Vector({
  map: map,
  source: new ol.source.Vector({
    features: [accuracyFeature, positionFeature],
  }),
});
// GEOLOCALIZZAZIONE end ************************************************************************************




// LINK To POINT start ************************************************************************************

// LINK To POINT end ************************************************************************************

// POPOUP start ************************************************************************************

  var element = document.getElementById('popup');

  var popup = new ol.Overlay({
    element: element,
    positioning: 'bottom-center',
    stopEvent: false,
    offset: [0, 0],
  });
  map.addOverlay(popup);

  map.on('singleclick', function (evt) {
    $(element).popover('dispose');
    var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
      return feature;
    });
    if (feature) {
      var coordinate = evt.coordinate;
      var hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate));

      content.innerHTML = '<h4>' + feature.get('name') + '</h4><p>' + feature.get('description') + '</p><br><br><code>' + hdms + '</code>';
      overlay.setPosition(coordinate);
    }
  });

  // POPOUP end ************************************************************************************


  // Get out-of-the-map div element with the ID "layers" and renders layers to it.
  // NOTE: If the layers are changed outside of the layer switcher then you
  // will need to call ol.control.LayerSwitcher.renderPanel again to refesh
  // the layer tree. Style the tree via CSS.
  var sidebar = new ol.control.Sidebar({
    element: 'sidebar',
    position: 'left'
  });
  var toc = document.getElementById('layers');
  ol.control.LayerSwitcher.renderPanel(map, toc, { reverse: true });
  map.addControl(sidebar);
})();