JSFiddle - React, Tailwind, and code Playground

by Jenn Patterson Sevadjian

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster-src.js"></script>
<p>
Example of BCO-DMO tabledap data in Leaflet</p>
<ul>

</ul>
<div style="background:#666; overflow:auto; padding:15px;">


<div id='map' style="float:left"></div>

</div>

CSS

#map {
  width: 800px;
  height: 400px;
}

JavaScript

var map = L.map('map', {
	  center: [30, -60],
	  zoom:2,
	  worldCopyJump: true,
	  zoomSnap: 0.25,
	  zoomDelta: 0.5,
	  wheelPxPerZoomLevel: 50,
    //maxBounds: [[-90, -179.22655], [0.773941,179.12544]]
	});

// Basemap
var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 19,
		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	}).addTo(map);

var url...