|
| 1 | +```{code-cell} ipython3 |
| 2 | +--- |
| 3 | +nbsphinx: hidden |
| 4 | +--- |
| 5 | +import folium |
| 6 | +``` |
| 7 | + |
| 8 | +# Advanced GeoJSON Customization with on_each_feature |
| 9 | + |
| 10 | +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: |
| 11 | + |
| 12 | +- Custom tooltip and popup handling for complex geometries like MultiPoint |
| 13 | +- Adding custom event listeners |
| 14 | +- Implementing advanced styling logic |
| 15 | +- Working with geometry types that need special handling |
| 16 | + |
| 17 | +## Understanding on_each_feature |
| 18 | + |
| 19 | +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: |
| 20 | +- `feature`: The GeoJSON feature object |
| 21 | +- `layer`: The Leaflet layer object representing the feature |
| 22 | + |
| 23 | +## Basic Example |
| 24 | + |
| 25 | +```{code-cell} ipython3 |
| 26 | +import folium |
| 27 | +from folium.utilities import JsCode |
| 28 | +import json |
| 29 | +
|
| 30 | +# Simple point data |
| 31 | +geojson_data = { |
| 32 | + "type": "FeatureCollection", |
| 33 | + "features": [ |
| 34 | + { |
| 35 | + "type": "Feature", |
| 36 | + "properties": {"name": "Location 1", "value": 100}, |
| 37 | + "geometry": {"type": "Point", "coordinates": [77.5946, 12.9716]} # Central Bangalore |
| 38 | + }, |
| 39 | + { |
| 40 | + "type": "Feature", |
| 41 | + "properties": {"name": "Location 2", "value": 200}, |
| 42 | + "geometry": {"type": "Point", "coordinates": [77.6200, 12.9800]} # Northeast Bangalore |
| 43 | + } |
| 44 | + ] |
| 45 | +} |
| 46 | +
|
| 47 | +# Custom JavaScript to add popups |
| 48 | +on_each_feature = JsCode(""" |
| 49 | +function(feature, layer) { |
| 50 | + layer.bindTooltip( |
| 51 | + '<b>' + feature.properties.name + '</b><br>' + |
| 52 | + 'Value: ' + feature.properties.value |
| 53 | + ); |
| 54 | +
|
| 55 | + layer.bindPopup( |
| 56 | + '<b>' + ' This is popup ' + '</b><br>' + |
| 57 | + '<b>' + feature.properties.name + '</b><br>' + |
| 58 | + 'Value: ' + feature.properties.value |
| 59 | + ); |
| 60 | +} |
| 61 | +""") |
| 62 | +
|
| 63 | +m = folium.Map(location=[12.9716, 77.5946], zoom_start=10) |
| 64 | +
|
| 65 | +folium.GeoJson( |
| 66 | + geojson_data, |
| 67 | + on_each_feature=on_each_feature |
| 68 | +).add_to(m) |
| 69 | +
|
| 70 | +m |
| 71 | +``` |
| 72 | + |
| 73 | +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. |
| 74 | + |
| 75 | +## References |
| 76 | + |
| 77 | +- [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. |
0 commit comments