I display a marker with a popup window. The popup display an image.
I would like to open a website if the user click on the image.
I did that:
Popup = "<div><a href='http:...'><iframe src='" + m.image + "' scrolling='no' frameBorder='0' style='border:none;' ></iframe></a></div>";
marker.bindPopup(Popup).openPopup();
When I mousemove on the image I have a zoom icon (I was expected a hand icon).
If I click on the image, this one is zoomed.
Do you see my mistake(s) ?
Note #1: I styled a custom className (copy from another question):
<style>
.custom-popup .leaflet-popup-content-wrapper {
background:#2c3e50;
color:#fff;
font-size:16px;
line-height:24px;
}
.custom-popup .leaflet-popup-content-wrapper a {
color:rgba(255,255,255,0.5);
}
.custom-popup .leaflet-popup-tip-container {
width:30px;
height:15px;
}
.custom-popup .leaflet-popup-tip {
border-left:15px solid transparent;
border-right:15px solid transparent;
border-top:15px solid #2c3e50;
}
</style>
I defined options:
var options =
{
'maxWidth': '400',
'width' : '300',
'className': 'custom-popup'
}
And finally create the popup:
Popup+= "<div><a href='https://google.com'><img src='" + (BASE_URL || '') + m.image + "' /></a></div>";
result.bindPopup(potentialPopup,options).openPopup();
Colors change but the size of the popup doesn't change and the image is very small ???
leaflet-popup-content-wrapper 91x62
leaflet-popup-content-img 51x34
Note #2: I added in the style:
img {
height:350px;
width:700px;
}
and changed the options:
var options =
{
//'maxWidth': '400',
//'width' : '300',
'className': 'custom-popup'
}
and ... the popup/image height changed ! but not the width ?
Note #3: Here is the solution
.custom-popup div.leaflet-popup-content {
min-Width: 300px;
max-Width: 300px;
}
Don't ask why !!!
Thank you to @mplungjan for his help !
Do not wrap an iFrame in an anchor since it is not valid HTML and won't link the content of the iFrame.
A div and an achor will adapt their size to content:
const m = { image: "https://i.imgur.com/k5QOP26.jpeg" }
const popup = "<div><a href='https://...'><img src='" + m.image + "'/></a></div>";
document.body.innerHTML += popup;
/* css 1 */
img { height: 50px }
/* css 2 */
img { height: 350px }
Popup= "<div><a href='google.com'><src='" + m.image + "' scrolling='no' frameBorder='0' style='border:none;' /></a></div>"; doesn't work for me. The window is very small (height 15px)
If it is it is because you have CSS that resizes it
See update with an example
I guess you are right ! leaflet.css defines classes. Is it possible to supersede them ?
Sure. Add your CSS after their css file and possibly add !important after the statement