Vjylku

Can a flute soloist sit?

Can I visit the Trinity College (Cambridge) library and see some of their rare books

Is it ok to offer lower paid work as a trial period before negotiating for a full-time job?

Button changing its text & action. Good or terrible?

Do working physicists consider Newtonian mechanics to be "falsified"?

How to support a colleague who finds meetings extremely tiring?

How to determine omitted units in a publication

What force causes entropy to increase?

Fixing different display colors within string

Is an up-to-date browser secure on an out-of-date OS?

What is the padding with red substance inside of steak packaging?

How many Rusted Keys do you need to get red items most of the time?

Simulating Exploding Dice

Why not take a picture of a closer black hole?

Nested ellipses in tikzpicture: Chomsky hierarchy

What to do when moving next to a bird sanctuary with a loosely-domesticated cat?

60's-70's movie: home appliances revolting against the owners

number sequence puzzle deep six

"is" operation returns false even though two objects have same id

What's the point in a preamp?

how can a perfect fourth interval be considered either consonant or dissonant?

Why doesn't a hydraulic lever violate conservation of energy?

Didn't get enough time to take a Coding Test - what to do now?

Can the Right Ascension and Argument of Perigee of a spacecraft's orbit keep varying by themselves with time?

Image not showing on Hover but on click popup working, what I need to show both actions

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}

-1

What I want to make is to show an image through mouse hover on marker or polygon, and on click show a popup Property attributes information from GEOjson.
I can manage to show attributes by click but not able to show image on hover.
However image can view in console.log but on screen not appearing.
Below is what I want to make please help me.

leaflet geojson leaflet-draw

share|improve this question

edited Sep 22 '16 at 12:09

Kuntal Parbat

asked Sep 10 '16 at 7:00

Kuntal ParbatKuntal Parbat

84

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  

  
  
  
  

add a comment | 

-1

What I want to make is to show an image through mouse hover on marker or polygon, and on click show a popup Property attributes information from GEOjson.
I can manage to show attributes by click but not able to show image on hover.
However image can view in console.log but on screen not appearing.
Below is what I want to make please help me.

leaflet geojson leaflet-draw

share|improve this question

edited Sep 22 '16 at 12:09

Kuntal Parbat

asked Sep 10 '16 at 7:00

Kuntal ParbatKuntal Parbat

84

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  

  
  
  
  

add a comment | 

What I want to make is to show an image through mouse hover on marker or polygon, and on click show a popup Property attributes information from GEOjson.
I can manage to show attributes by click but not able to show image on hover.
However image can view in console.log but on screen not appearing.
Below is what I want to make please help me.

leaflet geojson leaflet-draw

share|improve this question

edited Sep 22 '16 at 12:09

Kuntal Parbat

asked Sep 10 '16 at 7:00

Kuntal ParbatKuntal Parbat

84

share|improve this question

edited Sep 22 '16 at 12:09

Kuntal Parbat

asked Sep 10 '16 at 7:00

Kuntal ParbatKuntal Parbat

84

share|improve this question

edited Sep 22 '16 at 12:09

Kuntal Parbat

asked Sep 10 '16 at 7:00

Kuntal ParbatKuntal Parbat

84

asked Sep 10 '16 at 7:00

Kuntal ParbatKuntal Parbat

84

asked Sep 10 '16 at 7:00

Kuntal ParbatKuntal Parbat

84

1 Answer
1

active

oldest

votes

0

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

share|improve this answer

edited 2 mins ago

MrXsquared

2,0111720

answered Sep 27 '16 at 5:06

Kuntal ParbatKuntal Parbat

84

add a comment | 

Your Answer

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "79"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f210205%2fimage-not-showing-on-hover-but-on-click-popup-working-what-i-need-to-show-both%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

0

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

share|improve this answer

edited 2 mins ago

MrXsquared

2,0111720

answered Sep 27 '16 at 5:06

Kuntal ParbatKuntal Parbat

84

add a comment | 

0

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

share|improve this answer

edited 2 mins ago

MrXsquared

2,0111720

answered Sep 27 '16 at 5:06

Kuntal ParbatKuntal Parbat

84

add a comment | 

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

share|improve this answer

edited 2 mins ago

MrXsquared

2,0111720

answered Sep 27 '16 at 5:06

Kuntal ParbatKuntal Parbat

84

    popupContent = document.createElement("img");

    popupContent.onload = function () {

      layer.openPopup();

    };

    popupContent.src = "path/to/image";

    layer.bindPopup(popupContent, {

      maxWidth: "auto"



});

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();

share|improve this answer

edited 2 mins ago

MrXsquared

2,0111720

answered Sep 27 '16 at 5:06

Kuntal ParbatKuntal Parbat

84

edited 2 mins ago

MrXsquared

2,0111720

edited 2 mins ago

MrXsquared

2,0111720

answered Sep 27 '16 at 5:06

Kuntal ParbatKuntal Parbat

84

answered Sep 27 '16 at 5:06

Kuntal ParbatKuntal Parbat

84