[Bug][Jupyter Widget] Hexbin fails with EnhancedColumnLayer TypeError

[miccferr]

Describe the bug Kepler fails to load an hexbin map widget with error:

deck: error during initialisation of EnhancedColumnLayer({id: 'lifibkk-hexagon-cell'}) TypeError: Class constructor o cannot be invoked without 'new'

To Reproduce Steps to reproduce the behavior:

1. load kepler
2. Add data: GeoDataFrame with hex_id column containing H3 hashes at resolution 5,6
3. Try to load map

Expected behavior

An interactive map widget should be displayed. It works at resolution 5, but fails for hashes at resolution 6.

Screenshots If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• Python version: 3.7.7
• keplergl Widget version: 0.3.2

Additional context I tried loading the same data on the demo website and it works.

Within Jupyter, I also converted the hashes to lat/lon points and they are correctly loaded in the expected location

[iasymmetric]

Yes I am getting a similar error. When I try to add H3 cells (resolution 10) to the map, it fails to render, only showing a white screen. GeoJSON renders fine though. I'm running Jupyter Notebook on VScode. Interestingly, it was working in the same environment less than 2 weeks ago. I think VScode may have updated within that time, so perhaps that's what's led to this issue.

Environment Python: 3.9.7 Keplergl: 0.3.0

Additional context I'm still able to render the H3 cells on kepler if I run Jupyter Notebook on the classic interface (ie not on VScode), however if I recreate my environment, using the most up to date package versions, I run into the same problem I'm having on VScode (H3 layers prevent map from rendering, while other layers work fine). This leads me to believe it was an update to one of the notebook or widget packages that's causing the issue

[shern2]

Thank you for this useful tool. I have a similar error. Have tested all the notebooks in https://github.com/keplergl/kepler.gl/tree/master/bindings/kepler.gl-jupyter/notebooks All worked, except for the hexbin one. This one shows blank screen.

Error Chrome console shows errors like:

deck: error during initialization of EnhancedColumnLayer({id: 'jdys7lp-hexagon-cell'}) TypeError: Class constructor o cannot be invoked without 'new' TypeError: Class constructor o cannot be invoked without 'new'

The error suggests it's related to the deck.gl version issues e.g. https://github.com/keplergl/kepler.gl/issues/1601 But am confused why it's still occurring, since the fix seems to be fixing the version to deck.gl 8.2.0 as per https://github.com/keplergl/kepler.gl/pull/1602

Hope you can assist. Thanks!

Environment python: 3.9.7 Keplergl: 0.3.2 node: v14.13.0

[shern2]

Update: Surprisingly In Google Colab, hexbin shows up correctly..:

Colab env python: 3.7.12 Keplergl: 0.3.2 node: v14.16.0

[Sandbird]

When you save_to_html though, the example works. I think this is the reason why it's not working. The call to mapbox.com is not getting an answer back.. The html way..sends a Null as origin....i dont know how...but does get an answer back.

[JanKleine]

Hi,

Is there an update on this? I have the same issue, both in jupyter in the browser and in VSCode.

To give a minimal example, I was able to reproduce the issue with the example from the kepler-jupyter README:

csvData = "hex_id,value\n89283082c2fffff,64\n8928308288fffff,73\n89283082c07ffff,65\n89283082817ffff,74\n89283082c3bffff,66"

map = KeplerGl()
map.add_data(data=csvData, name="data")
map

I was also able to get these error messages by loading the data but not displaying them to a layer yet (by overwriting the config) and then manually creating a layer with the data :

[inmesan]

Same here. Please, any update on this? Any older version working OK?

[inmesan]

However, the Demo version at kepler.gl works fine...

[sinannoureddine]

Is there any update on this?

That's weird that's a very common issue and it hasn't been resolved yet

[Sandbird]

I dont remember how i solved this...but at some point i was looking at the accesstoken key. I think the dark theme is under a private token. Try creating a new token at mapbox.com and use that accesstoken instead. Maybe create the same dark theme as well.

[sinannoureddine]

Could you please elaborate more? Can you share your package.json file

[Sandbird]

Hmm looking at it now i think I solved it differently. https://pastebin.com/raw/uZQqJJXj. I uploaded my html file here. Save it somewhere and then search for: const MAPBOX_TOKEN and just paste there an access token from mapbox.com (it's free, just create an account there and you can get one.) Save and load the file on a browser and you'll see on the left my dataset...using hexbins. So basically i just uploaded my dataset and manipulated it on the map then exported it to a single file. IF i am not mistaken this is what happens with the demo (if you see further up i posted a picture with the problem back then). The demo uses an accesstoken that doesnt work locally..that's why i did it this way.

[sinannoureddine]

Thanks a lot @Sandbird ! That actually helped!

[boxinqb]

Are there alternative solutions that we can solve the issue? :)

[Sandbird]

Best guess....get an accesstoken from mapbox first, use your browser's console to see which accesstoken your map uses in jupiter, search for that string in the source files (keplergl), and replace it with your own. I know it's a very 'hacky' way...but IF this is the reason why it is not working inside jupiter...this should fix the problem.

[boxinqb]

Thank you for the suggestion! :) @Sandbird

[SebastianoF]

It seems to be a problem with some hexagons, and not related to the mapbox key.

Here is an example to reproduce the bug:

    import pandas as pd  # 1.5.1
    from keplergl import KeplerGl  # 0.3.2

    # This fake dataset does not work, and provide a white screen.
    df_fake = pd.DataFrame({"hex_id": ["8bbe08421b1afff", "8bbe08424320fff"], "num": [2,4]})  
    
    # This fake dataset works correctly (comment it out to try the faulty one):
    df_fake = pd.DataFrame({"hex_id": ["85111153fffffff", "8510a49bfffffff"], "num": [2,4]}) 

    map_1 = KeplerGl(
        data={
            "hex_id": df_fake.copy()
        }, 
    )
    map_1

Hope this help reproducing the problem.

[amonras]

same here, works at resolution 5, fails at resolution 6 and above

This works well until v0.3.0, but is broken since v0.3.1

Environment OSX: 13.3.1 python: 3.9.1 kepler.gl: 0.3.2 node: v19.5.0

[hridesh2207]

Any update on this issue? It is really strange nobody is bothered about this issue? And, i could only find this thread for this specific issue; however, I believe it should be a very common issue.

Pls support to provide a solution for this issue. I cannot upload the data due to it's criticality , neither can i use kepler.gl website as it also requires me to upload the data

[hridesh2207]

Can anybody help here?

[sjgd]

Did anyone find a solution for this? I tried replacing the 'mapboxApiAccessToken' / MAPBOX_TOKEN in the packages locally but it did not solve the issue.

Update: I've found the following workaround to display the hexbins:

import h3
from shapely.geometry import Polygon

df["WKT"] = df['h3Index'].apply(lambda h3Index: str(Polygon(h3.h3_to_geo_boundary(h= h3Index, geo_json=True))))
del df['h3Index']