<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="http://mapserver.cepl.rssi.ru:8080/geoserver/openlayers3/ol.css" type="text/css">
    <style>
        .ol-zoom {
          top: 52px;
        }
        .ol-toggle-options {
          z-index: 1000;
          background: rgba(255,255,255,0.4);
          border-radius: 4px;
          padding: 2px;
          position: absolute;
          left: 8px;
          top: 8px;
        }
        #updateFilterButton, #resetFilterButton {
          height: 22px;
          width: 22px;
          text-align: center;
          text-decoration: none !important;
          line-height: 22px;
          margin: 1px;
          font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
          font-weight: bold !important;
          background: rgba(0,60,136,0.5);
          color: white !important;
          padding: 2px;
        }
        .ol-toggle-options a {
          background: rgba(0,60,136,0.5);
          color: white;
          display: block;
          font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
          font-size: 19px;
          font-weight: bold;
          height: 22px;
          line-height: 11px;
          margin: 1px;
          padding: 0;
          text-align: center;
          text-decoration: none;
          width: 22px;
          border-radius: 2px;
        }
        .ol-toggle-options a:hover {
          color: #fff;
          text-decoration: none;
          background: rgba(0,60,136,0.7);
        }
        body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: small;
        }
        iframe {
            width: 100%;
            height: 250px;
            border: none;
        }
        /* Toolbar styles */
        #toolbar {
            position: relative;
            padding-bottom: 0.5em;
        }
        #toolbar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        #toolbar ul li {
            float: left;
            padding-right: 1em;
            padding-bottom: 0.5em;
        }
        #toolbar ul li a {
            font-weight: bold;
            font-size: smaller;
            vertical-align: middle;
            color: black;
            text-decoration: none;
        }
        #toolbar ul li a:hover {
            text-decoration: underline;
        }
        #toolbar ul li * {
            vertical-align: middle;
        }
		.sidebar1 {
	float: left;
	width: 255px;
	height: 100%;
	background-color: #FFFFFF;
	top: 6px;
	position: absolute;
	left: 5px;
}
        #map {
	clear: both;
	position: relative;
	width: 850px;
	height: 997px;
	border: 1px solid black;
	left: 256px;
	top: 0px;
        }
		#nodelist {
	padding-left: 5px;
	width: 850px;
	left: 256px;
	top: 1030px;
	position: absolute;
        }
        #wrapper {
            width: 850px;
        }
        #location {
	width: 200px;
	left: 950px;
	top: 1010px;
	position: absolute;
        }
		  #scale {
	padding-left: 5px;
	width: 850px;
	left: 256px;
	top: 1010px;
	position: absolute;
        }
        /* Styles used by the default GetFeatureInfo output, added to make IE happy */
        table.featureInfo, table.featureInfo td, table.featureInfo th {
            border: 1px solid #ddd;
            border-collapse: collapse;
            margin: 0;
            padding: 0;
            font-size: 90%;
            padding: .2em .1em;
        }
        table.featureInfo th {
            padding: .2em .2em;
            font-weight: bold;
            background: #eee;
        }
        table.featureInfo td {
            background: #fff;
        }
        table.featureInfo tr.odd td {
            background: #eee;
        }
        table.featureInfo caption {
            text-align: left;
            font-size: 100%;
            font-weight: bold;
            padding: .2em .2em;
        }
    </style>
    
    <script src="http://mapserver.cepl.rssi.ru:8080/geoserver/openlayers3/ol.js" type="text/javascript"></script>
  <title>Карта растительности ЦФО</title>
  </head>
  
  <body>
  
   <script type="text/javascript">
      
      var TilingMode = false;
      var CurCFO;
      //var cfo2010, cfo2014;
      window.onload = function(e) {CurCFO=cfo2014;}




function Call1()
{


var pixel= new Array(2);
pixel[0] = 0 ; pixel[1] = 749;

var coor = map.getCoordinateFromPixel(pixel);

//alert (coor[0]);
var bounds = [coor[0], 40, 50, 60];
//map.getView().fitExtent(bounds, map.getSize());

var layers = map.getLayers();
//var lyr = new ol.layer.Layer;
//layers[0].visible =  false;  
//layers.pop();
//layers.removeAt(0);
alert('число слоёв: ' + layers.getLength());
//var lyr = layers.item(0);
//alert(lyr.getVisible());
//lyr.setVisible(!lyr.getVisible());
//alert('состояние: ' + lyr.getVisible());
alert('состояние: ' + untiledcfoadm.getVisible());
untiledcfoadm.setVisible(!untiledcfoadm.getVisible());
alert('состояние: ' + untiledcfoadm.getVisible());

// alert("Test1");
}

