0

I have written a Folium map of a French city with the possibility of visualizing attributes informations 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 brower 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)
  • 1
    Is the data you are consuming geojson? How much attribute data are you consuming? I suspect it is both a limitation of both the browser and Leaflet because it renders the data to the DOM. Are you able to share an example of the data and how you are consuming it in Leaflet? – Owen J Lamb Mar 7 at 19:47
  • My data is a shapefile that I convert in a loop in GeoJson, I don't really know how much, I begin from a 60MB shapefile that I've cut in pieces in order to place each parcel individually on the map. And I've attempted to join 2 layers in order to have a label from one of the vectorial map. I'll try to edit and share some python code tomorrow, I don't have the right computer here – Brocolus Mar 7 at 20:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.