simonw / datasette-cluster-map

Datasette plugin that shows a map for any data with latitude/longitude columns
Apache License 2.0
88 stars 16 forks source link

Feature request: render-images in pins #31

Open robmarkcole opened 3 years ago

robmarkcole commented 3 years ago

Hi Simon I have installed both this and datasette-render-images plugins and have a table with lat/lon and also a blob image I wish to display. However with both plugins installed the images are no longer rendered (they are if only render-images is installed). I assume there is some compatibility issue? Cheers

image

robmarkcole commented 3 years ago

Alright it seems I had not actually had the datasette-render-images installed at the time above. When installing with docker it seems only the last package installed was actually being commited. To get both installed I had to pip install them at the same time: docker run datasetteproject/datasette pip install datasette-render-images datasette-cluster-map

Doing this the images are rendered in the table, but it would be nice to see them in the pin also:

image

simonw commented 3 years ago

datasette-cluster-map has a mechanism for displaying images in the marker, but it works for images that have a URL - not for images that are stored directly in BLOB columns. https://datasette.io/plugins/datasette-cluster-map#user-content-custom-marker-popups

You can use https://datasette.io/plugins/datasette-media to set up URLs that can serve images directly from BLOB columns, so you could use the combination of datasette-cluster-map and datasette-media to solve this, but there would be quite a bit of configuration involved.

I wonder if this could be made simpler?

robmarkcole commented 3 years ago

The full sized images are actually stored on S3 in a private bucket, and these blobs are thumbnails for quick viewing. So it would be nice not to have the dependency on local files or public URL. Your suggestion of using datasette-media sounds fine, perhaps an example in the docs for config would suffice?

Alternatively here is what I am doing in folium, which might be helpful?

import folium
from folium import IFrame

# save thumbnail as 'tmp.jpg'
encoded = base64.b64encode(open('tmp.jpg', 'rb').read()).decode('UTF-8')
svg = f"""<object data="data:image/jpg;base64,{encoded}" width="1000" height="800 type="image/svg+xml"></object>"""

iframe = IFrame(svg, width=width*fat_wh, height=height*fat_wh)
popup  = folium.Popup(iframe, parse_html = True, max_width=2000)