JSFiddle - React, Tailwind, and code Playground

by Justin Maat

HTML

<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css">
<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/jquery-git.js"></script>
 <button id="b">
 push
 </button>
 </button>
 <div id="mapid"></div>

CSS

#mapid { height: 380px; }

JavaScript

var b = $("#b")
var mymap = L.map('mapid').setView([51.505, -0.09], 13);

var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(mymap);

var flip = false;

b.click(function(){
  flip = !flip;
  var value = (flip) ? "1.0" : "0.0";
	polygon.setStyle({opacity: value});
})


var OpenStreetMap_Mapnik = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}');
OpenStreetMap_Mapnik.addTo(mymap)