Generatore Mappa Europea (Python in JS)

Inizializzazione...

La mappa apparirà qui dopo aver premuto il pulsante.

Creiamo una singola pagina HTML che utilizza Pyodide per eseguire codice Python. Il codice Python, a sua volta, userà la libreria folium per generare una mappa interattiva dell'Europa e visualizzarla direttamente sulla pagina.

Questa è un'ottima dimostrazione di come Pyodide possa unire la potenza delle librerie Python con l'interattività del web.

Ecco il file HTML completo. Include:

Il caricamento di Pyodide.
Il caricamento di Leaflet (la libreria JavaScript su cui si basa folium per funzionare).
TailwindCSS per uno stile pulito.
Uno script JavaScript che inizializza Pyodide, installa folium e gestisce l'esecuzione del codice.
Un pulsante per avviare il processo e un contenitore per la mappa.

Spiegazione dei punti fondamentali:

Caricamento di Leaflet (CSS e JS): Questo è essenziale. folium (la libreria Python) genera solo l'HTML e il JavaScript per controllare una mappa Leaflet. Se non carichi la libreria Leaflet stessa (file .css e .js), il browser non saprà come interpretare l'HTML generato da folium e vedresti solo uno spazio vuoto.
Caricamento di Pyodide: Questo carica l'intero runtime Python nel browser.
Installazione di Folium: Usiamo micropip (il package manager di Pyodide) per installare folium e le sue dipendenze Python all'interno dell'ambiente virtuale del browser. Questo passaggio viene eseguito solo una volta al caricamento della pagina.
Esecuzione del Codice Python: Quando premi il pulsante, lo script JavaScript passa la stringa pythonCode a pyodide.runPythonAsync().
Restituzione dell'HTML: Il codice Python non salva un file. L'ultima riga, mappa._repr_html_(), è un metodo speciale che folium usa (comune in ambienti come Jupyter) per restituire la mappa come una stringa HTML. Pyodide cattura questo valore restituito.
Visualizzazione: Lo script JavaScript riceve questa stringa HTML (mapHtml) e la imposta come innerHTML del div con id="map-container". A quel punto, gli script di Leaflet (caricati al punto 1) si attivano e rendono la mappa interattiva.