Highcharts map in python/Jupyter : no rendering

Question

New to highcharts, I'm trying to draw a choropleth map for department in France with Jupyter notebooks (as a start)

from highcharts_maps.chart import Chart
import geopandas as gpd
import numpy as np

df = gpd.read_file('https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements-version-simplifiee.geojson')
df['value'] = np.random.randint(0,100,df.shape[0])
my_chart = Chart.from_geopandas(df, property_map = {
                                         'id': 'code',
                                          'name':'nom',
                                         'value': 'value'
                                     }, series_type = 'map')
my_chart.display()

Unfortunately, It seems that my_chart "lost" the geometry contained in df (a geopandas dataframe with a column geometry containing POLYGON) since my_chart.options contains only the series without any info about the geometry.

Do you know how to make it works (as a basic tutorial, further, I'll look for more complex maps such as tile maps for the same data)

Update : I also try to add the following code after the previous one:

my_map_data = MapData.from_geojson('https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements-version-simplifiee.geojson')
my_chart.set_map_data(my_map_data)

It makes my_chart.options more verbose with some geometries (but my_chart.options.map_data raises an error)

HighchartsMapsOptions(chart = {'map': {'topology': {'type': 'Topology', 'objects': {'data': {'geometries': [{'properties': {'code': '01', 'nom': 'Ain'}, 'type': 'Polygon', 'arcs': [[-343, -174, 0, -361, -359, -171, -332]], 'id': 'feature_00'}, {'properties': {'code': '02', 'nom': 'Aisne'}, 'type': 'Polygon', 'arcs': [[-293, 1, -26, -222, -367, -297, -379], [295], [293], [294]], 'id': 'feature_01'}, {'properties': {'code': '03', 'nom': 'Allier'}, 'type': 'Polygon', 'arcs': [[-290, -346, -185, -308, -86, -49]], 'I

Note that my_chart.display() raises an error

Something went wrong with the Highcharts.js script. It should have been automatically loaded, but it did not load for over 5 seconds. Check your internet connection, and then if the problem persists please reach out for support. (You can also check your browser's console log for more details.)

Detailed Error Message:
undefined is not a function (near '...Highcharts.mapChart...')

so the export function to png file : HTTPError: 520 Server Error: for url: https://export.highcharts.com/

Last edit : Enable to display a chart with colors. But trying to convert it into tilemap unsuccessfully

I added those lines of code to correctly render colors

color_axis_options = {
    'min': 0,
    'max': 100,
    'minColor': '#e6e9ff',
    'maxColor': '#0022ff' 
}
my_chart.options.color_axis = color_axis_options

For now, I'd like to convert this map into tilemap. I thought I just have to change series_type='tilemap' but it was unsuccessful. Have you some thoughts ?

Thank you

"It seems that my_chart lost the geometry contained in df" seems at odds with the title of this post? I would expect the title to mean the code runs but a plot isn't displaying. 'Lost the geometry' implies something more along of the lines of having an issue with data wrangling. You probably need to update you post to be clear what the case is? Toy data that you can include with the code would probably help, too. Or point to the data. — Wayne
– Wayne, Commented Nov 8, 2023 at 13:21
Hi @Nicolas - (note, I'm the creator of Highcharts Maps for Python so hopefully I can help you on this!) Can you share some additional details? In particular, what version of Highcharts Maps for Python are you using, and what version of GeoPandas? And can you share some more details on what you mean by "lost the geometry contained in df" ? For example, share a partial output of my_chart.options.map_data (which is where the geometry should get loaded from the GeoDataframe) ? — Chris Modzelewski
– Chris Modzelewski, Commented Nov 8, 2023 at 13:33
hi @ChrisModzelewski, Thank you for your help. I'm working with v1.5.0 of Highcharts Maps and v0.14.0 for geopandas. when I run the command my_chart.options.map_data, I get an error 'HighchartsMapsOptions' object has no attribute 'map_data'. If I run all options, I got only the series of data HighchartsMapsOptions(series = [{'data': {'dataPoints': [{'value': 80, 'id': '01', 'name': 'Ain'}, {'value': 85, 'id': '02', 'name': 'Aisne'}, ..., , 'type': 'map'}]) — Nicolas
– Nicolas, Commented Nov 8, 2023 at 16:11
Hi @Nicolas - Thanks for all the details, and for including the GeoJSON. This is super helpful, and will hopefully let me recreate the bug. For the moment, I've gone ahead and filed a bug report on your behalf in the Github repo here and hopefully I will be able to diagnose what is happening. I'll circle back with my findings there on the GH issue, as well as here in an answer. — Chris Modzelewski
– Chris Modzelewski, Commented Nov 9, 2023 at 22:16
Hi @Nicolas - Also, confirmed the issue: it would seem that for some reason a bug must have gotten introduced that is preventing the map topology (found in my_chart.options.chart.map_data - apologies, I had a typo in my earlier comment) from serializing correctly to JS literal. This is definitely a bug, and will be fixed in v.1.5.1. I'm working on a fix for this as we speak. — Chris Modzelewski
– Chris Modzelewski, Commented Nov 9, 2023 at 22:33

Chris Modzelewski · Accepted Answer · 2023-11-10 02:05:19Z

1

Okay, so as mentioned in the comments, this turned out to be a bug in v.1.5.0 of Highcharts Maps for Python, which has now been resolved as of v.1.5.1. With this bugfix, your code does successfully load the map topologies and renders the maps.

However, in testing the bugfix I did notice one minor thing in your code above: You are not setting the series .join_by property, which as described in the API reference documentation, means that it defaults to 'hc-key'.

Since your topology/geometry does not have a corresponding 'hc-key' field, the data points that you are rendering end up not connected to your map geometry, and so do not render correctly. In the code you provided, that is easy enough to fix by setting the value of .join_by to null (using highcharts_maps.constants.EnforcedNull, which leads the data points to connect in sequence. You could also specify a field in .join_by that is present in your map data, of course.

Here is the code with that small tweak included:

from highcharts_maps.chart import Chart
from highcharts_maps import constants
import geopandas as gpd
import numpy as np

df = gpd.read_file('https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements-version-simplifiee.geojson')
df['value'] = np.random.randint(0,100,df.shape[0])
my_chart = Chart.from_geopandas(df, property_map = {
                                         'id': 'code',
                                          'name':'nom',
                                         'value': 'value'
                                     }, series_type = 'map')

my_chart.options.series[0].join_by = constants.EnforcedNull
my_chart.display()

And this renders a chart like the below (with the mouse hovering over one area):

Obviously, you can further configure the tooltips and information shown when the mouse hovers over one of your data points.

Hope this helps, and thanks for raising the question and helping us discover this bug!

answered Nov 10, 2023 at 2:05

Chris Modzelewski

1,65812 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nicolas Over a year ago

Thanks a lot @Chris. Nonetheless, I still get errors in Jupyter Notebook (but not in Jupyter Lab where the map is rendered) : Something went wrong with the Highcharts.js script. It should have been automatically loaded, but it did not load for over 5 seconds. Check your internet connection, and then if the problem persists please reach out for support. (You can also check your browser's console log for more details.) Detailed Error Message: undefined is not a function (near '...Highcharts.mapChart...'). I work with latest versions of Anaconda and packages on Safari for Mac.

Chris Modzelewski Over a year ago

That is a different issue, and one we've seen in Jupyter Notebook and having difficulty reproducing consistently. Which version of JN are you using? And are you running the Notebook in the browser or in VSCode? If in VSCode, are you using any JN-related extensions? If so, disable those extensions and then re-enable them. Many users have reported that doing so makes their notebooks suddenly render correctly in VSCode (see here ). I would recommend filing an issue in our GH repo - there are other diagnostics we can do, too.

Nicolas Over a year ago

Thanks a lot @Chris. I'll fill an issue but can work with Jupyter lab for now. Do you know how I can change the color scale and see a choropleth map (following 'value' columns) ? I'm a bit lost on how I can modify parameters of the chart (in Python, I can see examples in Javascript which I'm not that familiar). Thank you

Collectives™ on Stack Overflow

Highcharts map in python/Jupyter : no rendering

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related