Is it possible to draw and animate polylines with polymaps?

[codecowboy]

I would like to create a map which displays a route passing through several points. I would then like to clone this route (a series of polylines) and animate it by filling the polyline with another colour. The fill would extend as far as a user has travelled along the route.

Would something like this be possible using polymaps?

[shawnbot]

You'd have to interpolate the feature's geometry coordinates (perhaps with d3.js?) and force a redraw of the geoJson layer:

var map = po.map();
var layer = po.geoJson();
var coords = [...]; // your coordinates here
var feature = {type: "Feature", geometry: {type: "LineString", coordinates: coords}, ...};
layer.features([feature]);
map.add(layer);
// force a redraw
map.dispatch({type: "move"}); 

[codecowboy]

Thanks for your reply. Can you explain what you mean by interpolate the feature's geometry coordinates? Is the polyline 'the feature'? From a quick look at d3 it looks like I could use that to select the individual svg paths. I don't want to move the map layer, just the line. I mocked up a quick example when I started looking at the problem - http://jsfiddle.net/codecowboy/XkShV/. This is the effect I would like:

[mbostock]

You can call layer.reload to redraw the layer.

[shawnbot]

So yeah, I guess the answer to your original question is no: Polymaps can't animate polylines out of the box. The idea I was getting at in my previous comment was that you would keep references to the GeoJSON feature (feature) and its geometry coordinates (coords) around and, on a timer (or in response to a slider, etc.), interpolate the points along a path defined by those coordinates, update feature.geometry.coordinates accordingly, then redraw the layer (as Mike noted, using layer.redraw()). d3 does SVG, but it also just does interpolation and transitions really well. I can't recommend any particular strategy because I'm pretty new to it personally, but I'm sure you could find an example in the docs and build from that.

[codecowboy]

ok, thanks for your replies guys ;-)

[jensfinnas]

This might be a stupid question, but how does layer.redraw() work in practice?

layer = map.add(po.geoJson().url("hki.json"))
layer.reload()

...does not seem to work.

[mikeplis]

Just in case anyone happens to come across this looking for an answer to jensfinnas's question, it's layer.reload not layer.reload()