JSFiddle - React, Tailwind, and code Playground

by dimasad

HTML

<html>
<head>
    <meta charset="utf-8">
    <title>Тест: земресурсы ©МИН</title>
    <link rel="stylesheet" href="ol.css">
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script src="ol.js"></script>


  <style>
   .layer1 {
    /* background-color: #fc0; /* Цвет фона слоя */
    padding: 5px; /* Поля вокруг текста */
    float: left; /* Обтекание по правому краю */
    width: 80%; /* Ширина слоя */
   }
   .layer2 {
    /* background-color: #c0c0c0; /* Цвет фона слоя */
    padding: 5px; /* Поля вокруг текста */
    float: left; /* Обтекание по правому краю */
    width: 20%; /* Ширина слоя */
   }
   .clear {
    clear: left; /* Отмена обтекания */
   }
  </style>

</head>

<body>

<script defer="defer" type="text/javascript">
	function myLayers(lay) {
		/* ненужный кусок кода - начало */
		str = (lay.checked) ? "включили" : "выключили"
		alert ("Вы " + str + " слой '" + lay.value + "'");
		/* ненужно куска кода - конец*/	
		
		layers = map.getLayersByName(lay.value);
		layer = layers[0];
		layer.setVisibility(lay.checked);
	}
</script>


    <div class="layer1" id="map" style="width: 70%; height: width: 30%;"></div>
    <script>
        // инициализируем карту и указываем, в какой DOM-элемент она будет загружаться
        map = new ol.Map({
          target: 'map'
        });

        // создаем и подключаем слой OpenStreetMap
        osmLayer = new ol.layer.Tile({
          source: new ol.source.OSM()
        });
        map.addLayer(osmLayer);

        // создаем и подключаем слой из рабочей области DPR
        DPRLayer = new ol.layer.Image({
        source: new ol.source.ImageWMS({
          ratio: 1,
          url: 'http://localhost:8080/geoserver/DPR/wms',
          params: {'VERSION': '1.1.1',  
                "LAYERS": 'DPR:zem_users',
             //   "exceptions": 'application/vnd.ogc.se_inimage',
          }
        })
      });
        map.addLayer(DPRLayer);

        
        // устанавливаем карте координаты центра и...