4

I'm trying to use the .save_to_html() function for a kepler.gl jupyter notebook map.

It all works great inside jupyter, and I can re-load the same map with a defined config.

Where it goes wrong is when I use the save_to_html() function. The map will save to an html, but the configuration reverts to the basic configuration, before I customized it.

Please help! I love kepler, when I solve this little thing, it will be our absolute go-to tool

Thanks

Have tried to change the filters, colours, and point sizes. None of this works. 

map_1 = KeplerGl(height=500, data={'data': df},config=config)
map_1

config  = map_1.config
config

map_1.save_to_html(data={'data_1': df}, 
file_name='privateers.html',config=config)


Config
{'version': 'v1',
 'config': {'visState': {'filters': [{'dataId': 'data',
     'id': 'x8t9c53mf',
     'name': 'time_update',
     'type': 'timeRange',
     'value': [1565687902187.5417, 1565775465282],
     'enlarged': True,
     'plotType': 'histogram',
     'yAxis': None},
    {'dataId': 'data',
     'id': 'biysqlu36',
     'name': 'user_id',
     'type': 'multiSelect',
     'value': ['HNc0SI3WsQfhOFRF2THnUEfmqJC3'],
     'enlarged': False,
     'plotType': 'histogram',
     'yAxis': None}],
   'layers': [{'id': 'ud6168',
     'type': 'point',
     'config': {'dataId': 'data',
      'label': 'Point',
      'color': [18, 147, 154],
      'columns': {'lat': 'lat', 'lng': 'lng', 'altitude': None},
      'isVisible': True,
      'visConfig': {'radius': 5,
       'fixedRadius': False,
       'opacity': 0.8,
       'outline': False,
       'thickness': 2,
       'strokeColor': None,
       'colorRange': {'name': 'Uber Viz Qualitative 1.2',
        'type': 'qualitative',
        'category': 'Uber',
        'colors': ['#12939A',
         '#DDB27C',
         '#88572C',
         '#FF991F',
         '#F15C17',
         '#223F9A'],
        'reversed': False},
       'strokeColorRange': {'name': 'Global Warming',
        'type': 'sequential',
        'category': 'Uber',
        'colors': ['#5A1846',
         '#900C3F',
         '#C70039',
         '#E3611C',
         '#F1920E',
         '#FFC300']},
       'radiusRange': [0, 50],
       'filled': True},
      'textLabel': [{'field': None,
        'color': [255, 255, 255],
        'size': 18,
        'offset': [0, 0],
        'anchor': 'start',
        'alignment': 'center'}]},
     'visualChannels': {'colorField': {'name': 'ride_id', 'type': 'string'},
      'colorScale': 'ordinal',
      'strokeColorField': None,
      'strokeColorScale': 'quantile',
      'sizeField': None,
      'sizeScale': 'linear'}},
    {'id': 'an8tbef',
     'type': 'point',
     'config': {'dataId': 'data',
      'label': 'previous',
      'color': [221, 178, 124],
      'columns': {'lat': 'previous_lat',
       'lng': 'previous_lng',
       'altitude': None},
      'isVisible': False,
      'visConfig': {'radius': 10,
       'fixedRadius': False,
       'opacity': 0.8,
       'outline': False,
       'thickness': 2,
       'strokeColor': None,
       'colorRange': {'name': 'Global Warming',
        'type': 'sequential',
        'category': 'Uber',
        'colors': ['#5A1846',
         '#900C3F',
         '#C70039',
         '#E3611C',
         '#F1920E',
         '#FFC300']},
       'strokeColorRange': {'name': 'Global Warming',
        'type': 'sequential',
        'category': 'Uber',
        'colors': ['#5A1846',
         '#900C3F',
         '#C70039',
         '#E3611C',
         '#F1920E',
         '#FFC300']},
       'radiusRange': [0, 50],
       'filled': True},
      'textLabel': [{'field': None,
        'color': [255, 255, 255],
        'size': 18,
        'offset': [0, 0],
        'anchor': 'start',
        'alignment': 'center'}]},
     'visualChannels': {'colorField': None,
      'colorScale': 'quantile',
      'strokeColorField': None,
      'strokeColorScale': 'quantile',
      'sizeField': None,
      'sizeScale': 'linear'}},
    {'id': 'ilpixu9',
     'type': 'arc',
     'config': {'dataId': 'data',
      'label': ' -> previous arc',
      'color': [146, 38, 198],
      'columns': {'lat0': 'lat',
       'lng0': 'lng',
       'lat1': 'previous_lat',
       'lng1': 'previous_lng'},
      'isVisible': True,
      'visConfig': {'opacity': 0.8,
       'thickness': 2,
       'colorRange': {'name': 'Global Warming',
        'type': 'sequential',
        'category': 'Uber',
        'colors': ['#5A1846',
         '#900C3F',
         '#C70039',
         '#E3611C',
         '#F1920E',
         '#FFC300']},
       'sizeRange': [0, 10],
       'targetColor': None},
      'textLabel': [{'field': None,
        'color': [255, 255, 255],
        'size': 18,
        'offset': [0, 0],
        'anchor': 'start',
        'alignment': 'center'}]},
     'visualChannels': {'colorField': None,
      'colorScale': 'quantile',
      'sizeField': None,
      'sizeScale': 'linear'}},
    {'id': 'inv52pp',
     'type': 'line',
     'config': {'dataId': 'data',
      'label': ' -> previous line',
      'color': [136, 87, 44],
      'columns': {'lat0': 'lat',
       'lng0': 'lng',
       'lat1': 'previous_lat',
       'lng1': 'previous_lng'},
      'isVisible': False,
      'visConfig': {'opacity': 0.8,
       'thickness': 2,
       'colorRange': {'name': 'Global Warming',
        'type': 'sequential',
        'category': 'Uber',
        'colors': ['#5A1846',
         '#900C3F',
         '#C70039',
         '#E3611C',
         '#F1920E',
         '#FFC300']},
       'sizeRange': [0, 10],
       'targetColor': None},
      'textLabel': [{'field': None,
        'color': [255, 255, 255],
        'size': 18,
        'offset': [0, 0],
        'anchor': 'start',
        'alignment': 'center'}]},
     'visualChannels': {'colorField': None,
      'colorScale': 'quantile',
      'sizeField': None,
      'sizeScale': 'linear'}}],
   'interactionConfig': {'tooltip': {'fieldsToShow': {'data': ['time_ride_start',
       'user_id',
       'ride_id']},
     'enabled': True},
    'brush': {'size': 0.5, 'enabled': False}},
   'layerBlending': 'normal',
   'splitMaps': []},
  'mapState': {'bearing': 0,
   'dragRotate': False,
   'latitude': 49.52565611453996,
   'longitude': 6.2730441822977845,
   'pitch': 0,
   'zoom': 9.244725880765998,
   'isSplit': False},
  'mapStyle': {'styleType': 'dark',
   'topLayerGroups': {},
   'visibleLayerGroups': {'label': True,
    'road': True,
    'border': False,
    'building': True,
    'water': True,
    'land': True,
    '3d building': False},
   'threeDBuildingColor': [9.665468314072013,
    17.18305478057247,
    31.1442867897876],
   'mapStyles': {}}}}

