JSFiddle - React, Tailwind, and code Playground

by Jason

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<div id="map"></div>

CSS

body {
      margin: 0;
      padding: 0;
    }
    
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }

JavaScript

var map = L.map('map').setView([41.53, -110.64], 5);
L.esri.basemapLayer("Streets").addTo(map);
var maxtmp = "https://nowcoast.noaa.gov/arcgis/rest/services/nowcoast/forecast_meteoceanhydro_sfc_ndfd_dailymaxairtemp_offsets/MapServer";

var sfc="https://nowcoast.noaa.gov/arcgis/rest/services/nowcoast/obs_meteocean_insitu_sfc_time/MapServer";
var maxairtemp = L.esri.dynamicMapLayer({
  url: sfc,
  layers:[3],
  opacity: 0.5,
  useCors: false
});

maxairtemp.bindPopup(
  function(err, featureCollection, response){
    var count = featureCollection.features.length;
    return (count) ? count + ' features' : false;
});