JSFiddle - React, Tailwind, and code Playground

by Vignesh Gopalakrishnan

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

html, body, #map {
        margin:0; padding:0;  width : 100%; height : 100%;
      }

JavaScript

var map = L.map('map').setView([45.528, -122.680], 13);
      var esriLeaflet = L.esri.basemapLayer("Gray");
      esriLeaflet.addTo(map);
            var parks = L.esri.featureLayer({
        url: "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/FeatureServer/0",
        style: function () {
          return { color: "#70ca49", weight: 2 };
        }
      }).addTo(map);

      var popupTemplate = "<h3>{NAME}</h3>{ACRES} Acres<br><small>Property ID: {PROPERTYID}<small>";

      parks.bindPopup(function(e){
        return L.Util.template(popupTemplate, e.feature.properties)
      });