Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/user_guide/geojson.rst
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,6 @@ GeoJSON and choropleth
geojson/choropleth
geojson/geojson_marker
geojson/geojson_popup_and_tooltip
geojson/geojson_advanced_on_each_feature
geojson/geopandas_and_geo_interface
geojson/smoothing
77 changes: 77 additions & 0 deletions docs/user_guide/geojson/geojson_advanced_on_each_feature.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
```{code-cell} ipython3
---
nbsphinx: hidden
---
import folium
```

# Advanced GeoJSON Customization with on_each_feature

The `on_each_feature` parameter in `folium.GeoJson` provides powerful customization capabilities by allowing you to execute JavaScript code for each feature in your GeoJSON data. This is particularly useful for:

- Custom tooltip and popup handling for complex geometries like MultiPoint
- Adding custom event listeners
- Implementing advanced styling logic
- Working with geometry types that need special handling

## Understanding on_each_feature

The `on_each_feature` parameter accepts a `folium.utilities.JsCode` object containing JavaScript code that will be executed for each feature. The JavaScript function receives two parameters:
- `feature`: The GeoJSON feature object
- `layer`: The Leaflet layer object representing the feature

## Basic Example

```{code-cell} ipython3
import folium
from folium.utilities import JsCode
import json

# Simple point data
geojson_data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {"name": "Location 1", "value": 100},
"geometry": {"type": "Point", "coordinates": [77.5946, 12.9716]} # Central Bangalore
},
{
"type": "Feature",
"properties": {"name": "Location 2", "value": 200},
"geometry": {"type": "Point", "coordinates": [77.6200, 12.9800]} # Northeast Bangalore
}
]
}

# Custom JavaScript to add popups
on_each_feature = JsCode("""
function(feature, layer) {
layer.bindTooltip(
'<b>' + feature.properties.name + '</b><br>' +
'Value: ' + feature.properties.value
);

layer.bindPopup(
'<b>' + ' This is popup ' + '</b><br>' +
'<b>' + feature.properties.name + '</b><br>' +
'Value: ' + feature.properties.value
);
}
""")

m = folium.Map(location=[12.9716, 77.5946], zoom_start=10)

folium.GeoJson(
geojson_data,
on_each_feature=on_each_feature
).add_to(m)

m
```

The `on_each_feature` parameter provides the flexibility needed to handle complex GeoJSON scenarios that the standard tooltip and popup classes cannot address, particularly for MultiPoint geometries and advanced interactive features.

## References

- [Leaflet GeoJSON Tutorial](https://leafletjs.com/examples/geojson/) - Comprehensive guide to using GeoJSON with Leaflet, including the `onEachFeature` option that inspired folium's `on_each_feature` parameter.
3 changes: 3 additions & 0 deletions docs/user_guide/geojson/geojson_popup_and_tooltip.md
Original file line number Diff line number Diff line change
Expand Up @@ -137,3 +137,6 @@ colormap.add_to(m)

m
```


The standard `GeoJsonPopup` and `GeoJsonTooltip` classes work well with most geometry types, but have limitations with MultiPoint and other complex multigeometries. For these cases, consider using the `on_each_feature` parameter for custom handling. See the [doc](geojson_advanced_on_each_feature.html) for more information.
Loading