3

I'm trying to display some maps using GeoJSON from dash_leaflet, and it works fine, but for performance reasons I have to use javascript to change the way the points are displayed. Locally it works fine, but as soon as I upload my code to pythonanywhere, the map is displayed but not the points. If I comment the argument options (in the code below), the points are displayed, but not the way I wanted, which causes the performance issue...

import dash_leaflet as dl
from dash_extensions.javascript import assign

# Geojson rendering logic, must be JavaScript 
# as it is executed in clientside.
point_to_layer = assign(
    """function(feature, latlong, context){
    const {circleOptions} = context.props.hideout;
    return L.circleMarker(latlong, circleOptions);  
}"""
)

main_map = dl.Map(
    children=[
        dl.LayersControl(
            children=[
                dl.BaseLayer(
                    dl.TileLayer(),
                    name="Background",
                    checked=True,
                )
            ]
            + [
                dl.Overlay(
                    dl.GeoJSON(
                        id="dives_data",
                        format="geobuf",
                        zoomToBounds=True,
                        # comment options make it works...
                        options=dict(
                            pointToLayer=point_to_layer
                        ),  
                        hideout=dict(
                            circleOptions=dict(fillOpacity=1, 
                                               stroke=False,
                                               radius=5)
                        ),
                    ),
                    checked=True,
                    id="overlay_dive_map",
                    name="Data",
                )
            ],
            id="layer_data",
        ),
    ],
    center=(37, -140),
    zoom=5,
    style={"width": "100%", "height": "87vh", "margin": "auto"},
)

I opened a topic on pythonanywhere's forum (https://www.pythonanywhere.com/forums/topic/32111/#id_post_107799), and looked at the problems in the dev tools of my browser as suggested by the staff. I found these two problems:

Error: No match for [dashExtensions.default.function0] in the global window object.
    r index.js:33
    r index.js:18
    o index.js:53
    value React
    Ie react-dom@16.v2_7_0m1670302186.14.0.min.js:104
    rh react-dom@16.v2_7_0m1670302186.14.0.min.js:103
    zj react-dom@16.v2_7_0m1670302186.14.0.min.js:228
    Th react-dom@16.v2_7_0m1670302186.14.0.min.js:152
    tj react-dom@16.v2_7_0m1670302186.14.0.min.js:152
    Te react-dom@16.v2_7_0m1670302186.14.0.min.js:146
    Pg react-dom@16.v2_7_0m1670302186.14.0.min.js:61
    unstable_runWithPriority react@16.v2_7_0m1670302186.14.0.min.js:25
    Da react-dom@16.v2_7_0m1670302186.14.0.min.js:60
    Pg react-dom@16.v2_7_0m1670302186.14.0.min.js:61
    ha react-dom@16.v2_7_0m1670302186.14.0.min.js:60
    Dj react-dom@16.v2_7_0m1670302186.14.0.min.js:163
    unstable_runWithPriority react@16.v2_7_0m1670302186.14.0.min.js:25
    Da react-dom@16.v2_7_0m1670302186.14.0.min.js:60
    xb react-dom@16.v2_7_0m1670302186.14.0.min.js:162
    Bj react-dom@16.v2_7_0m1670302186.14.0.min.js:162
    U react@16.v2_7_0m1670302186.14.0.min.js:16
    onmessage react@16.v2_7_0m1670302186.14.0.min.js:24
    EventHandlerNonNull* react@16.v2_7_0m1670302186.14.0.min.js:24
    <anonymous> react@16.v2_7_0m1670302186.14.0.min.js:9
    <anonymous> react@16.v2_7_0m1670302186.14.0.min.js:9
    ...

and

Error: No match for [dashExtensions.default.function0] in the global window object.
    r index.js:33
    r index.js:18
    o index.js:53
    value React
    Ie react-dom@16.v2_7_0m1670302186.14.0.min.js:104
    rh react-dom@16.v2_7_0m1670302186.14.0.min.js:103
    zj react-dom@16.v2_7_0m1670302186.14.0.min.js:228
    Th react-dom@16.v2_7_0m1670302186.14.0.min.js:152
    tj react-dom@16.v2_7_0m1670302186.14.0.min.js:152
    Te react-dom@16.v2_7_0m1670302186.14.0.min.js:146
    Pg react-dom@16.v2_7_0m1670302186.14.0.min.js:61
    unstable_runWithPriority react@16.v2_7_0m1670302186.14.0.min.js:25
    Da react-dom@16.v2_7_0m1670302186.14.0.min.js:60
    Pg react-dom@16.v2_7_0m1670302186.14.0.min.js:61
    ha react-dom@16.v2_7_0m1670302186.14.0.min.js:60
    Dj react-dom@16.v2_7_0m1670302186.14.0.min.js:163
    unstable_runWithPriority react@16.v2_7_0m1670302186.14.0.min.js:25
    Da react-dom@16.v2_7_0m1670302186.14.0.min.js:60
    xb react-dom@16.v2_7_0m1670302186.14.0.min.js:162
    Bj react-dom@16.v2_7_0m1670302186.14.0.min.js:162
    U react@16.v2_7_0m1670302186.14.0.min.js:16
    onmessage react@16.v2_7_0m1670302186.14.0.min.js:24
    EventHandlerNonNull* react@16.v2_7_0m1670302186.14.0.min.js:24
    <anonymous> react@16.v2_7_0m1670302186.14.0.min.js:9
    <anonymous> react@16.v2_7_0m1670302186.14.0.min.js:9
    ...
qpjf894c
  • 31
  • 2
  • 1
    Make sure dash_extensions is installed. Run `npm install dash_extensions` to install it if it isn't. Then try using `import { assign } from 'dash_extensions';` – Shubham Garg Dec 06 '22 at 20:08

0 Answers0