Using d3 in Leaflet

Question

This is a follow up question to my other one .

http://fiddle.jshell.net/zw8TR/16/

I have managed to utilise d3 to visualise the route between my map markers. I used this example by Mike Bostock as guidance.

The reason I'm using d3 for this instead of Leaflets built in Polyline, is because I'd like to experiment with d3's interpolation to smooth out some routes, and also create arc's for others (for flight routes). At this stage though, I'm just trying to find a way to get these to work for all routes.

The examples I've seen only use the interpolate() method with d3.svg.line() , whereas the Leaflet integration requires me to use d3.geo.path() . Is there a place in my code where it's possible to use this method with d3.geo.path() ?

Another possibly helpful link .

And another .

Thanks for any help.

Answer 1

Doing this is a bit messier than using d3.geo.path because that already implements all the boilerplate functionality you need for maps, but it's certainly possible. The idea is to extract the list of user coordinates from the geo path and translate them to screen coordinates in the line function. This translation can be done in the .x() and .y() functions of the line.

var path1 = d3.svg.line()
        .interpolate("cardinal")
        .x(function(d) { return map.latLngToLayerPoint(new L.LatLng(d[1], d[0])).x; })
        .y(function(d) { return map.latLngToLayerPoint(new L.LatLng(d[1], d[0])).y; });

Now we just need to extract the coordinates from the feature.

feature.attr("d", function(d) { return path1(d.geometry.coordinates); });

Complete example here .