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>     

   <div id='map-toolBox'>
     <p>
       <button id='btn'> ! т е с т ! </button>
     </p> 
  </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%; 
}

#map-toolBox {
  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 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);


btn.onclick = function() {
console.warn('aAAAAAAAaaa')
    var polygon = L.polygon([
      [50+(Math.random()), 36+(Math.random())],
      [50+(Math.random()), 36+(Math.random())],
      [50+(Math.random()), 36+(Math.random())],
    ])
    .on('click', onMapClick)
    .addTo(mymap);
  };
  
  
  
  
  function onMapClick(e) {
	console.warn("You clicked the map at " + e.latlng);
  e.sourceTarget.setStyle({
    color: 'red'
    })
}