(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['753'] = {
                    '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: 'Toscolano - Pulciano',
            description: ' ',
            source: new ol.source.Vector({
              url: ['/files/gpx/track_H.gpx'],
              radius: 0,
              format: new ol.format.GPX()
            }),
            style: function (feature) {
              return style['753'][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_23 = [];
      var iconList = [];
              style['703'] = {
                    '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.616500971707813, 45.6408105071995])),
            name: 'Cartiera di Toscolano',
            description: '<img src="/files/gpx_image/cartiera_burgo_-_sito_burgo.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />La cartiera di Toscolano nacque per volere delle ditte Andrea Maffizzoli e la F.lli Maffizzoli che, gi&agrave; possessori di stabilimenti nella Valle delle Cartiere, volevano costruire una nuova cartiera a lago, in localit&agrave; Capra, dotata dei pi&ugrave; moderni macchinari per la fabbricazione della carta. I lavori iniziarono nel 1906 e la cartiera fu inaugurata il 19 marzo 1910. Nel 1927 nei cinque stabilimenti Maffizzoli, compresi i quattro rimasti in Valle, erano impiegati 1100 operai. <br /><br/>Nel 1945 lo stabilimento di Toscolano fu bombardato da aerei alleati, riportando notevoli danni. <br /><br/>Dal 1989 di propriet&agrave; del Gruppo Marchi, nel 2007, in seguito alla fusione del Gruppo Marchi  in Cartiere Burgo S.p.a., con i suoi 370 dipendenti fa parte delle 14 cartiere della Burgo Group S.p.a.'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#385e39'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['710'] = {
                    '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.61918884246249, 45.64606058703979])),
            name: 'Porto di Toscolano',
            description: '<img src="/files/gpx_image/dic_459.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br /><div style=\"text-align: justify;\"><span style=\"font-size: small;\">Caratteristico scorcio che ancora mantiene l&rsquo;antico fascino. Tra il Quattrocento e il Settecento fu un centro di smistamento della carta e del ferro, da dove arrivavano e partivano le imbarcazioni per Venezia. Qui risiedevano le famiglie pi&ugrave; nobili e ancora rimangono splendidi palazzi come il Palazzo Delai, sulla sinistra in piazzetta, risalente al XVII secolo con pregevoli affreschi esterni.<br /><br/>Dal porto di Toscolano &egrave; possibile ammirare ci&ograve; che rimane di una delle tante limonaie che fino agli inizi del secolo punteggiavano il territorio di Toscolano Maderno e rappresentavano una delle principali fonti di reddito locale. Gli agrumi coltivati, soprattutto i limoni, venivano esportati in tutta Europa. La coltivazione pare sia stata introdotta dai frati francescani nel XIII secolo e abbandonata agli inizi del XX secolo poich&eacute; ormai non era pi&ugrave; competitiva.</span></div>'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#385e39'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
              
      var iconLayer = new ol.layer.Vector({
        source: new ol.source.Vector({  
          features: iconList,
        }),
      });
      vectorList_23.push(iconLayer);
    
      var vectorList_24 = [];
      var iconList = [];
              style['705'] = {
                    '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.617672904071, 45.644477614539])),
            name: 'Chiesa dei Santi Pietro e Paolo',
            description: '<img src="/files/gpx_image/Copia_di_IMG_5081.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Edificata nel 1584 sui resti dell&rsquo;antica pieve, presenta una facciata austera realizzata nel XVII secolo, abbellita dalle statue di San Pietro e da due angeli oltre che elaborate colonne in marmo di cui le due principali provenienti dai ruderi della adiacente villa romana. L&rsquo;interno della Chiesa &egrave; una vera e propria galleria di tele dell&rsquo;illustre pittore veneziano Andrea Celesti, realizzate tra il 1688 e il primo decennio del Settecento, che illustrano gli episodi salienti della vita dei Santi Pietro e Paolo. Andrea Celesti affresc&ograve; anche la volta dell&rsquo;abside e del presbiterio che sono stati definiti come la Sistina del Celesti. Numerose sono le lapidi tombali a pavimento appartenenti a grandi famiglie protagoniste della storia di Toscolano tra il XVI e il XVII secolo.'
          });
                      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['711'] = {
                    '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.616715872936, 45.65003075128])),
            name: 'Chiesa di San Michele',
            description: '<img src="/files/gpx_image/IMG_4910.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Antica parrocchiale risalente al XV secolo, costruita probabilmente sui resti di un pi&ugrave; antico fortilizio, documentato nel medioevo come <em>castellum</em>, di cui non resta pi&ugrave; alcuna traccia. La titolazione va ricondotta ai Longobardi, dei quali San Michele fu il santo prediletto. Il campanile ha l&rsquo;aspetto di una torre di difesa; alla base si conserva un&rsquo;iscrizione romana usata come materiale di reimpiego, che ricorda gli imperatori Antonino Pio e Marco Aurelio. Il portico risale al XVI secolo. La chiesa aveva tre altari: San Michele, San Rocco e l&rsquo;altare della Trinit&agrave;; all&rsquo;esterno un cimitero, una canonica e una casa rurale.<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['714'] = {
                    '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.618391662415, 45.64467700808])),
            name: 'Santuario di Santa Maria del Benaco',
            description: '<img src="/files/gpx_image/IMG_5095.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Posto sul retro della Chiesa Parrocchiale di Toscolano, &egrave; dedicato a Santa Maria del  Benaco e vanta origini antichissime, anche se l&rsquo;impianto attuale risale  al XV secolo, era gi&agrave; documentato nel 1255. E&rsquo; ricco di affreschi del Quattrocento e successivi e di  stemmi araldici delle nobili famiglie locali che contribuirono alla sua  sistemazione e qui ricevettero sepoltura. Le quattro colonne nel mezzo  del sagrato appartenevano ad un ciborio di epoca altomediovale o  romanica che fu fatto abbattere dal Cardinale Borromeo nel 1580 durante  la sua visita, perch&eacute; l&rsquo;altare maggiore era sovrastato da un capitello  pagano che rappresentava Giove Ammone in forma di ariete.&nbsp;<br /><br/>Durante i restauri nel 1829 venne alla luce un pavimento a mosaico, probabilmente della vicina Villa Romana<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);
              
      var iconLayer = new ol.layer.Vector({
        source: new ol.source.Vector({  
          features: iconList,
        }),
      });
      vectorList_24.push(iconLayer);
    
      var vectorList_27 = [];
      var iconList = [];
              style['740'] = {
                    '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.618579915812077, 45.64616360829389])),
            name: 'Palazzo Delai',
            description: '<img src="/files/gpx_image/Copia_di_IMG_5117.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br /><span style=\"font-size: small;\">Il palazzo risalente al XVII secolo, fiancheggiato da numerose limonaie tutt&rsquo;ora visibili e dotato di un giardino a lago, conserva pregevoli affreschi sugli intonaci esterni. Qui Andrea Celesti fu ospitato da Scipione Delai e per questo palazzo dipinse numerose tele, oggi a Brescia. La propriet&agrave; pass&ograve; poi ai Maffizzoli e agli Oldi.&nbsp;</span>'
          });
                      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_26 = [];
      var iconList = [];
              style['717'] = {
                    '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: '#3aa25f',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#3aa25f',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.61828302752718, 45.643419392202766])),
            name: 'Villa Romana dei Nonii Arrii',
            description: '<img src="/files/gpx_image/Copia_di_mosaici.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />La <a href=\"https://www.ecomuseovalledellecartiere.it/it/Villa-romana-dei-Nonii-Arrii-Toscolano\"> villa romana dei Nonii Arrii</a> costituisce uno dei pi&ugrave; importanti edifici  residenziali presenti in et&agrave; romana sulle rive del lago di Garda. <br /><br/>Il complesso si estendeva a breve distanza dalla riva del lago, verso  cui si affacciava con il suo prospetto principale. <br /><br/>La villa apparteneva probabilmente ai <em>Nonii</em>, una delle pi&ugrave;  importanti e influenti famiglie bresciane, grazie a un\'iscrizione proveniente probabilmente dall\'area  della villa, questa &egrave; stata attribuita a Marco Nonio Macrino.<br /><br/>La villa doveva avere un aspetto monumentale, con loggia frontale verso  il lago e avancorpi sui lati nord e sud. Costruita nel I secolo d.C.,  sub&igrave; interventi e trasformazioni nei secoli successivi fino all\'inizio  del V secolo d.C.<br /><br/>Oggi &egrave; visitabile soltanto il settore  meridionale, aperto al pubblico <br /><br/><br /><br/><strong>Apertura:</strong> da maggio a fine settembre tutti i sabato e le domeniche - ingresso gratuito orari 10-12, 15-18. <br /><br/>Sono possibili aperture straordinarie su prenotazione. <br /><br/>Info 0365-546023'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#3aa25f'
                  }),
                  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_26.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: 'Toscolano - Pulciano',
        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:#385e39; font-size:50px; line-height:11px; float:left; display: inline;">•</div> SITI CULTURALI',
              layers: vectorList_23
            }),
                      new ol.layer.Group({
              title: '<div style="color:#be6acd; font-size:50px; line-height:11px; float:left; display: inline;">•</div> CHIESE',
              layers: vectorList_24
            }),
                      new ol.layer.Group({
              title: '<div style="color:#e7ceb0; font-size:50px; line-height:11px; float:left; display: inline;">•</div> VILLE E PALAZZI',
              layers: vectorList_27
            }),
                      new ol.layer.Group({
              title: '<div style="color:#3aa25f; font-size:50px; line-height:11px; float:left; display: inline;">•</div> MUSEI E PARCHI',
              layers: vectorList_26
            }),
          
        ]
      }),

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