2

I want to to show an image when the mouse hovers on a marker or polygon, and on click show a popup with property attributes information from GeoJSON.

I can manage to show attributes on click but I am not able to show image on hover. However, the image can be viewed in console.log but it's not appearing on the screen.

Below is what I want it to look like.

enter image description here

  • I want to show an Image in mouse hover on each marker, polygon, and polyline. I find solution for popup window with more information. – Kuntal Parbat Sep 22 '16 at 11:27
1

I found a solution. Hope this will help someone who is searching for a similar question.

The code is:

    popupContent = document.createElement("img");
    popupContent.onload = function () {
      layer.openPopup();
    };
    popupContent.src = "path/to/image";
    layer.bindPopup(popupContent, {
      maxWidth: "auto"

});

Copied content from http://jsfiddle.net/3v7hd2vx/32/

var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);

map.setView([48.85, 2.35], 12);

var marker, popupContent;

for (var i = 0; i < 1; i += 1) {
    marker = L.marker([48.85, 2.35]).addTo(map);
  popupContent = document.createElement("img");
  popupContent.onload = function () {
    marker.openPopup();
  };
  popupContent.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Stack_Exchange_logo_and_wordmark.svg/375px-Stack_Exchange_logo_and_wordmark.svg.png";
  //popupContent = '<img src="http://c4.staticflickr.com/1/691/21131215939_49601d06ef_b.jpg" />';
  marker.bindPopup(popupContent, {
    maxWidth: "auto"
  });
}

marker.openPopup();

For reference : https://stackoverflow.com/questions/38170366/leaflet-adjust-popup-to-picture-size

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.