Forums

dash_leaflet + javascript

Hi,

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"},
)

Do you see any problems in the dev tools of your browser?

Yep! I do see two errors that I don't see when it's working

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
react-dom@16.v2_7_0m1670302186.14.0.min.js:125:24
    Me https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:125
    payload https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:138
    Qb https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:66
    rh https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:99
    zj https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:228
    Th https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:152
    tj https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:152
    Te https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:146
    Pg https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:61
    unstable_runWithPriority https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react@16.v2_7_0m1670302186.14.0.min.js:25
    Da https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:60
    Pg https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:61
    ha https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:60
    Dj https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:163
    unstable_runWithPriority https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react@16.v2_7_0m1670302186.14.0.min.js:25
    Da https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:60
    xb https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:162
    Bj https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:162
    U https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react@16.v2_7_0m1670302186.14.0.min.js:16
    onmessage https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react@16.v2_7_0m1670302186.14.0.min.js:24
    (Async: EventHandlerNonNull)
    <anonymous> https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react@16.v2_7_0m1670302186.14.0.min.js:24
    <anonymous> https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react@16.v2_7_0m1670302186.14.0.min.js:9
    <anonymous> https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/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
dash_renderer.v2_7_0m1670302184.min.js:2:93489
    Ho https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_7_0m1670302184.min.js:2
    Oi https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_7_0m1670302184.min.js:2
    r https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_7_0m1670302184.min.js:2
    r https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_7_0m1670302184.min.js:2
    p https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_7_0m1670302184.min.js:2
    un https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_7_0m1670302184.min.js:2
    value https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_7_0m1670302184.min.js:2
    callback https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:139
    Wg https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:67
    oj https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:127
    Aj https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:160
    unstable_runWithPriority https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react@16.v2_7_0m1670302186.14.0.min.js:25
    Da https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:60
    ab https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:154
    Te https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:146
    Pg https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:61
    unstable_runWithPriority https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react@16.v2_7_0m1670302186.14.0.min.js:25
    Da https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:60
    Pg https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:61
    ha https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:60
    Dj https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:163
    unstable_runWithPriority https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react@16.v2_7_0m1670302186.14.0.min.js:25
    Da https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:60
    xb https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:162
    Bj https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react-dom@16.v2_7_0m1670302186.14.0.min.js:162
    U https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react@16.v2_7_0m1670302186.14.0.min.js:16
    onmessage https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react@16.v2_7_0m1670302186.14.0.min.js:24
    (Async: EventHandlerNonNull)
    <anonymous> https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react@16.v2_7_0m1670302186.14.0.min.js:24
    <anonymous> https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react@16.v2_7_0m1670302186.14.0.min.js:9
    <anonymous> https://mywebsite.pythonanywhere.com/_dash-component-suites/dash/deps/react@16.v2_7_0m1670302186.14.0.min.js:9

I also have this one (but it also appears when it's working, so I supposed it's not related...):

  • Error: Promised response from onMessage listener went out of scope (background.js:931:170)

That looks pretty deep inside React! I suspect this might be a difference between running it locally vs running it on a remote server (rather than on PythonAnywhere specifically), so perhaps someone on Stack Overflow might be able to help?

Indeed we will :-). I see that you've already got a comment there, so let's hope that's a useful pointer.

Ok, so from what I understand, I need to make sure that the dash_extensions package has been installed for javascript.

To do this, I tried to install the Node.js JavaScript runtime environment using nvm to access the npm commands, but I'm on a beginner:free session and couldn't complete the installation due to a storage limitation...

Am I missing something else (like another way to make sure this package is part of my installation)?

Free accounts are often unable to install stuff due to storage limit.