(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['689'] = {
                    '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: 'Archesane - Spino - Ververs',
            description: '<br />',
            source: new ol.source.Vector({
              url: ['/files/gpx/archesane.gpx'],
              radius: 0,
              format: new ol.format.GPX()
            }),
            style: function (feature) {
              return style['689'][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_41 = [];
      var iconList = [];
              style['782'] = {
                    'Point': new ol.style.Style({
            image: new ol.style.Circle({
              fill: new ol.style.Fill({
                color: 'rgba(255,255,0,0.6)',
              }),
              radius: 10,
              stroke: new ol.style.Stroke({
                color: '#ff0',
                width: 1,
              }),
            }),
          }),
                    'LineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#bcd6c1',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#bcd6c1',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.563107594503325, 45.67557343328634])),
            name: 'Beech trees',
            description: '<img src="/files/gpx_image/4_Faggifrassini_Spino_(2).JPG" style="width:300px; max-width:100%; max-height:300px;"><br /><br /><span style=\"color: rgb(33, 37, 41); font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif; font-size: 13.3333px;\">Scientific name:&nbsp;</span><em><strong>FAGUS SYLVATICA<br /><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; FRAXINUS EXCELSIOR</strong></em><br style=\"box-sizing: border-box; color: rgb(33, 37, 41); font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif; font-size: 13.3333px;\" /><br/><br style=\"box-sizing: border-box; color: rgb(33, 37, 41); font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif; font-size: 13.3333px;\" /><br/><span style=\"color: rgb(33, 37, 41); font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif; font-size: 13.3333px;\">Average Circumference: 365 cm</span><br style=\"box-sizing: border-box; color: rgb(33, 37, 41); font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif; font-size: 13.3333px;\" /><br/><span style=\"color: rgb(33, 37, 41); font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif; font-size: 13.3333px;\">Average height: 20 m</span><br style=\"box-sizing: border-box; color: rgb(33, 37, 41); font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif; font-size: 13.3333px;\" /><br/><span style=\"color: rgb(33, 37, 41); font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif; font-size: 13.3333px;\">Maximum Approximate age: 120-140 y</span>'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#bcd6c1'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
              
      var iconLayer = new ol.layer.Vector({
        source: new ol.source.Vector({  
          features: iconList,
        }),
      });
      vectorList_41.push(iconLayer);
    
      var vectorList_20 = [];
      var iconList = [];
              style['673'] = {
                    '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: '#914f15',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#914f15',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.590972039361224, 45.67376762402138])),
            name: 'Bivouac “Due Aceri”',
            description: 'The bivouac &ldquo;Due Aceri&rdquo; is placed on the southern slope of Mount Pizzocolo (m. 1581), right unter the peak, from where you can enjoy a beatiful panoramic 360&deg; view of the Alpine arc, the Lake Garda, the Lake Valvestino and of the valleys below. A little further up the lodge, there is a small chapel, always open (every 3rd Sunday of June, at 11 a.m.,it is celebrated the Mass). On the top of the mountain there is a cross and some beams pointing towards diffrent mountains. The bivouac, built on the ruins of a military building dating back to the WWI, counts with 1 room with a fireplace, 2 tables with benches and a first aid kit. A ladder takes to a loft. There are no beds nor blankets.'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#914f15'
                  }),
                  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_20.push(iconLayer);
    
      var vectorList_19 = [];
      var iconList = [];
              style['669'] = {
                    '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: '#159181',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#159181',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.560180804632, 45.697801215542])),
            name: 'Campèi de Sima',
            description: '<img src="/files/gpx_image/Campei-de-Sima.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />This lodge is in Campiglio di Cima (Camp&egrave;i de S&igrave;ma), a small locality in Toscolano Maderno, in the Alto Garda Bresciano Natuaral Park, at an altitude of 1.017 m. More than a lodge, it is an actual alpine burg, formed by 3 buildings and a small church named after Madonna della Neve (St. Mary of the Snows). The restoration ended in 2000, thanks to ERSAF (owner of the buildings) and A.N.A., that made the mountain cottages of Campiglio di Cima enjoyable.'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#159181'
                  }),
                  radius: 8,
                  stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1,
                  }),
                }),
              }),
            );
                    iconList.push(t);
                      style['671'] = {
                    '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: '#159181',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#159181',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.556957635784, 45.678020597491])),
            name: 'Rifugio \"Pirlo\" allo Spino',
            description: '<img src="/files/gpx_image/03.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />This lodge, property of the CAI of Sal&ograve;, is open daily from spring to autumn and on the weekends during the rest of the year. It&rsquo;s a starting point for interesting hikes to the Pizzocolo (1h30m) and to Mount Spino (less than 1h), and for those who wants to try the close vie ferrate. Hospitality, good food and perfect accommodation for families, hikers and mountain bike lovers. The lodge is located at a height of 1165m at the foot of Mount Spino and Pizzocolo. <br /><br/>It has 2 big bedrooms for groups (40 beds) with bathroom. It is possible to use the main room for group meetings<br /><br/>Easy to reach from Toscolano Maderno, the lodge (mt . 1185) was built on a station of the Finance Police and named after Giorgio Pirlo, who died during WW II<br />'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#159181'
                  }),
                  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_19.push(iconLayer);
    
      var vectorList_22 = [];
      var iconList = [];
              style['670'] = {
                    '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: '#5a6360',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#5a6360',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.584539139646, 45.671028637753])),
            name: 'Malga Valle',
            description: '<img src="/files/gpx_image/04.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Small mountain cottage near the peak of Mount Pizzocolo<br />'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#5a6360'
                  }),
                  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_22.push(iconLayer);
    
      var vectorList_30 = [];
      var iconList = [];
              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: 'From the lodge \"Pirlo\" allo Spino (1160m) take the trail along the hillside of the sw slope of the Mount Spino, go past the canal that goes down from the <em>Buco del gatto</em> and keep walking towards the <em>Buco del Tedesco </em>pass. From here you&rsquo;ll find several paths, some of them are particularly challenging and exposed, but thrills are guaranteed.'
          });
                      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['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: 'Paragliding lauching point',
            description: 'Wide meadow along the trail that leads to the top of Mount Pizzocolo. Ideal launching point'
          });
                      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_21 = [];
      var iconList = [];
              style['502'] = {
                    '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: '#9ea752',
              width: 3,
            }),
          }),
          'MultiLineString': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#9ea752',
              width: 3,
            }),
          }),
          
        };
        // GPX start
        
                  var t = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([10.570558909885, 45.657259340254])),
            name: 'S. Urbano\'s lodge',
            description: '<img src="/files/gpx_image/06.jpg" style="width:300px; max-width:100%; max-height:300px;"><br /><br />Cement roof with fireplace and bivouac'
          });
                      t.setStyle(
              new ol.style.Style({
                image: new ol.style.Circle({
                  fill: new ol.style.Fill({
                    color: '#9ea752'
                  }),
                  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_21.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: 'Archesane - Spino - Ververs',
        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:#bcd6c1; font-size:50px; line-height:11px; float:left; display: inline;">•</div> MUNUMENTAL TREES',
              layers: vectorList_41
            }),
                      new ol.layer.Group({
              title: '<div style="color:#914f15; font-size:50px; line-height:11px; float:left; display: inline;">•</div> BIVOUAC',
              layers: vectorList_20
            }),
                      new ol.layer.Group({
              title: '<div style="color:#159181; font-size:50px; line-height:11px; float:left; display: inline;">•</div> LODGE',
              layers: vectorList_19
            }),
                      new ol.layer.Group({
              title: '<div style="color:#5a6360; font-size:50px; line-height:11px; float:left; display: inline;">•</div> HUT',
              layers: vectorList_22
            }),
                      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:#9ea752; font-size:50px; line-height:11px; float:left; display: inline;">•</div> SHELTER',
              layers: vectorList_21
            }),
          
        ]
      }),

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