(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_41 = [];
      var iconList = [];
              style['785'] = {
                    '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: '#bcd6c1',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#bcd6c1',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.59549, 45.68514])),
            name: 'Castagno',
            description: '<img src="/files/gpx_image/6_Castagno_Navesole_(13).JPG" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Nome scientifico: <strong><em>CASTANEA SATIVA</em></strong><br /><br/><br /><br/>Circonferenza a petto d\'uomo: 490 cm<br /><br/>Altezza stimata: 23 m<br /><br/>Diametro medio chioma: 21,5 m<br /><br/><br /><br/><br /><br/><br /><br/><br />'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#bcd6c1'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['789'] = {
                    '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: '#bcd6c1',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#bcd6c1',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.56176, 45.67363])),
            name: 'Castagno',
            description: '<img src="/files/gpx_image/10_Castagno_Sigagnoi_(1).JPG" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Nome scientifico: <em><strong>CASTANEA SATIVA</strong></em><br /><br/><br /><br/>Circonferenza a petto d\'uomo: 575 cm<br /><br/>Altezza stimata: 19 m<br /><br/>Diametro medio chioma: 14 m<br /><br/><br />'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#bcd6c1'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['787'] = {
                    '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: '#bcd6c1',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#bcd6c1',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.57551, 45.65247])),
            name: 'Castagno da frutto',
            description: '<img src="/files/gpx_image/8_Castagni_Vesegna_(5).JPG" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Nome scientifico: <em><strong>CASTANEA SATIVA<br /><br/><br /><br/></strong></em>Circonferenza esemplari massima: 500 cm<br /><br/>Altezza esemplari media: 10 m<br /><br/>Et&agrave; presunta esemplari massima: 150-170 anni<br /><br/><br />'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#bcd6c1'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['781'] = {
                    '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: '#bcd6c1',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#bcd6c1',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.61240541526365, 45.64232015565001])),
            name: 'Cedro del libano',
            description: '<img src="/files/gpx_image/3_Cedrolibano_Bernini_(2).jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Nome scientifico: <strong><em>CEDRUS LIBANI</em></strong><br /><br/><br /><br/>Circonferenza a petto d\'uomo: 425 cm<br /><br/>Altezza stimata: 21 m<br /><br/>Et&agrave; presunta: 170-175 anni<br /><br/><br />'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#bcd6c1'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['780'] = {
                    '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: '#bcd6c1',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#bcd6c1',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.612371152403044, 45.64247061693945])),
            name: 'Cedro dell\'Himalaya',
            description: '<img src="/files/gpx_image/2_Cedrodeodara_Bernini_(1).JPG" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Nome scientifico: <em><strong>CEDRUS DEODARA</strong></em><br /><br/>Pianta pi&ugrave; alta di tutto il comune<br /><br/><br /><br/>Circonferenza a petto d\'uomo: 570 cm<br /><br/>Altezza stimata: 34 m<br /><br/>Diametro medio chioma: 23 m<br /><br/>Et&agrave; presunta: 170-175 anni<br /><br/><br />'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#bcd6c1'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['783'] = {
                    '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: '#bcd6c1',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#bcd6c1',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.560875157154143, 45.69777706526676])),
            name: 'Faggio',
            description: '<img src="/files/gpx_image/5_Faggi_CampeiCima_(1).JPG" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Nome scientifico: <em><strong>FAGUS SYLVATICA<br /><br/></strong></em><br /><br/>Circonferenza esemplari media: 330 m<br /><br/>Altezza esemplari media: 25 m<br /><br/>Et&agrave; presunta esemplari massima: 100-120 anni<br /><br/><br />'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#bcd6c1'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['782'] = {
                    '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: '#bcd6c1',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#bcd6c1',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.563107594503325, 45.67557343328634])),
            name: 'Faggio e frassino maggiore',
            description: '<img src="/files/gpx_image/4_Faggifrassini_Spino_(2).JPG" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Nome scientifico: <em><strong>FAGUS SYLVATICA<br /><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; FRAXINUS EXCELSIOR<br /><br/></strong></em><br /><br/>Circonferenza esemplari media: 365 m<br /><br/>Altezza esemplari media: 20 m<br /><br/>Et&agrave; presunta esemplari massima: 120-140<br /><br/><br />'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#bcd6c1'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['788'] = {
                    '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: '#bcd6c1',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#bcd6c1',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.55382, 45.69884])),
            name: 'Faggio e Frassino maggiore',
            description: '<img src="/files/gpx_image/9_Faggi_DossoCampeiCima_(1).JPG" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Nome scientifico: <strong>FAGUS SYLVATICA <br /><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; FRAXINUS EXCELSIOR</strong><br /><br/><br /><br/>Circonferenza esemplari media: 300 cm<br /><br/>Altezza esemplari media: 22 m<br /><br/>Et&agrave; presunta esemplari massima: 100-120 anni<br /><br/><br />'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#bcd6c1'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['784'] = {
                    '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: '#bcd6c1',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#bcd6c1',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.612313992550558, 45.63112609014257])),
            name: 'Platano comune',
            description: '<img src="/files/gpx_image/1_Platano_Bolsem_(2).JPG" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Nome scientifico: <strong><em>PLATANUS X ACERIFOLIA</em></strong><br /><br/><br /><br/>Circonferenza a petto d\'uomo: 472 cm<br /><br/>Altezza misurata: 22 m<br /><br/>Diametro medio chioma: 25,5 m<br /><br/>Et&agrave; presunta: 140 anni<br /><br/><br />'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#bcd6c1'
                  }),
                  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_41.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: 'Alberi monumentali',
        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:#bcd6c1; font-size:50px; line-height:11px; float:left; display: inline;">•</div> ALBERI MONUMENTALI',
              layers: vectorList_41
            }),
          
        ]
      }),

    ],
    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);
})();