JSFiddle - React, Tailwind, and code Playground

by Scott

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<h1>
hello
</h1>
<div class="container-fluid">
   <ul class="nav nav-tabs d-flex flex-wrap" id="myTab" role="tablist">
	  <li class="nav-item" id="li1">
		<a class="nav-link active" id="lia1" href="#report1" role="tab" data-toggle="tab">Tab1</a>

	  </li>
	  <li class="nav-item" id="li2">
		<a class="nav-link" id="lia2" href="#report2" role="tab" data-toggle="tab">Tab2</a>
	  </li>
	</ul>	
	<div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="report1" >
            <p>panel 1</p>
            
            <div id="mapid1" style="width: 400px; height: 300px;"></div>
            
      </div>
    
      <div role="tabpanel" class="tab-pane fade" id="report2">
            <p>panel 2</p>
            <div id="mapid2" style="width: 400px; height: 300px;"></div>
      </div>		
	</div>
  
</div>

JavaScript

var mymap1 = L.map('mapid1').setView([51.505, -0.09], 13);

		L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
			maxZoom: 10,
			attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
				'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
				'Imagery © <a href="http://mapbox.com">Mapbox</a>',
			id: 'mapbox.streets'
		}).addTo(mymap1);

		var marker1 = L.marker([51.5, -0.15]).addTo(mymap1);
	
		var mymap2 = L.map('mapid2').setView([51.505, -0.09], 13);

		L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
			maxZoom: 10,
			attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
				'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
				'Imagery © <a href="http://mapbox.com">Mapbox</a>',
			id: 'mapbox.streets'
		}).addTo(mymap2);

		var marker2 = L.marker([51.5, -0.09]).addTo(mymap2);