Help needed with ImageOverlay

[jsa91]

Hello,

I'm trying to fit a static .png image over Sweden using the ImageOverlay function. The reason for this is that I'm using the generated HTML file on an offline client. My goal is to take a static OpenStreetMap layer, export it as a .png, and then fit it within the borders of the attached GeoJSON file sweden.geojson (attatched as sweden.json).

sweden.json

I've tried using the "bounds" properties, but I'm struggling to scale the .png correctly to match the GeoJSON borders. Could someone provide an example to help me with this?

from offline_folium import offline
import folium

map = folium.Map(location=[62.8908901, 14.7062431], zoom_start=6, tiles='OpenStreetMap')

bordersStyle = {
    'color': 'green',
    'weight': 2,
    'fillColor': 'blue',
    'fillOpacity': 0.2
}

folium.GeoJson(
    data=(open("sweden.geojson", 'r').read()),
    name="Sweden",
    style_function=lambda x: bordersStyle
).add_to(map)

folium.raster_layers.ImageOverlay(
    name="static map",
    image="static_map.png",
    bounds=[[120, -60], [-60, 120]],
    opacity=0.6,
    interactive=True,
    cross_origin=False,
    zindex=1,
).add_to(map)

folium.LayerControl().add_to(map)

map.save("map.html")
map

[reddy895]

Hi! The issue is likely with the bounds values. ImageOverlay expects geographic coordinates in this format:

bounds = [[south_lat, west_lon], [north_lat, east_lon]]

Your current values contain latitudes of 120 and -60, so the overlay cannot align correctly with the map.

You can calculate the bounding box from your GeoJSON file instead of guessing the coordinates:

import json

with open("sweden.geojson", "r") as f:
    sweden = json.load(f)

# GeoJSON coordinates use [longitude, latitude]
def get_coords(obj):
    if obj["type"] == "FeatureCollection":
        for feature in obj["features"]:
            yield from get_coords(feature["geometry"])
    elif obj["type"] == "Feature":
        yield from get_coords(obj["geometry"])
    elif obj["type"] == "GeometryCollection":
        for geom in obj["geometries"]:
            yield from get_coords(geom)
    elif obj["type"] == "Polygon":
        for ring in obj["coordinates"]:
            yield from ring
    elif obj["type"] == "MultiPolygon":
        for polygon in obj["coordinates"]:
            for ring in polygon:
                yield from ring
    else:
        # Handles Point, MultiPoint, LineString and MultiLineString
        def flatten(coords):
            if isinstance(coords[0], (int, float)):
                yield coords
            else:
                for child in coords:
                    yield from flatten(child)
        yield from flatten(obj["coordinates"])

coords = list(get_coords(sweden))
lons = [p[0] for p in coords]
lats = [p[1] for p in coords]

bounds = [[min(lats), min(lons)], [max(lats), max(lons)]]

folium.raster_layers.ImageOverlay(
    image="static_map.png",
    bounds=bounds,
    opacity=0.6,
).add_to(map)

One important detail: this only places the image across Sweden's geographic bounding box. It won't automatically align the image's roads or coastlines with the GeoJSON. For accurate alignment, the PNG must cover the same geographic extent and use a compatible map projection. If the image was exported from a map, make sure its crop and projection match the intended bounds.

Also, offline_folium may help package the HTML dependencies for offline use, but the image file itself must also be accessible to the offline client.

Hope this helps!