JSFiddle - React, Tailwind, and code Playground

by FranceImage

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <div class="wrapper" >
          <nav class="navbar navbar-fixed-top navbar-default" role="navigation">
            <div class="container-fluid">
              <div class="navbar-header">
                <a class="navbar-brand" href="#">Information Management Tool</a>
              </div>
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tools <b class="caret"></b></a>
                    <ul class="dropdown-menu multi-level" role="menu">
                      <li><a id="step1">Step 1 (draw rectangle)</a></li>
                    </ul>
                  </li>
                </ul>
              </div>            
                  <div id="map"></div>
            </div>
          </nav>
    </div>

CSS

#map {
        height: 600px;
      }

JavaScript

$(function(){

              var map = L.map('map').setView([51.505, -0.09], 13);
              L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                  maxZoom: 18,
              }).addTo(map);
              
              var drawnItems = new L.FeatureGroup();
              map.addLayer(drawnItems);

              var drawControl = new L.Control.Draw({
                  position: 'topright',
                  draw: {
                          polyline: false,
                          circle: false,
                          marker: false
                  }
              });

							function drawCreated(e) {
 								var type = e.layerType,
     						layer = e.layer;
                layer.addTo(drawnItems);
								console.log(type, ' drawn', layer);
							}

              var step1Enabled = 0;
              $('#step1').click(function(){
                    if (step1Enabled){
                        map.off('draw:created', drawCreated);
                        map.removeControl(drawControl);
                        drawnItems.clearLayers();
                        step1Enabled = 0;
                    }else{
                        step1Enabled = 1;
                        map.addControl(drawControl);
                        map.on('draw:created', drawCreated);
                    }
              });
        });