How to render map created by folium dynamically and get the clicked data information?

Dash Python
1

I want to know how can I plot folium map dynamically through dash without saving it and retrieve the clicked data information (e.g-district name).
I have tried html.Iframe() to run it statically but I dont want to save the map and then run.

Thanks in advance and any help from community is highly appreciated.

Regards,

Arnab

2

To my knowledge, this is not possible with Folium. However, you can do it with Dash Leaflet, which is also (as the name indicates) based on Leaflet.

https://dash-leaflet.herokuapp.com/#map_click

3

Thank you so much @Emil…I think that this will serve my purpose.

4

@Emil
can I use shapefile using your dash-leaflet package?

5

The only format supported “directly” for plotting is GeoJSON. For other file formats, you must construct the Leaflet objects (e.g. Polygon, Polyline, etc.) yourself. For shape files, this should be straight forward though.

6

What do you mean by constructing Leaflet objects and how can it be done for a shapefile?

7

I mean that you would open the shape file(s), loop through the shapes and construct the appropriate object (e.g. Polygon, Polyline, etc.) for each shape. You can then add these objects to the map.

8

I believe there are also python libraries that will convert a shape file into geojson.

1 Like
9

Geopandas does it:

import geopandas as gpd

gdf = gpd.read_file("path/to/shapefile")
geojson = gdf.__geo_interface__
1 Like
10

@arnab93 @Emil @RenaudLN @chriddyp

To convert a shapefile to geojson, the following steps must be completed (both for using the geojson file with Leaflet and Mapbox):

  • read the shape file as a geopandas dataframe:
import geopandas as gpd
gdf = gpd.read_file(f"path_to/filename.shp", encoding='utf-8')
  • Check if geometric data (coordinates) in the shapefile are given with respect to the CRS (Coordinate Reference System) WGS84:
print(gdf.crs)

When running geopandas 0.7.0 (the last version) the following info must be displayed:

<Geographic 2D CRS: EPSG:4326>
Name: WGS 84
Axis Info [ellipsoidal]:
- Lat[north]: Geodetic latitude (degree)
- Lon[east]: Geodetic longitude (degree)
Area of Use:
- name: World
- bounds: (-180.0, -90.0, 180.0, 90.0)
Datum: World Geodetic System 1984
- Ellipsoid: WGS 84
- Prime Meridian: Greenwich

If the CRS isn’t EPSG:4326(also known as WGS84), change the crs as follows:

gdf.to_crs(epsg=4326)
  • Convert the geopandas dataframe to a geojson file:
gdf.to_file('mygeojson.json', driver = 'GeoJSON')
with open('mygeojson.json') as geofile:
    jsondata = json.load(geofile)

jsondata is the geojson dict to be used by leaflet or go.Choroplethmapbox.

3 Likes