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 SailDrone data with pop-up</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: [60, -149],
	  zoom:3,
	  worldCopyJump: true,
	  zoomSnap: 0.25,
	  zoomDelta: 0.5,
	  wheelPxPerZoomLevel: 50,
    //maxBounds: [[-90, -179.22655], [0.773941,179.12544]]
	});

// Basemap
/*var wmsLayer = L.tileLayer.wms('https://ows.mundialis.de/services/service?', {
    layers: 'TOPO-OSM-WMS'
}).addTo(map);
*/
var wmsLayer = L.tileLayer.wms('https://ahocevar.com/geoserver/wms?', {
    layers: 'ne:NE1_HR_LC_SR_W_DR'
}).addTo(map);
/*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 = 'https://polarwatch.noaa.gov/erddap/tabledap/SOCCOM_BGC_Argo.json?WMO_ID%2CmbariID%2CStation%2Cregion%2Ctime%2Clatitude%2Clongitude%2Cdepth%2Cpressure%2Ctemperature%2Csalinity%2Csigma_theta%2Cchl_a%2Cchl_a_corr%2Coxygen%2Coxygen_saturation%2Cnitrate%2Cb_bp700%2CPOC%2Cb_bp532%2CCDOM%2CpH_insitu%2CpH_25C%2CTALK_LIAR%2CDIC_LIAR%2CpCO2_LIAR%2Clatitude_QF%2Cdepth_QF%2Cpressure_QF%2Ctemperature_QF%2Csalinity_QF%2Csigma_theta_QF%2Cchl_a_QF%2Cchl_a_corr_QF%2Coxygen_QF%2Coxygen_saturation_QF%2Cnitrate_QF%2Cb_bp700_QF%2Cb_bp_corr_QF%2CPOC_QF%2Cb_bp532_QF%2CCDOM_QF%2CpH_insitu_QF%2CpH_25C_QF%2CTALK_LIAR_QF%2CDIC_LIAR_QF%2CpCO2_LIAR_QF&time%3E=2020-08-08T00%3A00%3A00Z&time%3C=2020-08-15T11%3A33%3A00Z'

var url ='https://polarwatch.noaa.gov/erddap/tabledap/SOCCOM_BGC_Argo.json?WMO_ID%2Ctime%2Clatitude%2Clongitude%2Cdepth&time%3E=2020-08-08T00%3A00%3A00Z&time%3C=2020-08-15T11%3A33%3A00Z&distinct()&orderBy(%22time%22)'
var url ='https://data.pmel.noaa.gov/pmel/erddap/tabledap/sd1033_arctic_2021.json?latitude%2Clongitude%2Ctime%2Ctrajectory%2CTEMP_SBE37_MEAN%2CSAL_SBE37_MEAN%2CO2_CONC_SBE37_MEAN&time%3E=2021-10-13T00%3A00%3A00Z&time%3C=2021-10-20T15%3A59%3A00Z&distinct()'


function getData(url) {
  result = $.ajax({
    url: url,
    dataType: 'jsonp',
    jsonp: '.jsonp',
    cache: 'false',
   ...