diff --git a/docs/user_guide/geojson.rst b/docs/user_guide/geojson.rst index 704dc2e4b1..44dfe284bd 100644 --- a/docs/user_guide/geojson.rst +++ b/docs/user_guide/geojson.rst @@ -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 diff --git a/docs/user_guide/geojson/geojson_advanced_on_each_feature.md b/docs/user_guide/geojson/geojson_advanced_on_each_feature.md new file mode 100644 index 0000000000..4854715883 --- /dev/null +++ b/docs/user_guide/geojson/geojson_advanced_on_each_feature.md @@ -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( + '' + feature.properties.name + '
' + + 'Value: ' + feature.properties.value + ); + + layer.bindPopup( + '' + ' This is popup ' + '
' + + '' + feature.properties.name + '
' + + '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. diff --git a/docs/user_guide/geojson/geojson_popup_and_tooltip.md b/docs/user_guide/geojson/geojson_popup_and_tooltip.md index 5a2154c3c3..2f67c85e61 100644 --- a/docs/user_guide/geojson/geojson_popup_and_tooltip.md +++ b/docs/user_guide/geojson/geojson_popup_and_tooltip.md @@ -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.