(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_36 = [];
      var iconList = [];
              style['756'] = {
                    '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: '#235ba0',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#235ba0',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.606914171707567, 45.63114532983328])),
            name: 'ASD Remiera Toscolano',
            description: 'Organizza corsi per bambini e adulti durante tutto l&rsquo;anno e  alcune manifestazioni come: Dragon Boat in rosa, Gardalonga, S. Martino Festival.<br />'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#235ba0'
                  }),
                  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_36.push(iconLayer);
    
      var vectorList_35 = [];
      var iconList = [];
              style['757'] = {
                    '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: '#609036',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#609036',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.636869817742053, 45.66279674990764])),
            name: 'Bogliaco Golf Resort',
            description: '<img src="/files/gpx_image/golf_club.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Il terzo campo da golf pi&ugrave; antico d\'Italia, situato in una conca sopraelevata che consente una meravigliosa vista del Lago di Garda.<br /><br/>Aperto tutto l\'anno, grazie al clima mite che consente giornate temperate anche in inverno.<br /><br/>Un terreno di gioco circondato da limoni e ulivi secolari, specchi d\'acqua e piante tipiche della vegetazione mediterranea.<br /><br/>Percorso di 18 buche PAR70 con driving range, club house con ristorante e area lounge, apartments e un lodge con 10 camere.&nbsp;'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#609036'
                  }),
                  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_35.push(iconLayer);
    
      var vectorList_34 = [];
      var iconList = [];
              style['758'] = {
                    '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: '#2e6961',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#2e6961',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.617759927526969, 45.63628861711289])),
            name: 'Circolo Vela Toscolano Maderno',
            description: '<a href=\"http://www.cvtmaderno.com\">www.cvtmaderno.com </a><br /><br/>E-mail:	info@scuolavelacvtm.it'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#2e6961'
                  }),
                  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_34.push(iconLayer);
    
      var vectorList_a = [];
      var iconList = [];
              style['759'] = {
                    '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: 'red',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'red',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.605708047617185, 45.63156830503782])),
            name: 'Ex Campo Ippico',
            description: '<img src="/files/gpx_image/DSCN2795.JPG" style="width:300px; max-width:100%; max-height:300px;"><br /><br />&nbsp;Ex campo per le gare ippiche, questo bellissimo prato in erba &egrave; ideale per il relax estivo. La posizione a due passi dal lago permette di godere appieno di una vacanza all\'insegna del relax. Nelle serate estive il Campo Ippico si trasforma in una location per eventi come concerti e spettacoli.'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: 'red'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['760'] = {
                    '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: 'red',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'red',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.59943122329191, 45.635349297513734])),
            name: 'Lungolago Zanardelli ',
            description: '<img src="/files/gpx_image/DSCN2799.JPG" style="width:300px; max-width:100%; max-height:300px;"><br /><br /><span style=\"font-size: small;\">Una lunga e splendida passeggiata che costeggia il lago permette di partire dall\'entrata del Golfo di Maderno, in via Roma, e arrivare fino al Lido degli Ulivi a Toscolano. L\'attuale lungolago &egrave; il risultato di una serie di risistemazione stradali. Nel 1902 fu costruito il primo tratto per permettere un accesso diretto all\'imbarcadero.&nbsp;</span>'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: 'red'
                  }),
                  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_a.push(iconLayer);
    
      var vectorList_30 = [];
      var iconList = [];
              style['775'] = {
                    '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: '#7e97b6',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#7e97b6',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.621708198147163, 45.67030144229799])),
            name: 'Falesia Monte Castello',
            description: '<br />'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#7e97b6'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['774'] = {
                    '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: '#7e97b6',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#7e97b6',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.591785879721346, 45.67386951855887])),
            name: 'Falesia Monte Pizzocolo',
            description: '<br />'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#7e97b6'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['768'] = {
                    '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: '#7e97b6',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#7e97b6',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.563368414453006, 45.67185539898287])),
            name: 'Marmere',
            description: 'Dal rifugio Pirlo allo Spino (1160 m) si prende il comodo sentiero che con alcuni saliscendi percorre a mezzacosta il versante sud-ovest di Monte Spino, supera il canale che scende dal Buco del Gatto e continua verso il Passo del Buco del Tedesco. Da qui vi sono molte vie, alcune particolarmente impegnative ed esposte, che offrono sicure emozioni.'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#7e97b6'
                  }),
                  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_30.push(iconLayer);
    
      var vectorList_31 = [];
      var iconList = [];
              style['762'] = {
                    '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: '#102a47',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#102a47',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.61957324101857, 45.63935411340573])),
            name: 'Garda Paragliding',
            description: 'Il volo in parapendio biposto pu&ograve; essere praticato da chiunque, non ci sono limiti di et&agrave;, il peso del passeggero deve essere compreso tra i 30 e 130 kg, non servono particolari doti fisiche. &Egrave; come andare in bicicletta senza dover pedalare!&nbsp;'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#102a47'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['765'] = {
                    '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: '#102a47',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#102a47',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.591356732838612, 45.6740794252752])),
            name: 'Punto di lancio parapendio',
            description: 'Ampia prateria situata sul sentiero che conduce alla cima del Pizzocolo. Ideale punto di partenza per voli in parapendio.&nbsp;'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#102a47'
                  }),
                  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_31.push(iconLayer);
    
      var vectorList_33 = [];
      var iconList = [];
              style['761'] = {
                    '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: '#8fa79d',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#8fa79d',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.61224542611305, 45.64229900250212])),
            name: 'Parco Bernini',
            description: '<span class=\"form-control-static\">Nel centro storico di Toscolano,  facente parte del Palazzo Bernini-Buri, il parco un tempo giungeva fino  al lago. Ora rimane solo la parte aperta al pubblico, sulla quale si  affaccia un&rsquo;antica limonaia. Al parco Bernini si trova l\'albero pi&ugrave;  grande di tutto il lago: un cedro himalayano imponente con un tronco di  oltre due metri diametro, accompagnato da due monumentali cedri del  Libano.</span>'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#8fa79d'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['767'] = {
                    '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: '#8fa79d',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#8fa79d',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.609117602154768, 45.640801975350044])),
            name: 'Pattinodromo',
            description: '<span style=\"font-size: small;\">Location per eventi musicali, culturali, giovanili e associativi.&nbsp;</span>'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#8fa79d'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['825'] = {
                    '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: '#8fa79d',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#8fa79d',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.616162492633437, 45.65292322171078])),
            name: 'Pump track',
            description: '<img src="/files/gpx_image/WhatsApp_Image_2023-05-11_at_12.35.41.jpeg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Il Circuito Pump track Toscolano Maderno &ndash; Gaino &egrave; composto da due piste, il circuito 01 &egrave; dedicato ai bambini dai 6 ai 14 anni, il circuito 02 pu&ograve; essere utilizzato dai 14 anni in avanti. E&rsquo; possibile utilizzare le piste gratuitamente tutti i giorni dalle 8.00 alle 22.00.'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#8fa79d'
                  }),
                  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_33.push(iconLayer);
    
      var vectorList_28 = [];
      var iconList = [];
              style['766'] = {
                    '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: '#e9b3ff',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#e9b3ff',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.605524804399648, 45.65258234901218])),
            name: 'Riserva di pesca - Unione Pescatori Dilettanti del Garda',
            description: 'Riserva di pesca in Valle delle Cartiere. Orari di apertura:<br /><br/>- dal 28/02/21 al 30/06/21 e dal 01/09/21 al 03/10/21 aperta dal venerd&igrave; alla domenica (6.30-11.30 / 13.00-19.00)<br /><br/>- dal 01/07/21 al 31/08/21 aperta tutti i giorni (6.30-11.30 / 14.00-19.00)<br /><br/>Permesso da pagare in loco<br /><br/><br />'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#e9b3ff'
                  }),
                  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_28.push(iconLayer);
    
      var vectorList_32 = [];
      var iconList = [];
              style['764'] = {
                    '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: '#51652b',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#51652b',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.616492698691381, 45.65968024403243])),
            name: 'Scuderia Castello',
            description: 'Organizza passeggiate e trekking a cavallo, per principianti ed esperti, in collina e nel Parco dell&rsquo;Alto Garda.&nbsp;'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#51652b'
                  }),
                  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_32.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: 'Sport e tempo libero',
        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:#235ba0; font-size:50px; line-height:11px; float:left; display: inline;">•</div> CANOTTAGGIO',
              layers: vectorList_36
            }),
                      new ol.layer.Group({
              title: '<div style="color:#609036; font-size:50px; line-height:11px; float:left; display: inline;">•</div> GOLF',
              layers: vectorList_35
            }),
                      new ol.layer.Group({
              title: '<div style="color:#2e6961; font-size:50px; line-height:11px; float:left; display: inline;">•</div> VELA',
              layers: vectorList_34
            }),
                      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:#7e97b6; font-size:50px; line-height:11px; float:left; display: inline;">•</div> CLIMBING',
              layers: vectorList_30
            }),
                      new ol.layer.Group({
              title: '<div style="color:#102a47; font-size:50px; line-height:11px; float:left; display: inline;">•</div> PARAGLIDING',
              layers: vectorList_31
            }),
                      new ol.layer.Group({
              title: '<div style="color:#8fa79d; font-size:50px; line-height:11px; float:left; display: inline;">•</div> TEMPO LIBERO',
              layers: vectorList_33
            }),
                      new ol.layer.Group({
              title: '<div style="color:#e9b3ff; font-size:50px; line-height:11px; float:left; display: inline;">•</div> PESCA',
              layers: vectorList_28
            }),
                      new ol.layer.Group({
              title: '<div style="color:#51652b; font-size:50px; line-height:11px; float:left; display: inline;">•</div> EQUITAZIONE',
              layers: vectorList_32
            }),
          
        ]
      }),

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