Esri Leaflet label points

by Bryan McIntosh

HTML

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Esri Leaflet Tutorials: Add a feature layer</title>

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" crossorigin="" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" crossorigin=""></script>
  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@^3.0.8/dist/esri-leaflet.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/esri-leaflet-vector.js"></script>

  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #323232;
    }
  </style>
</head>

<body>
  <div id="map"></div>

  <script>
    const apiKey = "YOUR_API_KEY";
    const basemapEnum = "ArcGIS:Streets";
    const map = L.map("map", {
      minZoom: 2,
      basemap: "streets-vector"
    }).setView([34.02, -118.805], 13);
    //L.esri.Vector.vectorBasemapLayer(basemapEnum).addTo(map);
    var trailheads = L.esri
      .featureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0"
      });
    trailheads.addTo(map);
    var labels = {};
    trailheads.on('createfeature', function(e) {
      var id = e.feature.id;
      var feature = trailheads.getFeature(id);
      var center = feature.getLatLng();
      var label = L.marker(center, {
        icon: L.divIcon({
          iconSize: null,
          className: 'label',
          html: '<div>' + e.feature.properties.OBJECTID + '</div>'
        })
      }).addTo(map);
      labels[id] = label;
    });
    
  </script>
</body>

</html>