function Call()
{
	
var str = "";

 var checkboxes = new Array(8); 
  checkboxes = document.getElementsByName('Checkbox');

 var radiobuttones = new Array(2); 
  radiobuttones = document.getElementsByName('Radio');    

  if (checkboxes[7].checked) str = str+"CFO:country," ;
  if (radiobuttones[1].checked) str = str+"CFO:map_cfo_2010," ;
  if (radiobuttones[0].checked) str = str+"CFO:map_cfo_2014," ;
  if (checkboxes[6].checked) str = str+"CFO:hdrlin," ;
  if (checkboxes[5].checked) str = str+"CFO:hdrpol," ;
  if (checkboxes[4].checked) str = str+"CFO:rdslin," ;
  if (checkboxes[3].checked) str = str+"CFO:rrslin," ;
  if (checkboxes[8].checked) str = str+"CFO:oopt," ;
  if (checkboxes[1].checked) str = str+"CFO:poppnt," ;
  if (checkboxes[2].checked) str = str+"CFO:poppol," ;
  if (checkboxes[0].checked) str = str+"CFO:adm," ;
  
  var str_len=str.length;
  var str_lay=str.slice(0,str_len-1);
//alert (str_lay);
//location.href='htt'
}
 </script>
 
 <!--******************sidebar**********************************--> 
  <div class="container">
    
  <div class="sidebar1"><img src="legend\Map_fo.png" alt="" align="left"/><br />
<br />
<br />
<br />
    <label><br>
      <br>
      <br>
      <br>
      <br>
      <br>
     
Таблица содержания: </label>
    <p>
    
    <label>
      <input type="checkbox" name="chk_adm" id="adm"   value="0" checked="checked" onclick="LAYER_adm.setVisible(this.checked)"  />
  Административные границы:</label>
    <br />
    
    <img src="legend\admlin.png" alt="" align="left"/>
    <br />
    <br />
    <br />
    <br />    
    <label>
      <input type="checkbox" name="chk_poppnt" value="1"  id="poppnt" checked="checked" onclick="LAYER_poppnt.setVisible(this.checked)"/>
  Населенные пункты:</label>
     <br />
    <img src="legend\poppnt.png" alt="" align="left"/>
    <br />
    <br />
    <br />
    <br />
    <br />
    <label>
      <input type="checkbox" name="chk_poppol" value="2"  id="poppol" checked="checked" onclick="LAYER_poppol.setVisible(this.checked)" />
  Города (полигоны)</label>
     <br />
    
    <img src="legend\poppol.png" alt="" align="left"/>

    <br />
    <br />
    
    <label>
      <input type="checkbox" name="chk_oopt" value="8"  id="8" checked="checked" onclick="LAYER_oopt.setVisible(this.checked)" />
  Заповедники (ООПТ)</label>
     <br />
    
    <img src="legend\oopt.png" alt="" align="left"/>

    <br />
    <br />
    
    <label>
      <input type="checkbox" name="chk_rrslin" value="3"  id="3" checked="checked" onclick="LAYER_rrslin.setVisible(this.checked)" />
  Железные дороги</label>
     <br />
    
    <img src="legend\rrslin.png" alt="" align="left"/>

    <br />
    <br />
    
    <label>
      <input type="checkbox" name="chk_rdslin" value="4"  id="4" checked="checked" onclick="LAYER_rdslin.setVisible(this.checked)" />
  Автомобильные дороги</label>
     <br />
         
    <img src="legend\rdslin.png" alt="" align="left"/>

    <br />
    <br />
    <label>
      <input type="checkbox" name="chk_hdrpol" value="5"  id="5" checked="checked" onclick="LAYER_hdrpol.setVisible(this.checked)"/>
  Гидрография: озера</label>
     <br />
          
    <img src="legend\hdrpol.png" alt="" align="left"/>

    <br />
    <br />
    <label>
      <input type="checkbox" name="chk_hdrlin" value="6"  id="6" checked="checked" onclick="LAYER_hdrlin.setVisible(this.checked)"/>
  Гидрография: реки</label>
     <br />
    
    <img src="legend\hdrlin.png" alt="" align="left"/>

    <br />
    
   <label>Карта растительности ЦФО:  </label>
       <br />
     <label>
      <input type="radio" name="Radio" value="8"  id="8" checked="checked" onclick="CurCFO.current.setVisible(false);CurCFO=cfo2014;CurCFO.current.setVisible(true)"/>
  2014 г.</label>
     <br />
     
     <label>
      <input type="radio" name="Radio" value="9"  id="9" onclick="CurCFO.current.setVisible(false);CurCFO=cfo2010;CurCFO.current.setVisible(true)"/>
  2010 г.</label>
    
    <br />
    <br />
   <label>
     <img src="legend\cfo_map.png" alt="" align="left"/> </label>

     <br />   
     <br />   
     <br />   
     <br />
     <br />   
     <br />
     <br />   
     <br />
     <br />
     <br />          

    <label>
      <input type="checkbox" name="chk_country" value="7"  id="7" checked="checked" onclick="LAYER_country.setVisible(this.checked)"/>
  Дополнительные слои:</label>
     <br />
     <br />
    <img src="legend\add.png" alt="" align="left"/>

    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    
    <!--input type="button" value="Обновить" onclick="Call1()"  /--> 
    </p>
