JSFiddle - React, Tailwind, and code Playground

HTML

<head>

  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />



  <!-- Make sure you put this AFTER Leaflet's CSS -->
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css">
  <script src='//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js'></script>


</head>

<body>
  <h1>
    Map
  </h1>
  <div>
    <button id="rm">remove map</button> <button id="pm">place map</button>
  </div>
  <div id="mapDisplay" style="height:250px; width:550px;">

  </div>

</body>

CSS

div {
  border: 1px solid #000000;
}

JavaScript

$(function() {

  



  $('#rm').on('click', function() {
    cmap.remove();
    alert('removed');

  });

  $('#pm').on('click', function() {

    cmap = L.map('mapDisplay').setView([51.505, -0.09], 3)
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(cmap);
  });

});