Python newbie here, so apologies upfront.

I created a simple shapefile circle_10km.shp that plots a circle around a coordinate in Belgium. If I use the “standard” way to show this on a folium map, it works perfectly:

    import geopandas as gpd
    import folium
    import os

    gdf = gpd.read_file('circle_10km.shp')
    center = [50.5, 4.5]  # Replace with your coordinates
    m = folium.Map(location=center, zoom_start=12)
    geojson_data = gdf.to_json()
    folium.GeoJson(gdf).add_to(m)
    m.save('map.html')  # Save the map as an HTML file

However, as I want to add and delete shapes from my map (as I successfully accomplished with markers), I wish to use a java script to do this. Cleaned-up, it looks like:

``        <script>
            var map = L.map('map').setView([50.8503, 4.3517], 8);
        
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map).on('load', function() {
                });

            function addGeoJson(geoJsonData) {
                L.geoJSON(geoJsonData).addTo(map)
            }                    
        </script>`
`(

a function addMarker worked here like this).

From Python i then call the function like:

    def execute_js(self, script):
        print(f'Executing JS: {script}')  # Debugging statement
        self.map_view.page().runJavaScript(script, self.javascript_callback)

    def javascript_callback(self, result):
        print(f'JavaScript execution result: {result}')

    def load_shape_file(self):
        shapefile_path = 'circle_10km.shp'
        gdf = gpd.read_file(shapefile_path)
    
        geojson_data = gdf.to_json()
        geojson_data = json.loads(geojson_data)
        script = f"""
        console.log('Executing addGeoJsonToGroup');
        addGeoJson({geojson_data});
        """
        
        self.execute_js(script)

All works fine within Python, but nothing appears on the map.

Please help!?

added some console debugging statements and map is loaded normally and correctly (adding a console statement in the function did not show anything, but did neither in the perfectly-working marker-function).

ChatGPT suggest the JSON data looks ok.