<!--LiveInternet counter--><script type="text/javascript"><!--
document.write("<a href='//www.liveinternet.ru/click' "+
"target=_blank><img src='//counter.yadro.ru/hit?t14.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";"+Math.random()+
"' alt='' title='LiveInternet: показано число просмотров за 24"+
" часа, посетителей за 24 часа и за сегодня' "+
"border='0' width='88' height='31'><\/a>")
//--></script><!--/LiveInternet--><a href="http://www.liveinternet.ru/stat/mapserver.cepl.rssi.ru/" style="color: white">...</a>

  <!-- end .sidebar1 --></div>
  
 <!--******************toolbar**********************************-->
    <div id="toolbar" style="display: none; left: 256px;">
      <ul>
        <li>
          <a>WMS version:</a>
          <select id="wmsVersionSelector" onchange="setWMSVersion(value)">
            <option value="1.1.1">1.1.1</option>
            <option value="1.3.0">1.3.0</option>
          </select>
        </li>
        <li>
          <a>Tiling:</a>
          <select id="tilingModeSelector" onchange="setTileMode(value)">
            <option value="untiled">Single tile</option>
            <option value="tiled">Tiled</option>
          </select>
        </li>
        <li>
          <a>Antialias:</a>
          <select id="antialiasSelector" onchange="setAntialiasMode(value)">
            <option value="full">Full</option>
            <option value="text">Text only</option>
            <option value="none">Disabled</option>
          </select>
        </li>
        <li>
          <a>Format:</a>
          <select id="imageFormatSelector" onchange="setImageFormat(value)">
            <option value="image/png">PNG 24bit</option>
            <option value="image/png8">PNG 8bit</option>
            <option value="image/gif">GIF</option>
            <option id="jpeg" value="image/jpeg">JPEG</option>
          </select>
        </li>
        <li>
          <a>Styles:</a>
          <select id="imageFormatSelector" onchange="setStyle(value)">
            <option value="">Default</option>
          </select>
        </li>
        <li>
          <a>Width/Height:</a>
          <select id="widthSelector" onchange="setWidth(value)">
             <!--
             These values come from a statistics of the viewable area given a certain screen area
             (but have been adapted a litte, simplified numbers, added some resolutions for wide screen)
             You can find them here: http://www.evolt.org/article/Real_World_Browser_Size_Stats_Part_II/20/2297/
             --><option value="auto">Auto</option>
                <option value="600">600</option>
                <option value="750">750</option>
                <option value="950">950</option>
                <option value="1000">1000</option>
                <option value="1200">1200</option>
                <option value="1400">1400</option>
                <option value="1600">1600</option>
                <option value="1900">1900</option>
            </select>
            <select id="heigthSelector" onchange="setHeight(value)">
                <option value="auto">Auto</option>
                <option value="300">300</option>
                <option value="400">400</option>
                <option value="500">500</option>
                <option value="600">600</option>
                <option value="700">700</option>
                <option value="800">800</option>
                <option value="900">900</option>
                <option value="1000">1000</option>
            </select>
          </li>
          <li>
              <a>Filter:</a>
              <select id="filterType">
                  <option value="cql">CQL</option>
                  <option value="ogc">OGC</option>
                  <option value="fid">FeatureID</option>
              </select>
              <input type="text" size="80" id="filter"/>
              <a id="updateFilterButton" href="#" onClick="updateFilter()" title="Apply filter">Apply</a>
              <a id="resetFilterButton" href="#" onClick="resetFilter()" title="Reset filter">Reset</a>
          </li>
        </ul>
      </div>
      
      <!--******************map**********************-->
      
    <div id="map">
      <div class="ol-toggle-options ol-unselectable"><a title="Toggle options toolbar" onClick="toggleControlPanel()" href="#toggle">...</a></div>
    </div>
    <div id="wrapper">
  <div id="location"></div>
        <div id="scale">
    </div>
    <div id="nodelist">
        <em>Нажмите на карту для получения информации по объекту</em>
    </div>
    
    <script type="text/javascript">
      var pureCoverage = false;
      // if this is just a coverage or a group of them, disable a few items,
      // and default to jpeg format
      var format = 'image/png';
      var bounds = [30, 51,
                    48, 60];
      if (pureCoverage) {
        document.getElementById('filterType').disabled = true;
        document.getElementById('filter').disabled = true;
        document.getElementById('antialiasSelector').disabled = true;
        document.getElementById('updateFilterButton').disabled = true;
        document.getElementById('resetFilterButton').disabled = true;
        document.getElementById('jpeg').selected = true;
        format = "image/jpeg";
      }

      var mousePositionControl = new ol.control.MousePosition({
        className: 'custom-mouse-position',
        target: document.getElementById('location'),
        coordinateFormat: ol.coordinate.createStringXY(2),
        undefinedHTML: '&nbsp;'
      });
      

