Dash-Leaflet: Edit existing GeoJSON layer using EditControl

Dash Python
1

Hi

I’ve got the following callback, that takes a user uploaded shapefile, converts it to GeoJSON and shows it on the Dash Leaflet map. Unfortunately, I cannot get the corners / vertices of the supplied GeoJSON to be editable by the user. Can I please get some help with the correct workflow?

Callback to process the uploaded shapefile, convert to GeoJSON, and display on the map.

@dash_app.callback(
    Output("property-leaftlet-map", "children"),
    Input("property-upload-shp", "contents"),
)
def process_shapefile(contents: str) -> dict:
    """
    Process the uploaded shapefile, convert to GeoJSON, and display on the map.

    Args:
        contents (str): The contents of the uploaded shapefile.
    Returns:
        dict: The GeoJSON data.
    """

    if contents is None:
        return dash.no_update
    else:
        # Read the uploaded file and save to temporary directory
        content_type, content_string = contents.split(",")
        decoded = base64.b64decode(content_string)
        temp_file_name = uuid.uuid4().hex + ".zip"
        with open(temp_file_name, "wb") as f:
            f.write(decoded)

        # try:
        # Read the shapefile
        gdf = gpd.read_file(temp_file_name).to_crs(epsg=4326)

        # Convert to GeoJSON
        # centroid = gdf.centroid

        # Remove temporary file
        os.remove(temp_file_name)

        return dl.Map(
            center=[gdf.centroid.y[0], gdf.centroid.x[0]],
            zoom=15,
            children=[
                dl.FeatureGroup(
                    [
                        dl.GeoJSON(
                            data=gdf.__geo_interface__,
                            options={"style": {"color": "blue", "weight": 1}},
                            id="property-geojson",
                        ),
                        dl.EditControl(
                            id="property-geojson-edit-control",
                            position="topleft",
                            draw={
                                "polygon": True,
                                "polyline": False,
                                "rectangle": False,
                                "circle": False,
                                "marker": False,
                            },
                        ),
                    ],
                ),
                dl.TileLayer(
                    url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
                    attribution='&copy; <a href="http://www.esri.com/">Esri</a>, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
                ),
            ],
            style={"width": "100%", "height": "500px"},
        )

image
image1238×933 125 KB

2

Youll probably need to build out your own plugin, ive done some work in this field. Was able to get the editcontrol connected to a color picker so i can change the color of polygone shapes.

Id recomend looking through the leaflet plugins on leaflets official website. Something like this seems like what you’d be after: