Esri / esri-leaflet

A lightweight set of tools for working with ArcGIS services in Leaflet. :rocket:
https://developers.arcgis.com/esri-leaflet/
Apache License 2.0
1.61k stars 798 forks source link

Add special openPopup and openTooltip methods to FeatureLayer #1350

Closed patrickarlt closed 1 year ago

patrickarlt commented 1 year ago

This should fix the issue with FeatureLayer.bindPopup() and FeatureLayer.bindTooltip() introduced with Leaflet 1.9.3.

The solution was to just copy the methods but remove the logic around FeatureGroup.

RE: #1348, https://github.com/Leaflet/Leaflet/issues/8761

Can be tested locally in the debug folder with:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Esri Leaflet Debugging Sample</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.9.3"></script>

  <!-- Load Esri Leaflet from source-->
  <script src="../dist/esri-leaflet-debug.js"></script>

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

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

    #info-pane {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 1000;
      padding: 1em;
      background: white;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <div id="info-pane" class="leaflet-bar">
    <label>
      sample application for debugging
    </label>
  </div>

  <script>
    /*
  make a copy of this file in the same folder if you'd like git to ignore your local changes
  */
    var map = L.map("map").setView([43.5, -98.5], 6);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    const earthquakes = L.esri
      .featureLayer({
        url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Earthquakes_Since1970/MapServer/0"
      })
      .addTo(map);

    earthquakes.bindPopup(function (layer) {
      return L.Util.template(
        "<p>Earthquake <strong>{name}</strong> occured on {mo}/{dy}/{year_}.  It had a magnitude of {magnitude}.</p>",
        layer.feature.properties
      );
    });

    earthquakes.bindTooltip(function (layer) {
      return L.Util.template(
        "<p>{name}</p>",
        layer.feature.properties
      );
    });
  </script>
</body>

</html>
gavinr commented 1 year ago

This was released in v3.0.10.