var LAYER_adm = new ol.layer.Image({
        source: new ol.source.ImageWMS({
          ratio: 1,
          url: 'http://mapserver.cepl.rssi.ru:8080/geoserver/CFO/wms',
          params: {'FORMAT': format,
                   'VERSION': '1.1.1',  
                STYLES: '',
                LAYERS: 'CFO:adm',
          }
        })
      });


var LAYER_poppnt = new ol.layer.Image({
        source: new ol.source.ImageWMS({
          ratio: 1,
          url: 'http://mapserver.cepl.rssi.ru:8080/geoserver/CFO/wms',
          params: {'FORMAT': format,
                   'VERSION': '1.1.1',  
                STYLES: '',
                LAYERS: 'CFO:poppnt',
          }
        })
      });

var LAYER_poppol = new ol.layer.Image({
        source: new ol.source.ImageWMS({
          ratio: 1,
          url: 'http://mapserver.cepl.rssi.ru:8080/geoserver/CFO/wms',
          params: {'FORMAT': format,
                   'VERSION': '1.1.1',  
                STYLES: '',
                LAYERS: 'CFO:poppol',
          }
        })
      });

var LAYER_oopt = new ol.layer.Image({
        source: new ol.source.ImageWMS({
          ratio: 1,
          url: 'http://mapserver.cepl.rssi.ru:8080/geoserver/CFO/wms',
          params: {'FORMAT': format,
                   'VERSION': '1.1.1',  
                STYLES: '',
                LAYERS: 'CFO:oopt',
          }
        })
      });

var LAYER_rrslin = new ol.layer.Image({
        source: new ol.source.ImageWMS({
          ratio: 1,
          url: 'http://mapserver.cepl.rssi.ru:8080/geoserver/CFO/wms',
          params: {'FORMAT': format,
                   'VERSION': '1.1.1',  
                STYLES: '',
                LAYERS: 'CFO:rrslin',
          }
        })
      });


var LAYER_rdslin = new ol.layer.Image({
        source: new ol.source.ImageWMS({
          ratio: 1,
          url: 'http://mapserver.cepl.rssi.ru:8080/geoserver/CFO/wms',
          params: {'FORMAT': format,
                   'VERSION': '1.1.1',  
                STYLES: '',
                LAYERS: 'CFO:rdslin',
          }
        })
      });


var LAYER_hdrpol = new ol.layer.Image({
        source: new ol.source.ImageWMS({
          ratio: 1,
          url: 'http://mapserver.cepl.rssi.ru:8080/geoserver/CFO/wms',
          params: {'FORMAT': format,
                   'VERSION': '1.1.1',  
                STYLES: '',
                LAYERS: 'CFO:hdrpol',
          }
        })
      });



var LAYER_hdrlin = new ol.layer.Image({
        source: new ol.source.ImageWMS({
          ratio: 1,
          url: 'http://mapserver.cepl.rssi.ru:8080/geoserver/CFO/wms',
          params: {'FORMAT': format,
                   'VERSION': '1.1.1',  
                STYLES: '',
                LAYERS: 'CFO:hdrlin',
          }
        })
      });


