(Likely) Bug: Adding geometries to FeatureCollection in EditControl

[JW-Kraft]

Hi there,

I encountered this issue while building a simple app using EditControl based on the example from the documentation.

There, a map is setup with a FeatureGroup containing EditControl and a Marker. The marker is then loaded into EditControl and the user can edit, delete or add new elements in the App while any changes or new elements are mirrored to the second map via the EditControl geojson.
This works fine until any other element than Marker are added as default.

dl.CircleMarker and dl.Circle

• added to both maps (so EditControl geojson) but breaks editing functions (editing of any elements, also newly drawn ones is not possible anymore).
• Scaling of the circle marker seems to be different between the two [1]

Any element with multiple coordinates (rectancle, polyline, polygon)

• Editing functions are not working anymore (deleting elements does work).
• No more synchronizations between map and mirror - so likely not passed to the EditControl geojson anymore.
• Causes this JS error:

Uncaught TypeError: Cannot use 'in' operator to search for '_shape' in undefined
    at ce (dash_leaflet.v1_0_15m1745501658.js:2:295235)
    at dash_leaflet.v1_0_15m1745501658.js:2:296659
    at Array.forEach (<anonymous>)
    at dash_leaflet.v1_0_15m1745501658.js:2:296631

I tried to understand the issue in the dash-leaflet core but my minimal JS knowledge makes it challenging.

• As far as I can see the error happens when binding the mount event for each layer (I assume that is each element added as child of the FeatureGroup) (here)
• There, _makeFeature is called (here)
• There seems to be the issue.

Sorry, I cannot identify it any further or provide a feasible solution. Maybe it is easy to fix for someone with experience though?

[1] identical CircleMarke has different radius in the original map and the mirror.

[pip-install-python]

I noticed something similar when building out:
https://dash.geomapindex.com/map_editor

in a callback I created I have:

@callback(
    Output("rendered-features-group", "children"),
    Input("edit_control", "geojson"),
    prevent_initial_call=True
)
def update_rendered_features(geojson_data):
    if not geojson_data or not geojson_data.get('features'): return []

    features_list = []
    for feature in geojson_data['features']:
        props = feature.get('properties', {})
        geometry = feature.get('geometry', {})
        geom_type = geometry.get('type')
        coordinates = geometry.get('coordinates')
        if not coordinates: continue

        leaflet_id = str(props.get('leafletId', props.get('_leaflet_id', 'unknown')))
        feature_color = props.get('color', DEFAULT_COLOR_HEX)
        feature_content = props.get('content', '')

...

 try:
            if geom_type == 'Point':
                feature_type = props.get('type')
                # Ensure coordinates are floats
                lon = float(coordinates[0]) if coordinates[0] is not None else None
                lat = float(coordinates[1]) if coordinates[1] is not None else None
                if lon is None or lat is None: continue


                if feature_type == 'marker':
                    marker_children = [Popup(children=[edit_menu_content], closeOnClick=True, maxWidth=400)]

                    marker_icon_object = None  # Default Leaflet icon
                    emoji_src = props.get('emoji')
                    if emoji_src:
                        # CORRECTED: Use dl.Icon for custom image markers
                         # Marker uses 'icon', Icon uses 'iconUrl'
                        marker_icon_object = dl.Marker(iconUrl=emoji_src, iconSize=[25, 25], iconAnchor=[12.5, 12.5])


                    features_list.append(
                        Marker(
                            position=[lat, lon],
                            icon=marker_icon_object,  # Pass the Icon object here
                            children=marker_children,
                            id=f"marker-{leaflet_id}"
                        )
                    )
                elif feature_type == 'circlemarker':
                    radius = props.get('radius', props.get('_radius', 10))
                    features_list.append(
                        CircleMarker(
                            center=[lat, lon], radius=float(radius), color=feature_color, fillColor=feature_color,
                            fillOpacity=0.2, opacity=0.5, weight=1, children=[shape_popup],
                            id=f"circlemarker-{leaflet_id}"
                        )
                    )
                elif props.get('type') == 'circle':
                    # Handle circle feature
                    # Leaflet EditControl stores circle radius in _mRadius property
                    radius = props.get('_mRadius')
                    if radius is not None:
                         features_list.append(
                            Circle(center=[lat, lon], radius=float(radius), pathOptions=path_options,
                                   children=[shape_popup], id=f"circle-{leaflet_id}")
                        )
                    else:
                        print(f"Skipping circle {leaflet_id} due to missing _mRadius property")


            elif geom_type == 'LineString':
                # Ensure coordinates are floats
                positions = [[float(pt[1]), float(pt[0])] for pt in coordinates if pt and len(pt) == 2 and pt[0] is not None and pt[1] is not None]
                if len(positions) > 0:
                     features_list.append(
                        Polyline(positions=positions, pathOptions=path_options, children=[shape_popup],
                                 id=f"polyline-{leaflet_id}")
                     )
                else:
                    print(f"Skipping polyline {leaflet_id} due to invalid coordinate structure: {coordinates}")


            elif geom_type == 'Polygon':
                # Ensure coordinates are floats and handle potential nesting
                processed_positions = []
                if coordinates and isinstance(coordinates, list) and len(coordinates) > 0:
                     # Polygon coordinates can be [ [[lat,lon], [lat,lon], ...]] for a simple polygon
                     # or [ [[lat,lon],...], [[lat,lon],...] ] for a polygon with holes.
                     # EditControl typically gives [ [[lat,lon], ...]] for simple polygons.
                     # We expect the outer ring to be the first list in the main list.
                    outer_ring = coordinates[0] # Get the main polygon ring
                    if outer_ring and isinstance(outer_ring, list) and len(outer_ring) > 0:
                        # Handle potential extra nesting like [[[lat,lon],...]] -> [[lat,lon],...]
                        if len(outer_ring) == 1 and isinstance(outer_ring[0], list) and len(outer_ring[0]) > 1:
                             # Found extra nesting, use the inner list
                             positions = [[float(pt[1]), float(pt[0])] for pt in outer_ring[0] if pt and len(pt) == 2 and pt[0] is not None and pt[1] is not None]
                        else:
                             # Assume direct list of points
                             positions = [[float(pt[1]), float(pt[0])] for pt in outer_ring if pt and len(pt) == 2 and pt[0] is not None and pt[1] is not None]

                        if len(positions) > 0:
                            # Leaflet expects [lat, lon] for positions, GeoJSON is [lon, lat]
                            # positions list is already correctly [lat, lon]
                             processed_positions.append(positions)

                        # Handle holes - EditControl doesn't typically draw holes directly,
                        # but if the GeoJSON includes them, you'd process coordinates[1:], etc.
                        # For simplicity, we'll just handle the first ring (outer boundary) as EditControl does.


                if len(processed_positions) > 0:
                    # Polygon positions prop expects a list of rings [[outer], [hole1], ...]
                    features_list.append(
                        Polygon(positions=processed_positions, pathOptions=path_options, children=[shape_popup],
                                id=f"polygon-{leaflet_id}")
                    )
                else:
                    print(f"Skipping polygon {leaflet_id} due to invalid coordinate structure or empty processed positions: {coordinates}")


        except (TypeError, IndexError, ValueError, KeyError) as e:
            print(f"Error processing feature {leaflet_id} ({geom_type}) for main map: {e}")
            print(f"Feature data: {feature}")
            continue

Basically what I noticed is I could collect the geojson being created prior to returning it to the FeatureGroup. For me, the issue with circle was it was using float(radius) and not _mRadius when I started replacing the mirror with the drawn _mRadius value it resolved me circle size error for me.