Highmaps ipynb examples don't render correctly

[MarkusBonsch]

Probably related to #31.
I was starting to use highmaps from this package and noticed that I don't see anything in my charts.
Then I looked at the official examples (http://nbviewer.jupyter.org/github/kyper-data/python-highcharts/tree/master/examples/ipynb/highmaps/) and found that for all examples, the maps are not displayed correctly in my browser (Firefox 59.0.2 (64-bit)).
Is there an issue with highmaps or am I too stupid?

Cheers,
Markus

[tgrandje]

Not sure about this, but I ran into some trouble that seems to be related to this issue :

• When using a custom geojson with chart.add_map_data, commenting this line in the html seems to do the trick :

<script type="text/javascript" src="https://code.highcharts.com/maps/modules/map.js"></script>

from highcharts import Highmap
import highcharts.highmaps.highmap_helper as highmap_helper
import geopandas as gpd
import json
from shapely.geometry import Polygon

def custom_geojson():
    chart = Highmap()
    dummy = gpd.GeoDataFrame(

            [

                    [1, 1, Polygon([(0,0), (0,1), (1,0)])],

                    [1, 2, Polygon([(1,1), (1,0), (0,1)])]

                    ], columns = ['col1', 'col2', 'geometry'])
    dummy.set_geometry('geometry', inplace=True)
    geojson = json.loads(dummy.to_json())
    chart.add_map_data(geojson, name="My layer")
    output = "test_geojson_custom"
    chart.save_file(output)
    with open(output + '.html') as f:
        lines = f.readlines()
    lines = [line for line in lines if "https://code.highcharts.com/maps/modules/map.js" not in line]
    with open(output + '.html', 'w') as f:
        f.writelines(lines)
custom_geojson()

• Same works with distant maps from highcharts:

from highcharts import Highmap
import highcharts.highmaps.highmap_helper as highmap_helper
import geopandas as gpd
import json
from shapely.geometry import Polygon

def distant_geojson():
    chart = Highmap()
    map_url = 'http://code.highcharts.com/mapdata/countries/us/us-all-all.js'
    geojson = highmap_helper.js_map_loader(map_url)
    mapdata = highmap_helper.geojson_handler(geojson)
    chart.add_map_data(mapdata, name = "My layer")

    output = "test_distant_geojson"
    chart.save_file(output)
    with open(output + '.html') as f:
        lines = f.readlines()
    lines = [line for line in lines if "https://code.highcharts.com/maps/modules/map.js" not in line]
    with open(output + '.html', 'w') as f:
        f.writelines(lines)
distant_geojson()

• When using chart.set_map_source you can also see that the geojson variable is not used in the javascript. You need then to replace "var data = [];" by "var data = [{"type": "map", "name": "My layer", "mapData": geojson}];". (I didn't manage to use set_map_source with a custom geojson passing jsonp_map=True, but I'm no good at javascript and the script uses a different construction which I don't understant yet).

def set_map_source_with_distant_geojson():
    chart = Highmap()
    # With a distant geojson :
    map_url = 'http://code.highcharts.com/mapdata/countries/us/us-all-all.js'
    chart.set_map_source(map_url, jsonp_map = False)

    output = "test_distant_geojson_with_set_map_source"
    chart.save_file(output)
    with open(output + '.html') as f:
        lines = f.readlines()
    lines = [line for line in lines if "https://code.highcharts.com/maps/modules/map.js" not in line]
    lines = [line.replace(
            "var data = []",
            """var data = [{"type": "map", "name": "My layer", "mapData": geojson}]""")
            if "var data = []" in line else line
            for line in lines]
    with open(output + '.html', 'w') as f:
        f.writelines(lines)
set_map_source_with_distant_geojson()

I still haven't managed to use chart.add_data_set properly with a mappoint geojson.
Though, this works (you don't need to remove the map.js script, but you have to rewrite completly the data line, in that case using the javascript geojson constructor) :

from shapely.geometry import Point
def test_mappoint():
    chart = Highmap()
    dummy_point = gpd.GeoDataFrame(
            [
                    [1, 1, Point(0,0)],
                    [1, 1, Point(0.5,0.5)],
                    [1, 2, Point(1,1)]
                    ], columns = ['col1', 'col2', 'geometry'])

    dummy_point.set_geometry('geometry', inplace=True)
    geojson = json.loads(dummy_point.to_json())
    chart.add_map_data(geojson, name="mappoint_test")

    output = "test_mappoint"
    chart.save_file(output)
    with open(output + '.html') as f:
        lines = f.readlines()

    lines = [line.replace(
            """var data = [{"data": [], "type": "map", "name": "mappoint_test", "mapData": geojson}];""",
            """var data = [{"data": Highcharts.geojson(geojson, 'mappoint'), "type": "mappoint", "name": "mappoint_test"}];""")
            if "var data = " in line
            else line
            for line in lines]
    with open(output + '.html', 'w') as f:
        f.writelines(lines)
test_mappoint()

Hope this helps figuring what is going on...