var cfo2010 = new Object();

cfo2010.untiled = new ol.layer.Image({
        visible: false,
        source: new ol.source.ImageWMS({
          ratio: 1,
          url: 'http://mapserver.cepl.rssi.ru:8080/geoserver/CFO/wms',
          params: {'FORMAT': format,
                   'VERSION': '1.1.1',  
                STYLES: '',
                LAYERS: 'CFO:map_cfo_2010',
          }
        })
      });


cfo2010.tiled = new ol.layer.Tile({
        visible: false,
        source: new ol.source.TileWMS({
          url: 'http://mapserver.cepl.rssi.ru:8080/geoserver/CFO/wms',
          params: {'FORMAT': format, 
                   'VERSION': '1.1.1',
                   tiled: true,
                STYLES: '',
                LAYERS: 'CFO:map_cfo_2010',
          }
        })
      });

cfo2010.current = cfo2010.untiled;



var cfo2014 = new Object();

cfo2014.untiled = new ol.layer.Image({
        source: new ol.source.ImageWMS({
          ratio: 1,
          url: 'http://mapserver.cepl.rssi.ru:8080/geoserver/CFO/wms',
          params: {'FORMAT': format,
                   'VERSION': '1.1.1',  
                STYLES: '',
                LAYERS: 'CFO:map_cfo_2014',
          }
        })
      });


cfo2014.tiled = new ol.layer.Tile({
        visible: false,
        source: new ol.source.TileWMS({
          url: 'http://mapserver.cepl.rssi.ru:8080/geoserver/CFO/wms',
          params: {'FORMAT': format, 
                   'VERSION': '1.1.1',
                   tiled: true,
                STYLES: '',
                LAYERS: 'CFO:map_cfo_2014',
          }
        })
      });

cfo2014.current = cfo2014.untiled;




var LAYER_country = new ol.layer.Image({
        source: new ol.source.ImageWMS({
          ratio: 1,
          url: 'http://mapserver.cepl.rssi.ru:8080/geoserver/CFO/wms',
          params: {'FORMAT': format,
                   'VERSION': '1.1.1',  
                STYLES: '',
                LAYERS: 'CFO:country',
          }
        })
      });

var InfoLayer = new ol.layer.Image({
        source: new ol.source.ImageWMS({
          visible: false,
          ratio: 1,
          url: 'http://mapserver.cepl.rssi.ru:8080/geoserver/CFO/wms',
          params: {'FORMAT': format,
                   'VERSION': '1.1.1',  
                STYLES: '',
                LAYERS: 'CFO:country,CFO:map_cfo_2010,CFO:hdrlin,CFO:hdrpol,CFO:rdslin,CFO:rrslin,CFO:oopt,CFO:poppnt,CFO:poppol,CFO:adm',
          }
        })
      });



      var projection = new ol.proj.Projection({
          code: 'EPSG:4326',
          units: 'degrees',
          axisOrientation: 'neu'
      });
      var map = new ol.Map({
        controls: ol.control.defaults({
          attribution: false
        }).extend([mousePositionControl]),
        target: 'map',
        layers: [
          LAYER_country,
          cfo2014.untiled,
          cfo2014.tiled,
          cfo2010.untiled,
          cfo2010.tiled,
	      LAYER_hdrlin,
          LAYER_hdrpol,
          LAYER_rdslin,
	      LAYER_rrslin,
		  LAYER_oopt,
          LAYER_poppol, 
	      LAYER_poppnt,
	      LAYER_adm,

        ],
        view: new ol.View({
           projection: projection
        })
      });
      map.getView().on('change:resolution', function(evt) {
        var resolution = evt.target.get('resolution');
        var units = map.getView().getProjection().getUnits();
        var dpi = 25.4 / 0.28;
        var mpu = ol.proj.METERS_PER_UNIT[units];
        var scale = resolution * mpu * 39.37 * dpi;
        if (scale >= 9500 && scale <= 950000) {
          scale = Math.round(scale / 1000) + " 000";
        } else if (scale >= 950000) {
          scale = Math.round(scale / 1000000) + " 000 000";
        } else {
          scale = Math.round(scale);
        }
       document.getElementById('scale').innerHTML = "Масштаб = 1 : " + scale;		
		
      });


