pixelated images when needed (#176)

* pixelated images when needed

* black formatted

.gitignore

@@ -77,5 +77,5 @@ package-lock.json
 .envrc
 
 .streamlit/
-
+.venv/
 test-results.xml

examples/pages/image_overlay.py

@@ -0,0 +1,46 @@
+import folium
+import streamlit as st
+
+from streamlit_folium import st_folium
+
+st.set_page_config(
+    layout="wide",
+    page_title="streamlit-folium documentation: Misc Examples",
+    page_icon="random",
+)
+"""
+# streamlit-folium: Image Overlay
+
+By default, st_folium renders images using browser image rendering mechanism.
+Use st_folium(map, pixelated=True) in order to see image pixels without resample.
+"""
+
+url_image = "https://i.postimg.cc/kG2FSxSR/image.png"
+image_bounds = [[-20.664910, -46.538223], [-20.660001, -46.532977]]
+
+m = folium.Map()
+m1 = folium.Map()
+
+folium.raster_layers.ImageOverlay(
+    image=url_image,
+    name="image overlay",
+    opacity=1,
+    bounds=image_bounds,
+).add_to(m)
+folium.raster_layers.ImageOverlay(
+    image=url_image,
+    name="image overlay",
+    opacity=1,
+    bounds=image_bounds,
+).add_to(m1)
+
+m.fit_bounds(image_bounds, padding=(0, 0))
+m1.fit_bounds(image_bounds, padding=(0, 0))
+
+col1, col2 = st.columns(2)
+with col1:
+    st.markdown("## Pixelated off")
+    st_folium(m, use_container_width=True, pixelated=False, key="pixelated_off")
+with col2:
+    st.markdown("## Pixelated on")
+    st_folium(m1, use_container_width=True, pixelated=True, key="pixelated_on")

streamlit_folium/__init__.py

@@ -209,6 +209,7 @@ def st_folium(
     return_on_hover: bool = False,
     use_container_width: bool = False,
     layer_control: folium.LayerControl | None = None,
+    pixelated: bool = False,
     debug: bool = False,
 ):
     """Display a Folium object in Streamlit, returning data as user interacts
@@ -251,6 +252,9 @@ def st_folium(
     layer_control: folium.LayerControl or None
         If you want to have layer control for dynamically added layers, you can
         pass the layer control here.
+    pixelated: bool
+        If True, add CSS rules to render image crisp pixels which gives a pixelated
+        result instead of a blurred image.
     debug: bool
         If True, print out the html and javascript code used to render the map with
         st.code
@@ -376,6 +380,7 @@ def bounds_to_dict(bounds_list: list[list[float]]) -> dict[str, dict[str, float]
         feature_group=feature_group_string,
         return_on_hover=return_on_hover,
         layer_control=layer_control_string,
+        pixelated=pixelated,
     )
 
     return component_value

streamlit_folium/frontend/src/index.tsx

@@ -144,6 +144,29 @@ function onLayerClick(e: any) {
   debouncedUpdateComponentValue(window.map)
 }
 
+function getPixelatedStyles(pixelated: boolean)  {
+  if (pixelated) {
+    const styles = `
+    .leaflet-image-layer {
+      /* old android/safari*/
+      image-rendering: -webkit-optimize-contrast;
+      image-rendering: crisp-edges; /* safari */
+      image-rendering: pixelated; /* chrome */
+      image-rendering: -moz-crisp-edges; /* firefox */
+      image-rendering: -o-crisp-edges; /* opera */
+      -ms-interpolation-mode: nearest-neighbor; /* ie */
+    }
+    `
+    return styles
+  }
+  const styles = `
+  .leaflet-image-layer {
+  }
+  `
+  return styles
+
+}
+
 window.initComponent = (map: any, return_on_hover: boolean) => {
   map.on("click", onMapClick)
   map.on("moveend", onMapMove)
@@ -182,6 +205,7 @@ function onRender(event: Event): void {
   const feature_group: string = data.args["feature_group"]
   const return_on_hover: boolean = data.args["return_on_hover"]
   const layer_control: string = data.args["layer_control"]
+  const pixelated: boolean = data.args["pixelated"]
 
   if (!window.map) {
     // Only run this if the map hasn't already been created (and thus the global
@@ -241,6 +265,11 @@ function onRender(event: Event): void {
       const html_div = document.createElement("div")
       html_div.innerHTML = html
       document.body.appendChild(html_div)
+      const styles = getPixelatedStyles(pixelated)
+      var styleSheet = document.createElement("style")
+      styleSheet.innerText = styles
+      document.head.appendChild(styleSheet)
+
     }
   }