Achieving animated zoom with d3 and Leaflet

20
votes

Using d3 to plot SVG artefacts on top of a Leaflet map is a simple way to get a solid map controller combined with the strength of d3. There are numerous examples and guides as how to achieve this and the two main approaches seem to be:

  1. Appending a new SVG element on Leaflet's "overlay pane" as demonstrated by Bostock here: http://bost.ocks.org/mike/leaflet/

  2. Implementing a custom vector tile layer that hooks in to Leaflets native tile layer ecosystem as demonstrated by Nelson Minar here: http://bl.ocks.org/NelsonMinar/5624141

The first approach avoids Leaflets scale-based zooming by attaching a leaflet-class so that any d3-elements are hidden while the scaling takes place. When the zoom animation is over, the element coordinates are re-calculated and redrawn whereafter the hide-class is removed to expose the elements again. This works, but gives a less clean zoom in/out experience than with Leaflet's native GeoJSON layer, as the latter supports animated zoom.

The second approach does not contain any implementation specific code that adress the zooming behaviour but does somehow work anyway! The d3 elements are scaled during animated zoom and then replaced neatly with the next zoom levels vectors.

What I would like to achieve is a combination of the two. I would like to plot non-tile-based vectors based on Geo/TopoJSON that are animated during zoom in/out. I've fiddled around with using different leaflet css-classes, different event-hooks, and attaching and/or reusing the SVG elements in numerous ways but have not yet achieved a behaviour that is similar to the behaviour experienced when using Leaflet's native GeoJSON vector layer. The reason I don't want to use the native layer is that I want to make use of plenty of other d3 functionality simply not part of the Leaflet implementation.

Question: Has anyone achieved animated zooming when combining Leaflet and d3 using non-tile-based vectors? If so - how?

1
d3.jsleaflet
You might want to look at (this example) of an animated zoom on d3 maps. Note that it's slower than some other d3 zoom examples since it re-calculates the map projection as it zooms, instead of just using graphical transforms to scale the image. I don't have any experience with Leaflet, but if you can set the scale/projection with a Javascript call, then you could do that from the d3 zoom function at the same time as you recalculate the d3 map projection. But again, that's a lot of recalculating at each step, so the zoom probably won't be super-smooth. - AmeliaBR
Thanks for the hint, but yes, I believe the solution has to be based on a pure graphical approach for the actual zooming, rather than one that calculates the geo-coordinates during the transition. - averas

1 Answers

19
votes

Example

I think this is one of the best solutions I have found for combining Leaflet and d3, by ZJONSSON.

d3 + Leaflet Integration

In this example the Leaflet map is initiated as SVG here map._initPathRoot(), with the SVG then selected using d3 var svg = d3.select("#map").select("svg"), g = svg.append("g");, after which all the d3 fun can be had.

In this example, the Leaflet map event map.on("viewreset", update); is used to call update and transition the d3 layer on map viewreset. After this, d3 transition options will determine how the d3 layer reacts to the Leaflet map pan/zoom event.

In this way you have the full scope of the d3 + Leaflet libraries without the hassle of calculating map bounds etc, as this is handled nicely by Leaflet.

Animated Vector Zooming

For animation, the latest Leaflet release includes a Pan and Zoom animation option. Whilst this is not as customisable as d3, you could always edit the Leaflet src code to alter the transition duration! Leaflet GeoJSON vector layers (L.geoJson) will not need to be updated on a Leaflet map event (in update), as they are already added to the map as SVG and handled by Leaflet.

Note that if implementing L.geoJson, this also means you wont need to map._initPathRoot(), as Leaflet will add the layer to the map as SVG, so you can just d3.select it.

It is also possible to add a className variable in the L.geoJson layer options so you can style via CSS or d3.select a feature via a unique class id assigned during Leaflet onEachFeature.