Expected: Fully configurated map as in Jupyter widget

Actuals Colors and filters are not configured. Size and position of map is sent along, so if I store it looking at an empty area, when I open the html file it looks at the same field

Ben Cohen
  • 41
  • 1
  • 2

4 Answers4

2

In the Jupyter user guide for kepler.gl under the save section

# this will save current map
map_1.save_to_html(file_name='first_map.html')

# this will save map with provided data and config
map_1.save_to_html(data={'data_1': df}, config=config, file_name='first_map.html')

# this will save map with the interaction panel disabled
map_1.save_to_html(file_name='first_map.html', read_only=True)

So it looks like its a bug if the configuration parameter doesn't work or you are making the changes to the map configure after you set it equal to config. This would be fixed if you set

map_1.save_to_html(data={'data_1': df}, 
file_name='privateers.html',config=map_1.config)
Mitch
  • 21
  • 3
0

I think it is a bug (or feature?) happens when you use the same cell to save the map configuration or still not print the map out yet. Generally, the config only exists after you really print the map out.

natsuapo
  • 585
  • 9
  • 22
0

the problem, as far as I see it and how I solved at a similar problem is, that you 1) named your 'data' key in instancing the map different than you told it to save in the HTML 2).

  1. map_1 = KeplerGl(height=500, data={'data': df},config=config)
  2. map_1.save_to_html(data={'data_1': df}, file_name='privateers.html',config=config)

Name both keys the same and your HTML file will use the correct configuration.

mmotl
  • 1
  • 1
0

Had this issue as well. Solved it by converting all pandas column dtypes to those that are json serializable: i.e. converting 'datetime' column from dtype <m8[ns] to object.

peet_overflow
  • 11
  • 1
  • 2