Сохранение масштаба и центра карты в Shiny для Python с Folium при смене слоя карты ⇐ Python

[Anonymous]

Я работаю над проектом по визуализации прогнозов погоды с помощью Shiny для Python и Folium. Цель состоит в том, чтобы позволить пользователям взаимодействовать с ползунком, чтобы выбрать прогнозируемое время и отобразить соответствующие данные о погоде на карте.
Проблема, с которой я сталкиваюсь:
Каждый раз Когда пользователь меняет прогнозируемое время с помощью ползунка, карта возвращается к исходному уровню масштабирования и центральному положению. В идеале я бы хотел, чтобы карта сохраняла текущий масштаб и центр даже при переключении отображаемого слоя (т. е. прогнозируемого времени).
Я пытался реализовать собственный JavaScript в приложении. чтобы зафиксировать изменения масштаба и центра и повторно применить их после обновления слайдера, но, похоже, это не работает должным образом. Масштаб и центр всегда сбрасываются до исходных значений, определенных при первом создании карты. При проверке исходного кода веб-приложения выяснилось, что мой JavaScript неправильно интегрирован с остальной частью приложения.
Моя настройка:
Shiny для Python для веб-приложения структура.
Folium для рендеринга карты и добавления данных о погоде в виде слоев.
Ползунок для выбора различных прогнозируемых временных шагов.
Попытка использовать JavaScript для захвата и восстановления настроек вида карты (масштабирование). уровень и центр) при изменении ползунка.
Вопрос:
Можно ли сохранить уровень масштабирования и центр карты при обновлении при изменении времени прогноза, используя мой текущий стек (вероятно, аналогично In Shiny, как исправить (заблокировать) масштабирование и центрирование изображения карты-листовки?, только в Python, а не в R)? Если да, то как мне правильно включить JavaScript для достижения этой цели?
Это самая короткая версия, в которой все еще проявляется проблема:
from shiny import App, render, ui
import folium

# Define the Shiny UI
app_ui = ui.page_fluid(
ui.h2("Dynamic Folium Map with Layer Switching"),
ui.input_slider("layer_slider", "Choose Layer (1 = Marker, 2 = Circle)", min=1, max=2, value=1),
ui.output_text_verbatim("slider_value"),
ui.output_ui("map") # Output container for the map
)

# Define the Shiny server
def server(input, output, session):

# Display the slider value
@output
@render.text
def slider_value():
return f"Layer selected: {input.layer_slider()}"

# Generate and display the map dynamically
@output
@render.ui
def map():

# Create a base map centered on Germany
m = folium.Map(location=[51.1657, 10.4515], zoom_start=6)

# Add layers depending on the slider value
if input.layer_slider() == 1:
folium.Marker([51.1657, 10.4515], popup="Marker in Germany").add_to(m)
elif input.layer_slider() == 2:
folium.Circle([51.1657, 10.4515], radius=50000, color='blue', popup="Circle Layer").add_to(m)

# Return the map as an HTML string
map_html = m._repr_html_()

# Add custom JavaScript to preserve zoom level and map center
custom_js = """

let mapZoom = 6;
let mapCenter = [51.1657, 10.4515];

// Function to capture map's zoom and center
function captureMapState() {
mapZoom = map.getZoom();
mapCenter = map.getCenter();
}

// Function to restore map's zoom and center
function restoreMapState() {
map.setView(mapCenter, mapZoom);
}

// Capture state after zoom or move events
map.on('zoomend', captureMapState);
map.on('moveend', captureMapState);

// Restore the view after the map is updated
document.addEventListener('DOMContentLoaded', function() {
restoreMapState();
});

"""

# Embed the map and attach the custom JavaScript
return ui.HTML(f"""

{map_html}

{custom_js}
""")

# Create the Shiny app
app = App(app_ui, server)

# Run the app
app.run(port=8000)



Подробнее здесь: https://stackoverflow.com/questions/790 ... anging-map