Hfrhyu

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.

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