JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="    crossorigin=""/>
   
   
   
 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>
   
   <div id="container">
     <div id="mapid">
       
       
       <div id='text_box'>
         <p>
         <button> ! т е с т ! </button>
         </p>
         <p>
         <button> ! т е с т ! </button>
         </p>
         <p>
         <button> ! т е с т ! </button>
         </p>
       </div> 
     </div> 
   </div>
    <!-- <div id="mapid"></div> -->

CSS

#mapid { 
z-index: 50;
width: 100%;
height: 100%;
} 
#container {
  z-index: -0;
  background-color: gray;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
}
#text_box {
  z-index: 1000;
  background-color: rgba(0,0,0,0.3);
  position: fixed;
  top: 10px;
  right: 10px;  
  height: 110px; 
}

JavaScript

var mymap = L.map('mapid').setView([50.6, 36.6], 10);
/*
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYm9yY2Fnb3MiLCJhIjoiY2sxcTMwbGJuMDA1ZTNjb2VoZjVnM3Y3NiJ9.OxBKsqQxIPmLh3-IH3fO2A', {
	attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
	maxZoom: 18,
	id: 'mapbox.streets',
	accessToken: 'your.mapbox.access.token'
}).addTo(mymap);
*/
var wmsLayer = L.tileLayer.wms('http://maps.rosreestr.ru/arcgis/services/Cadastre/CadastreWMS/MapServer/WMSServer?SERVICE=WMS', {
	layers: 'Кадастровые округа границы (ID: 1)',
  dpi: 96,
  format: 'PNG32',  
  bboxSR: 102100,
  imageSR: 102100,
//  size=1024%252C1024
  transparent: true,
}).addTo(mymap);


var circle = L.circle([50.6, 36.6], {
	color: 'red',
	fillColor: '#f03',
	fillOpacity: 0.5,
	radius: 10000
}).addTo(mymap);

var polygon = L.polygon([
	[50.6, 36.9],
	[50.5, 36.7],
	[50.7, 36.7]
]).addTo(mymap);