I have a leaflet map that I have placed an SVG "on top of" using the leaflet overlay pane. I want to add a D3 brush to the overlay pane that will then update a separate chart. I've looked around for any examples of simultaneous D3.brush() and leaflet examples but can't seem to find any.

The closest thing I found was this https://github.com/mbostock/d3/issues/1321 and this https://www.mapbox.com/mapbox.js/example/v1.0.0/timeline-scaled-markers/ (this is brushing the chart not the map).

I was wondering if:

  1. Anyone knew of any examples, OR
  2. Anyone knew if this was possible/reasonably straightforward, OR
  3. If possible, anyone had any tips on the sort of issues I might encounter.

I've just made one basic example based on this bl.ock.


  • add your layer group to the map (from GeoJSON)

  • save your layer group in a variable, i.e. var layer_group = L.geoJSON(json, {...}).addTo(your_map);

  • In your brushended function, iterate over layer_group.eachLayer() and use your_map.removeLayer(layer) and your_map.addLayer(layer) to control the feature's visibility.

Here is the JSFiddle: https://jsfiddle.net/0dyjkk2h/2/

Leaflet map with D3 brush

  • Maybe I did not correctly understand the question. Do you want to be able to brush on the map or on a separate chart (like in my example)? – thibautg Sep 4 '17 at 14:10

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.