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

Answer 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!