search

bozdoz / wp-plugin-leaflet-map

Add leaflet maps to Wordpress with shortcodes
https://wordpress.org/plugins/leaflet-map/
GNU General Public License v2.0
141 stars 72 forks source link

Popup width #166

Closed MrZaibot closed 1 year ago

MrZaibot commented 2 years ago

Is it possible to set width of a marker popup?

I'm trying to add images into a popup but the image is very small. img width=500 doesn't matter, nor do img style="width:500px" (see image 1) div style="width:500px" works but the popup doesn't change in size. (see image 2)

pop pop2

Thanks a lot!

hupe13 commented 2 years ago

Try

[leaflet-marker iconUrl="..."  iconSize="..,.."  iconAnchor="..,.."  popupAnchor="..,.."  lat=... lng=...]
<div style=width:15ch;>some text</div> <br><img style="max-height:15ch;max-width:15ch;object-fit:cover;" src="url of picture" alt="image">
[/leaflet-marker]

You may need to adjust "15ch".

GaryHeaven commented 2 years ago

+1 on this. The Popup property maxWidth defaults to 300 in leaflet.js (Leaflet/Popup.js) That in turn gets rendered with an inline style. I have not been able to find a way of overriding this - maybe someone out there can point me in the right direction. Editing a local copy of leafletjs to set the default maxWidth to a large number lets me control the popup width with css. Too ugly.

GaryHeaven commented 2 years ago

Also I asked the same question of the leaflet folks and it turns out that it is an ancient compatibility issue.. https://github.com/Leaflet/Leaflet/discussions/8441#discussioncomment-3648170

bozdoz commented 1 year ago

Looks like there's a solution