Visualize Geohash after Drawing it on same map

🧩 Custom Components
,
1

Hi Every ones , need some helps here, I’m still a rookie in this streamlit stuffs so feel free to give some feedback upon my codes. Here is the problems, I create tools using streamlit and Draw plugin, whenever user draw polygon on certain areas, it will create geohash visualizations. I have difficulty to overlay the geohash above drawing layer. Here is my code

import folium
import geopandas as gpd
import json
import numpy as np
import streamlit as st
from polygeohasher import polygeohasher
from shapely.geometry import Polygon
from shapely import wkt
from streamlit_folium import st_folium
from folium.plugins import Draw
from streamlit_folium import st_folium


button = st.number_input('Insert a Geohash number')
number = int(button)

c1, c2 = st.columns(2)
with c1:
    m = folium.Map([-6.175300560878783, 106.82701205991948],zoom_start=16)
    Draw(export=False).add_to(m)

    output = st_folium(m, width=1200, height=800)

    geojson_str = json.dumps(output)
    geojson_data = gpd.read_file(geojson_str, driver='GeoJSON')
    gdf = gpd.GeoDataFrame.from_features(geojson_data)


    geohash_gdf = polygeohasher.create_geohash_list(gdf, number,inner=False)
    geohash_gdf_list = polygeohasher.geohashes_to_geometry(geohash_gdf,"geohash_list")
    gpd_geohash_geom = gpd.GeoDataFrame(geohash_gdf_list, geometry=geohash_gdf_list['geometry'], crs="EPSG:4326")
    geojson_geohash = gpd_geohash_geom.to_json()
    folium.features.GeoJson(geojson_geohash,
                            tooltip = folium.GeoJsonTooltip(fields = ['geohash_list']),
                            style_function = lambda x:{
                                          'color': 'blue'                                      
                                     }).add_to(m)
with c2:
    st_folium(m, width=1200, height=800)

csv=gpd_geohash_geom.to_csv()
st.download_button(
    label="Download data as CSV",
    data=csv,
    file_name='geohash_file.csv',
    mime='text/csv',
)

Please help. Thanks

2

Hi @Mahardi_Setyoso

Thanks for your question. Could you provide more details on the specific difficulty that was encountered in relation to which specific code block. A screenshot with annotation would also help to explain the situation.

This may be helpful for allowing the community to assist and provide feedback or solution.

3

Hi @dataprofessor

Thanks for responding , I’ll try to explain my issues on a few points

  1. I try to built streamlit app that works such as, when you draw on maps and input geohash number , It will visualize the geohash on map before you download it as csv files to ensure that geohash covers area you need.

  2. Problems occurred when I try to visualize the geohash on same map window (video attached). Code only works when I split the map into 2 different windows. So first map window is used to draw and second window is to visualize the output.

screen-capture (2)

  1. I’m not sure which parts of code that I need to change or update. Here is latest code
import folium
import geopandas as gpd
import json
import numpy as np
import streamlit as st
from polygeohasher import polygeohasher
from shapely.geometry import Polygon
from shapely import wkt
from streamlit_folium import st_folium
from folium.plugins import Draw
from streamlit_folium import folium_static


button = st.number_input('Insert a Geohash number')
number = int(button)

m = folium.Map([-6.175300560878783, 106.82701205991948],zoom_start=16)
Draw(export=False).add_to(m)

output = st_folium(m, width=1200, height=800)

geojson_str = json.dumps(output)
geojson_data = gpd.read_file(geojson_str, driver='GeoJSON')
gdf = gpd.GeoDataFrame.from_features(geojson_data, crs="EPSG:4326")
geojson=gdf.to_json()


geohash_gdf = polygeohasher.create_geohash_list(gdf, number,inner=False)
geohash_gdf_list = polygeohasher.geohashes_to_geometry(geohash_gdf,"geohash_list")
gpd_geohash_geom = gpd.GeoDataFrame(geohash_gdf_list, geometry=geohash_gdf_list['geometry'], crs="EPSG:4326")
geojson_geohash = gpd_geohash_geom.to_json()

folium.GeoJson(
     geojson, 
     name="geojson",
     style_function = lambda x: {
        'color': 'red',
        'weight': 4,
        'interactive' : True
    }).add_to(m)

# Add the geohash layer on top of the drawing polygon layer
fg = folium.FeatureGroup(name="Geohash")
fg.add_child(folium.features.GeoJson(geojson_geohash,
                        tooltip = folium.GeoJsonTooltip(fields = ['geohash_list']), 
                        style_function = lambda x:{
                                          'color': 'blue'                                   
                                     })).add_to(m)


output = st_folium(m, feature_group_to_add=fg, width=1200, height=800)

csv=gpd_geohash_geom.to_csv()
st.download_button(
    label="Download data as CSV",
    data=csv,
    file_name='geohash_file.csv',
    mime='text/csv',
)

I suspect this part of code I need to update, but really don’t know what kind of code I need to write

folium.GeoJson(
     geojson, 
     name="geojson",
     style_function = lambda x: {
        'color': 'red',
        'weight': 4,
        'interactive' : True
    }).add_to(m)

# Add the geohash layer on top of the drawing polygon layer
fg = folium.FeatureGroup(name="Geohash")
fg.add_child(folium.features.GeoJson(geojson_geohash,
                        tooltip = folium.GeoJsonTooltip(fields = ['geohash_list']), 
                        style_function = lambda x:{
                                          'color': 'blue'                                   
                                     })).add_to(m)


output = st_folium(m, feature_group_to_add=fg, width=1200, height=800)

Please inform me if you need more detail

4

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.