(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_a = [];
      var iconList = [];
              style['656'] = {
                    'LineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'red',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'red',
              width: 3,
            }),
          }),
          
        };
        // GPX start
                  var vectorgpx = new ol.layer.Vector({
            name: 'Monte Maderno - Valle del Bornico',
            description: 'Park at Piazzale Roma and walk along the promenade as far as the square in Maderno.<br style=\"color: rgb(114, 114, 114);Open Sans\" font-size:=\"\" background-color:=\"\" /><br/>Go up Via Benamati, by the side of the Romanesque church, as far as the crossroads with Via Moretto, turn left into Via S.Pietro and go up towards Montemaderno as far as the crossroads with Via Fontane. <br /><br/>Keep walking to the left for about 100 mt. When you reach the main road to Montemaderno cross it ang go into the dirt road Via Oriolo. <br /><br/>After about 100 mt. turn left and walk along the path to Sitna. <br /><br/>Go down to the left for 30 mt. and turn right, then continue along a narrow path flanked with hedges and fences as far as Maclino. <br /><br/>Go up the staircase on the right and reach the townhall, pass it and walk to the main road leading to Montemaderno.<br style=\"color: rgb(114, 114, 114);Open Sans\" font-size:=\"\" background-color:=\"\" /><br/>Turn right to Vigole, then turn left after 50 mt., going down behind the Anffas building and reaching the crossroads of Via Maclino &ndash; Bezzuglio. <br /><br/>Walk down the Bornico valley on the right, along a dirt road flanked with olive trees and reach the stream. Cross the bridge and go up as far as the old &ldquo;Bassa Via del Garda&rdquo;. Follow it downhill to the village of Bezzuglio. Go through the centre of the village and, after about 250 mt., turn left and go down the road to Fasano.<br style=\"color: rgb(114, 114, 114);Open Sans\" font-size:=\"\" background-color:=\"\" /><br/>On the right you can admire an ancient lemon-house and the old village fountains dating back to 1909. When you reach the intersection with the main road to Fasano go down on the left and at the road sign of Maderno make go back to the parking&nbsp; in Piazzale Roma along Via Bornico, then across the main road SS45 bis at Benella and along the lakeside promenade.<br style=\"color: rgb(114, 114, 114);Open Sans\" font-size:=\"\" background-color:=\"\" /><br/><br />',
            source: new ol.source.Vector({
              url: ['/files/gpx/track_B.gpx'],
              radius: 0,
              format: new ol.format.GPX()
            }),
            style: function (feature) {
              return style['656'][feature.getGeometry().getType()];
            },
          });
          vectorList_a.push(vectorgpx);
        
              
      var iconLayer = new ol.layer.Vector({
        source: new ol.source.Vector({  
          features: iconList,
        }),
      });
      vectorList_a.push(iconLayer);
    
      var vectorList_16 = [];
      var iconList = [];
              style['701'] = {
                    '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: '#00f93b',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#00f93b',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.598521, 45.635838])),
            name: 'Bella Italia',
            description: '<img src="/files/gpx_image/IMG_5188.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Inaugurated in 1909 in honour of the stateman and Prime Minister Giuseppe Zanardelli, who lived in Bornico for years. The statue was made by the artist Leonardo Bistolfi. Originally the face of the woman, symbol of the Homeland, looked towards Trieste, that at the time was under the Austria Empire. She was defined as &ldquo;The desire of a far shore&rdquo;. On the base is an inscription to Giuseppe zanardelli. The monument was rotated towards north in 1939 when the square was renovated.'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#00f93b'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['718'] = {
                    '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: '#00f93b',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#00f93b',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.598902, 45.635768])),
            name: 'The Lion and S. Marco square',
            description: '<img src="/files/gpx_image/Copia_di_File0082.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />The column, symbol of the Serenissima Republic of Venice was built in 1610 in front of the old town hall of Maderno. On the base the are low reliefs representing Saint Andrew, patron saint of Maderno, and Saint Herculanums, patron saint of the entire Riviera. According to the local tradition, when the Republic of Venice fell in 1797, the original stone lion was thrown into the giulf. The current bronze sculpture was made in 1902 by Ettore Ximenes (Palermo, 1855 &ndash; Rome, 1926) who donated it to the community of Maderno.'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#00f93b'
                  }),
                  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_16.push(iconLayer);
    
      var vectorList_27 = [];
      var iconList = [];
              style['727'] = {
                    '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: '#e7ceb0',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#e7ceb0',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.600610283346228, 45.63753490873119])),
            name: 'Bulgheroni Palace',
            description: '<img src="/files/gpx_image/Copia_di_DSC02061.JPG" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Palazzo Bulgheroni, also known as Villa Lucia, belongs to an elegant historical complex surrounded by a wide wall surmonted by big stone balls with a small tower in its corner. The big ashlar gate opens on a garden towards which the villa is faced to and a scenographic staircase with satues, vats and mascarons that leads to the terraces of an old lemon garden. The palace has an interesting frescoed frieze beneath the roof with putti and mythological figures. The plan of the building dates back to the XVII C. In 1707 the property beloged to the counts Rizzardi, whose emblems are on the shield of one of the statues on the staircase. From the end of the XIX C, it belonged to the Bulgheroni Family.'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#e7ceb0'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['709'] = {
                    '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: '#e7ceb0',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#e7ceb0',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.600314439165508, 45.63644853732234])),
            name: 'Gonzaga Palace',
            description: '<img src="/files/gpx_image/Copia_di_DSC02054.JPG" style="width:300px; max-width:100%; max-height:300px;"><br /><br />In the 19th Century the palace was partly damaged, and what we can see today it is only one third of the original building. On the ground floor (known as &ldquo;piano nobile&rdquo; in Italian) the doors and the walls are preciously decorated with 17th Century motifs. Interesting facts: Most of the decoration left recreates an illusory appearance of a Baroque architecture by the use of peculiar colors and art technique resembling movements. All over the place you can see between the columns, balustrades and recesses in the walls different paintings such as flower vases and garlands, idyllic landscapes, portraits and mythological scenes. <br /><br/>Besides the amazing decoration of the interiors, there was an outstanding park outside, stretching over 70 hectares, between the palace and the lakeshore. To walk down, there was a pathway passing through different kind of trees, such as laurels, olive trees and mulberries and leading near the area now known as &ldquo;ex campo ippico&rdquo; (which means &ldquo;former hippodrome&rdquo;). From a drawing, year 1623, we know that it was surrounded by geometrically-shaped boxwood beds.  On the side of the garden there were rows of lemon greenhouses (the definition found in an old document says &ldquo; walled cedar greenhouses&rdquo;), special greenhouses to growing citrus fruits.  Interesting facts: From an old inventory we found out that in the greenhouses of the Gonzaga&rsquo;s during the lemon harvesting season in 1635, they gathered  22.600 lemons, each measuring 18 cm (about 7 inches) in circumference and there were 60.000 lemons already ripen but still hanging on the trees.'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#e7ceb0'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['733'] = {
                    '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: '#e7ceb0',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#e7ceb0',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.587393054307, 45.626550260983])),
            name: 'Villa Zanardelli',
            description: '<img src="/files/gpx_image/DSC_5054.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />On the border with Fasano, Villa Zanardelli was built between 1888 and 1892, based on a project of Tagliaferri, for Giuseppe Zanardelli, an important statist, many-times minister of the Regno d&rsquo;Italian and Prime Minister. <br /><br/>The interior was designed by Ximenes. Zanardelli died here in 1903. It is now a nursing home for disabled owned by a non-profit foundation. <br /><br/>It can be visited on the occasion of public festivals organized by the Foundation'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#e7ceb0'
                  }),
                  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_27.push(iconLayer);
    
      var vectorList_25 = [];
      var iconList = [];
              style['769'] = {
                    '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: '#ff0000',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#ff0000',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.586185, 45.626012])),
            name: 'Ex Villa Bassetti',
            description: 'It was the seat of the German Embassy, bombed by the Allied on 4th december 1944. It is now a condominium, on the border with Gardone Riviera<br />'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#ff0000'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['720'] = {
                    '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: '#ff0000',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#ff0000',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.598209055538318, 45.635834449091774])),
            name: 'Hotel Golfo - Ex Villa Bianchi',
            description: '<img src="/files/gpx_image/Copia_di_IMG_5179.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Villa Bianchi, now Hotel Golfo, was built in XVIII C. and modernised in 1894 when the tower and the decorations in liberty style were added. It has been the residence of the mayor of Maderno, Cav. Giovan battista Bianchi, until 1940s. Between 1943 and 1945 it was occupied and was the seat of the Republican Fascist Party and the headquarters of the Black Brigades. It was then property of the Piva Family, that opened the Hotel Palace, then Hotel Golfo. Inside, in 1942 Angelo Landi from Sal&ograve; made beautiful paintings&nbsp;representing the legend of Engardina, the nymph who gave the blu of her hair to the lake Benaco.'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#ff0000'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['734'] = {
                    '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: '#ff0000',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#ff0000',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.600364283408126, 45.638163897913664])),
            name: 'Villa Caprera',
            description: '<div>It was the seat of the Republican National Guard and prison for many antifascist</div>'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#ff0000'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['742'] = {
                    '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: '#ff0000',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#ff0000',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.594556697785693, 45.63452885780726])),
            name: 'Villa Gemma',
            description: '<span style=\"font-size: small;\"><span style=\"line-height: 115%;\">Maderno (Via Roma). It belonged to the Triboldi family and here the INTERNO Minister Buffarini and the Ministero f National Education Biggini </span></span><span style=\"font-size: small;\"><span style=\"line-height: 115%;\"><span style=\"font-size: small;\"><span style=\"line-height: 115%;\"> were hosted</span></span>.&nbsp;</span></span>'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#ff0000'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['738'] = {
                    '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: '#ff0000',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#ff0000',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.597948162553598, 45.6361958034773])),
            name: 'Villa Serenella',
            description: '<p><span style=\"font-size: small;\"><span style=\"line-height: 115%;\">The Consul of the militia G. Battista Riggio, one of the members of the special Jury in Verona that sentenced Galeazzo Ciano and others to death, lived in this villa</span></span></p>'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#ff0000'
                  }),
                  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_25.push(iconLayer);
    
      var vectorList_24 = [];
      var iconList = [];
              style['500'] = {
                    '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.599705474709, 45.635790357945])),
            name: 'S. Andrea Cathedral',
            description: '<img src="/files/gpx_image/Copia_di_IMG_6081.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />It&rsquo;s one of the best examples of Lombard-Romanesque architecture influenced by Verona: the fa&ccedil;ade is masterfully made of stones and polychrome marbles that give light and movement. The inside is divided into 3 aisles by quatrefoil based pillar with capitels representing a wide variety of iconographic decorative motives,  typical of the Romanesque style. <br /><br/>Visitors can admire a precious painted board by Paolo Veneziano depicting the Virgin with the Child. The rib vaults of the dom aisles of the chancel date back to the end of the 1400s. <br /><br/>In 1580 Cardinal Borromeo gave the order to close the crypt, that was brought back to light in 1962. Here S. Hercolanus\'s relics were preserved, then moved to the new church in 1825.&nbsp;<br /><br/><br />'
          });
                      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);
                      style['731'] = {
                    '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.591159272696974, 45.63441476270746])),
            name: 'St Faustino and St Giovita\'s Church',
            description: '<img src="/files/gpx_image/DSC02155.JPG" style="width:300px; max-width:100%; max-height:300px;"><br /><br />The eighteenth C. Church in Maclino has a unique aisle. The facade is horizontally divided by a gypsum belt course, vertically by twin lesenes supporting the gable.  Inside, two side chapels with wooden altars dedicated to the Sacred Heart and to Our Lady of the Rosary. The last one preserves an altarpiece made by Andrea Bertanza from Sal&ograve; in 1626, it represents the Virgin with Saints Macario and Felicita. On the left of the presbitery there is the canvas of the same author representing the <em>Virgin and the Child with San Carlo Borromeo, Saint Andrew, Saint Herculanus and a benefactor</em>.'
          });
                      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['699'] = {
                    '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.596475, 45.635198])),
            name: 'Wash house',
            description: '<img src="/files/gpx_image/IMG_5182.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />It dates back to the 19th Century and it belonged to the Park Hotel, one of the first hotels built in Maderno.&nbsp;<br /><br/>Between the hotel and the wash house there was a garden, expropriated in 1899 for the construction of the road.'
          });
                      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: 'Show', // A layer must have a title to appear in the layerswitcher
        layers: [
          new ol.layer.Group({
            title: 'Terrain', // 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: 'Elevation contour lines',
            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: 'Map', // 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: 'Montemaderno - Bornico',
        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:red; font-size:50px; line-height:11px; float:left; display: inline;">•</div> Altro',
              layers: vectorList_a
            }),
                      new ol.layer.Group({
              title: '<div style="color:#00f93b; font-size:50px; line-height:11px; float:left; display: inline;">•</div> MONUMENTS',
              layers: vectorList_16
            }),
                      new ol.layer.Group({
              title: '<div style="color:#e7ceb0; font-size:50px; line-height:11px; float:left; display: inline;">•</div> VILLAS AND PALACES',
              layers: vectorList_27
            }),
                      new ol.layer.Group({
              title: '<div style="color:#ff0000; font-size:50px; line-height:11px; float:left; display: inline;">•</div> ITALIAN SOCIAL REPUBLIC',
              layers: vectorList_25
            }),
                      new ol.layer.Group({
              title: '<div style="color:#be6acd; font-size:50px; line-height:11px; float:left; display: inline;">•</div> CHURCHES',
              layers: vectorList_24
            }),
                      new ol.layer.Group({
              title: '<div style="color:#385e39; font-size:50px; line-height:11px; float:left; display: inline;">•</div> CULTURAL SITE',
              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);
})();