Hi,
I wish to create a Steamlit application that will allow me to display many Hillshade images (which I will create from many DEM files I have) on Streamlit. If possible I would like to use Streamlits Splitmap capability, where I can choose between the map types on each side, including Hillshade maps as one of the options to compare against say an Open Street Map.
I have been working with the tutorials like this one “https://www.youtube.com/watch?v=hn2WqRX75DI&list=LL&index=27”, which has given me a feeling of hope it’s possible, but there seems to be a big step between the option pages in this example and moving to adding in Hillshade images like I described.
I have read that it is best to convert DEM files into COG Hillshades when there are many files (which there are), but I still have no idea where to start.
For example:-
Is COG Hillshades the best way to go?
Can I simply store all the COG Hillshades locally in one directory and Streamlit will automatically know what to grab to display it?
Do I need to create multiple resolution versions of the Hillshade files to accomodate an efficient way to zoom in and out?
That all said, I’m still completely stumped as where to even start.
If someone could please help me this this I woud greatly appreciate it.
Thanks and regards,
Markus
Welcome to the community, Markus! Thanks for your thoughtful question and for sharing your learning journey so far.
Displaying many Hillshade images in Streamlit, especially with split map comparison, is definitely possible, but there are a few important considerations.
It could be possible that using COG (Cloud Optimized GeoTIFF) Hillshades is a good approach for handling many DEM-derived images, as COGs are designed for efficient access and tiling, especially when zooming and panning. However, Streamlit itself won’t automatically detect or tile COGs for you—you’ll need to handle file selection and rendering logic in your app. For displaying raster data (like Hillshades), you can use libraries such as rasterio to read the files and folium or streamlit-folium to overlay them on interactive maps. For split map (side-by-side) comparison, folium’s plugins (like DualMap or SplitMap) can be integrated, but you’ll need to manage the layers and user selection yourself. There’s no explicit mention in the data sources about Streamlit natively supporting split map or automatic multi-resolution tiling, so you may need to preprocess your Hillshades at different resolutions or use a tiling server for best performance with large datasets. See discussions and code examples in the community for GeoTIFF/COG handling, folium overlays, and dynamic map updates.
If you’d like more detail, including a step-by-step code example or guidance on setting up the file structure and map comparison logic, just let me know! And if you have a minimum reproducible example or a repo, please share it so the community can jump in with more targeted help. Community members—feel free to chime in with your own experiences or code snippets!
Sources:
Thank you very much for the reply and helpful advice.
I’ll have a look through the code examples and see what I can learn and understand from them and then try and put something coherent on my GitHub to share
.
Out of interest, the Youtube example I shares previously made mention of and used Leafmap. Which made me think I’d need that for my project, but it appears not, based on your suggestions? Could you please tell me why that is?
I’ve done some reading up on Leafmap (https://leafmap.org/):-
Leafmap is a Python package for interactive mapping and geospatial analysis with minimal coding in a Jupyter environment.
but folloing that informative paragraph, it mentions a lot of associated packages I know nothing about, so my overall understanding of Leafmap is not much better than the single paragraph I provided
.
p.s. the folium overlays link seems to be broken.