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. Shorter URL.</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: [25, -110],
	  zoom:5,
	  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 wmsLayer = L.tileLayer.wms('https://ows.mundialis.de/services/service?', {
    layers: 'TOPO-OSM-WMS'
}).addTo(map);*/

var url ='https://erddap.bco-dmo.org/erddap/tabledap/bcodmo_dataset_784204.geoJson?latitude%2Clongitude%2Ctime'

function getData(url) {
  result = $.ajax({
    url: url,
    dataType: 'jsonp',
    jsonp: '.jsonp',
    cache: 'false',
    success: function(data) {
    
      console.log(data.features[0].geometry.coordinates)
          
      var markerOptions = {
        radius: 5,
        fillColor: "#24D238",
        color: "#A9F6B2",
        weight: 2,
        opacity: 0.8,
        fillOpacity: 1,
      };
      
      $.each(data.features, function (index, row) {
          console.log(row)

          var marker = L.circleMarker([ row.geometry.coordinates[1], row.geometry.coordinates[0] ], markerOptions).addTo(map);
          marker.bindPopup("<b>SECT ID"+row.properties.SECT_ID)

      });

    },
    type: 'GET'
  });
  return result
}

mydata = getData(url)