1

I can get a image to overlay and display just fine, but can't seem to get a popup on hover or click. Here is my code for version 1.6.0:

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

    var map = L.map('map', {
        center: [40.75, -74.15],
        zoom: 13
    });

    var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';

    var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: osmAttrib
    }).addTo(map);

    var cities = new L.LayerGroup([
        L.marker([40.72801, -74.07772]).bindPopup('Jersey City')
    ]);
    cities.addTo(map);

    L.imageOverlay(
        'http://research.ccountync.com/maps/images/yellow.png',
        [[40.712216, -74.22655], [40.773941, -74.12544]], {
        opacity: 1
    }).addTo(map).bindPopup("This is a yellow box");

</script>
1

If you look at the Leaflet docs for L.imageOverlay (https://leafletjs.com/reference-1.6.0.html#imageoverlay), you'll see that by default this layer is not interactive (interactive option is set to false), which means it does not emit mouse events and as a consequence popup cannot be triggered with mouse click.

Simply define your image layer as interactive and popup will appear upon mouse click:

L.imageOverlay(
  'http://research.ccountync.com/maps/images/yellow.png',
  [[40.712216, -74.22655], [40.773941, -74.12544]],
  {
    opacity: 1,
    interactive: true
  }
).bindPopup("This is a yellow box").addTo(map);
|improve this answer|||||
  • Works perfectly, thank you TomazicM. – Michael Sharp Mar 20 at 21:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.