JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css">
<script src="https://www.domoritz.de/vbb-coverage/bower_components/leaflet.maskcanvas/src/L.GridLayer.MaskCanvas.js"></script>
<script src="https://www.domoritz.de/vbb-coverage/bower_components/leaflet.maskcanvas/src/QuadTree.js"></script>
<div class="wrapper">
  <section class="content">
    <div id="map"></div>
  </section>
</div>

CSS

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

#map {
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
}

JavaScript

//============
// Base Layers

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = 'Map data © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {
  attribution: osmAttrib
});

var map = new L.Map('map', {
  center: new L.LatLng(48.210033, 16.363449),
  zoom: 15,
  layers: [osm]
});

L.control.scale().addTo(map);

//================
// Set up overlays

var coverageLayer = new L.GridLayer.MaskCanvas({
  opacity: 0.5,
  radius: 70,
  useAbsoluteRadius: true
});
coverageLayer.setData([
  [48.21033, 16.3614], // Burgtheather
  [48.21086, 16.3573], // Rathaus
  [48.2085, 16.3732], // Stephansdom (uses default radius of 70)
  [48.2081, 16.3584], // Parlament
  [48.19832, 16.37185], // Karlskirche
  [48.20332, 16.36909] // Staatsoper
]);

map.addLayer(coverageLayer);
map.fitBounds(coverageLayer.bounds);

// add event listener to determine when layer has been clicked
coverageLayer.on('click', function(e) {
  console.log('clicked the line');
});
coverageLayer.addEventListener('click', function(e) {
  console.log('clicked the line');
});

console.log(coverageLayer);