TransWikia.com

Visualize big data HTML file created with Folium

Geographic Information Systems Asked by Brocolus on May 22, 2021

I have written a Folium map of a French city with the possibility of visualizing attributes information on click for each of its polygon which makes a huge file after 2 hours of calculation with the Jupyter notebook.

At the end I could save the work in a HTML file but when I try to visualize the map, my browser crashes each time. So I’m wondering if it is a limitation of Leaflet which isn’t able to handle such a big volume or is it because of the browser?

The resulting file weights about 750MB which is a lot and I don’t know if there is a solution such as a cloud computing or something else to see the result.

EDIT : Here is some code I’m loading, I’ve loaded 3 shapefiles where I first make a join in order to get some attribute information in just one layer which I saved in marseille_label.shp. I’ve loaded it back row by row with the function getRow() (from another stackoverflow post) in order to : highlight on hover for each component, have the search&zoom on each id of the map I’m looking for and lastly to get attributes on click.

The code works on small scale but when I do it for a whole city it gets really fat and the html rendered file isn’t working anymore.

%matplotlib inline
import geopandas as gpd
import pandas as pd
import os

def getRows(fn, idxList):
    reader = fiona.open(fn)
    return gpd.GeoDataFrame.from_features([reader[x] for x in idxList])

marseillePlot = 
gpd.read_file(os.path.abspath(os.path.join(save_path,"marseille_label.shp")))

geo_marseillePlot = marseillePlot.to_crs({'init':'epsg:4326'})

carteMarseille = folium.Map(location=[43.3,5.4],
                            zoom_start=14,
                            control_scale=True)

zoneMarseille = folium.features.GeoJson(marseillePlot, 
                                  name='marseille', 
                                  style_function=lambda feature:{'weight':0,
                                                    'fillColor':'#00000000',
                                                             'color':'red'},
                                  highlight_function=lambda feature:{'weight':4,
                                                                 'color':'red'},
                               tooltip=folium.features.GeoJsonTooltip(fields=['nomcommune','idu'],                                                
                                                                    aliases=['Arrondissement','Num parcelle'], 
                                                              localize=True)
                              ).add_to(carteMarseille)
marseilleSearch = Search(layer=zoneMarseille, 
                         geom_type='Polygon', 
                         placeholder="Veuillez renseigner un numero de parcelle", 
                         collapsed=False, 
                         search_label='idu',
                         weight=6
                        ).add_to(carteMarseille)

MousePosition(
              position="topright",
              prefix= u"Coordonnées :",
              separator=" | "
              ).add_to(carteMarseille)

Draw(export=True).add_to(carteMarseille)
Fullscreen(position='topleft').add_to(carteMarseille)
#folium.LayerControl().add_to(carteMarseille)

for i in range(len(marseillePlot)): 
    extract_polygon = [geo_marseillePlot.geometry[i]]
    out_df = getRows(os.path.abspath(os.path.join(save_path,"marseille_label.shp")), [i])
    out_df.geometry = extract_polygon
    out_df.crs = {'init':'epsg:4326'}
    df_output_html=out_df.to_html(classes='table table-striped table-hover table-condensed table-responsive')
    selection = folium.features.GeoJson(out_df, 
                                        name='selection_{}'.format(int(i)), 
                                        control=False,
                                        style_function=lambda feature:{'weight':1,
                                                                   'fillColor':'#00000000',
                                                                   'color':'black'},
                                        highlight_function=lambda feature:{'weight':4,
                                                                     'color':'red'},
                                    tooltip=folium.features.GeoJsonTooltip(fields=['nomcommune','idu'],
                                                                         aliases=['Arrondissement','Num parcelle'], 
                                                                         localize=True)
                                    ).add_to(carteMarseille)

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP