Spaces:
Sleeping
Sleeping
File size: 2,528 Bytes
2c255bc aa7ce45 2c255bc aa7ce45 2c255bc aa7ce45 2c255bc 52c9995 2c255bc 52c9995 2c255bc aa7ce45 2c255bc aa7ce45 2c255bc aa7ce45 2c255bc aa7ce45 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
import streamlit as st
import os
from PIL import Image
import base64
from io import BytesIO
# Adjust Streamlit layout to wide mode
st.set_page_config(layout="wide")
# Generate Map as an Image
def generate_map(image_files, canvas_size=(3000, 3000)):
canvas = Image.new("RGBA", canvas_size, "white")
if not image_files:
return canvas
grid_size = int(len(image_files) ** 0.5) + 1 # Calculate grid size
img_size = canvas_size[0] // grid_size # Size for each image cell
for idx, img_file in enumerate(image_files):
img_path = os.path.join(map_dir, img_file)
with Image.open(img_path) as img:
# Maintain aspect ratio
img.thumbnail((img_size, img_size), Image.ANTIALIAS)
# Calculate grid position
row, col = divmod(idx, grid_size)
x = col * img_size
y = row * img_size
# Paste the image on the canvas
canvas.paste(img, (x, y), mask=img if img.mode == "RGBA" else None)
return canvas
# Encode Image as Base64 for Leaflet
def encode_image_to_base64(image):
buffer = BytesIO()
image.save(buffer, format="PNG")
encoded = base64.b64encode(buffer.getvalue()).decode()
return encoded
# Directory for images
map_dir = "." # Replace with your directory containing images
image_files = [f for f in os.listdir(map_dir) if f.endswith(".png")]
# Generate the map
canvas_size = (3000, 3000)
canvas = generate_map(image_files, canvas_size)
encoded_image = encode_image_to_base64(canvas)
# Leaflet HTML Template
leaflet_html = f"""
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
#map {{
height: 100vh;
}}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Initialize the map
var map = L.map('map').setView([0, 0], 1);
// Add the image overlay
var bounds = [[-1500, -1500], [1500, 1500]];
var image = L.imageOverlay("data:image/png;base64,{encoded_image}", bounds).addTo(map);
// Set the map view to the bounds of the image
map.fitBounds(bounds);
// Add zoom controls
L.control.zoom({{
position: 'topright'
}}).addTo(map);
</script>
</body>
</html>
"""
# Embed Leaflet Map in Streamlit
st.title("Interactive Dungeon Map")
st.components.v1.html(leaflet_html, height=600)
|