function startAjax(url){
      var request;
      if(window.XMLHttpRequest){
          request = new XMLHttpRequest();
      } else if(window.ActiveXObject){
          request = new ActiveXObject("Microsoft.XMLHTTP");  
      } else {
          return;
      }

      request.onreadystatechange = function(){
            switch (request.readyState) {
               case 4:{
               if(request.status==200){
                            var foo = request.responseText;    
                            alert ( foo );
                         }
                          else alert("Ошибка: сервер вернул статус: "+ request.status);
                break
                }
            }      
        }
        request.open ('GET', url, true);
        request.send ('');
      }


      map.getView().fitExtent(bounds, map.getSize());
      map.on('singleclick', function(evt) {
        document.getElementById('nodelist').innerHTML = "Загрузка данных... подождите...";
        var view = map.getView();
        var viewResolution = view.getResolution();
        //var source = untiled.get('visible') ? untiled.getSource() : tiled.getSource();

        var source = InfoLayer.getSource(); 
        var url = source.getGetFeatureInfoUrl(
          evt.coordinate, viewResolution, view.getProjection(),
          {'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 50});
        if (url) {
         //alert (url);
          document.getElementById('nodelist').innerHTML = '<iframe seamless align=right src="' + url + '"></iframe>';
         
        }
      });

      // sets the chosen WMS version
      function setWMSVersion(wmsVersion) {
        map.getLayers().forEach(function(lyr) {
          lyr.getSource().updateParams({'VERSION': wmsVersion});
        });
      }

      // Tiling mode, can be 'tiled' or 'untiled'
      function setTileMode(tilingMode) {
        if (tilingMode == 'tiled') {
          CurCFO.current.set('visible', false);
          cfo2010.current = cfo2010.tiled;
          cfo2014.current = cfo2014.tiled;
	  CurCFO.current.set('visible', true);
 	  TilingMode = true;	
        } else {
          CurCFO.current.set('visible', false);
          cfo2010.current = cfo2010.untiled;
          cfo2014.current = cfo2014.untiled;
	  CurCFO.current.set('visible', true);
	  TilingMode = false;	
        }
      }

      function setAntialiasMode(mode) {
        map.getLayers().forEach(function(lyr) {
          lyr.getSource().updateParams({'FORMAT_OPTIONS': 'antialias:' + mode});
        });
      }

      // changes the current tile format
      function setImageFormat(mime) {
        map.getLayers().forEach(function(lyr) {
          lyr.getSource().updateParams({'FORMAT': mime});
        });
      }

      function setStyle(style){
        map.getLayers().forEach(function(lyr) {
          lyr.getSource().updateParams({'STYLES': style});
        });
      }

      function setWidth(size){
        var mapDiv = document.getElementById('map');
        var wrapper = document.getElementById('wrapper');

        if (size == "auto") {
          // reset back to the default value
          mapDiv.style.width = null;
          wrapper.style.width = null;
        }
        else {
          mapDiv.style.width = size + "px";
          wrapper.style.width = size + "px";
        }
        // notify OL that we changed the size of the map div
        map.updateSize();
      }

      function setHeight(size){
        var mapDiv = document.getElementById('map');
        if (size == "auto") {
          // reset back to the default value
          mapDiv.style.height = null;
        }
        else {
          mapDiv.style.height = size + "px";
        }
        // notify OL that we changed the size of the map div
        map.updateSize();
      }

      function updateFilter(){
        if (pureCoverage) {
          return;
        }
        var filterType = document.getElementById('filterType').value;
        var filter = document.getElementById('filter').value;
        // by default, reset all filters
        var filterParams = {
          'FILTER': null,
          'CQL_FILTER': null,
          'FEATUREID': null
        };
        if (filter.replace(/^\s\s*/, '').replace(/\s\s*$/, '') != "") {
          if (filterType == "cql") {
            filterParams["CQL_FILTER"] = filter;
          }
          if (filterType == "ogc") {
            filterParams["FILTER"] = filter;
          }
          if (filterType == "fid")
            filterParams["FEATUREID"] = filter;
          }
          // merge the new filter definitions
          map.getLayers().forEach(function(lyr) {
            lyr.getSource().updateParams(filterParams);
          });
        }

        function resetFilter() {
          if (pureCoverage) {
            return;
          }
          document.getElementById('filter').value = "";
          updateFilter();
        }

        // shows/hide the control panel
        function toggleControlPanel(){
          var toolbar = document.getElementById("toolbar");
          if (toolbar.style.display == "none") {
            toolbar.style.display = "block";
          }
          else {
            toolbar.style.display = "none";
          }
          map.updateSize()
        }

    </script>


  </body>
</html>