Hello,
I am using dash leaflet to visualize locations on a map. I am utilizing the dl.GeoJSON class to prepare my data, as it supports a great range of functionality that I need (clustering, hover labels and also pop ups). I am having a bit of trouble getting the pop ups to work as I had hoped for.
For every location, I have an image (named by the location ID) which I want to show on click of the marker. These images are contained in the asset folder of my dash application, and integrating them to the map is very easy with all the nice dash leaflet functionality. For the geojson data attribute, I simply create the following dictionary
[
dict(
lat=row["latitude"],
lon=row["longitude"],
...
popup= f'<img src="/assets/pictures/{row["id"]}.png">'
)
for _, row in data.iterrows()
]
The issue I have is that I don’t want to set a fixed width
on the popup HTML, since all pictures have different dimensions. I would want them to be displayed however large they are. But if I just specify the geojson as above (i.e. without setting a fixed width for the popup image), on initial load of the map, the width of the container for the popup HTML does not scale with the image size.
Looking at the CSS, I can see that the width of the “leaflet-popup-content” div is set to 51px, which is much smaller than the image.
<div class="leaflet-popup-content-wrapper">
<div class="leaflet-popup-content" style="width: 51px;">
<img src="/assets/<some_id>.png">
</div>
</div>
If I click on that same marker again, the container is scaled correctly .
I guess the information on the width of the image is somehow not available initially when the container is drawn, but I would assume this to be quite a common use case to have images of varying sizes where I don’t want to fix the width.
Setting the following CSS
.leaflet-popup-content {
width: auto !important;
}
does yield a sensibly sized container, but then the popup shows up in the wrong location the first time I click on it (on the second click, it is again ok)
Does anyone have an idea on what is the correct way to do this (preferrable using only CSS/plotly dash python components and no self-written javascript if possible)?