kyper-data / python-highcharts

A simple translation layer between Python and Javascript for Highcharts projects (highcharts, highmaps, and highstocks).
MIT License
394 stars 190 forks source link

Highmaps ipynb examples don't render correctly #52

Open MarkusBonsch opened 6 years ago

MarkusBonsch commented 6 years ago

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 commented 5 years ago

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

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...