Skip to content

Instantly share code, notes, and snippets.

@nickrsan

nickrsan/geopandas_in_the_browser.html

Last active June 1, 2023 12:51
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nickrsan/9e4513d2abb424f63fc4894a1319c8fc to your computer and use it in GitHub Desktop.
Save nickrsan/9e4513d2abb424f63fc4894a1319c8fc to your computer and use it in GitHub Desktop.
Download ZIP
A simple bit of code that uses PyScript and Piodide (under the hood) to run geopandas code in the browser. Not super interesting as is, but is a great starting point for further analysis and demos
Raw
geopandas_in_the_browser.html
<html>
<head>
<title>Mapping with PyScript</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<py-config>
packages = ["geopandas", "folium"]
</py-config>
<py-script>
import js
import geopandas
import folium
from pyodide.http import open_url
from pyodide.ffi import create_proxy
url = ( "https://raw.githubusercontent.com/Water-Systems-Management-UCM/Waterspout/release/waterspout_api/data/washington/WRIA/wrias_updated_simplified.geojson"
)
wria_data = geopandas.read_file(open_url(url))
# make the webmap object
webmap = folium.Map(location = [46, -121], zoom_start=10)
# now convert the geopandas data to json, then plot it
for _, r in wria_data.iterrows():
wria_json = geopandas.GeoSeries(r['geometry']).to_json()
folium_data = folium.GeoJson(data=wria_json,
style_function=lambda x: {'fillColor': 'orange'})
folium.Popup(r['WRIA_NM']).add_to(folium_data)
folium_data.add_to(webmap)
display(webmap)
</py-script>
<py-repl output="replOutput">
</py-repl>
<div id="replOutput"></div>
<py-terminal></py-terminal>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment