I have been trying to animate a path over a leaflet map using the following example from Mike Bostock:
http://bl.ocks.org/zross/6a31f4ef9e778d94c204
After i make my own json and put it into code, i get nothing, or maybe I get something – a yellow circle on the left-top corner, as you can see here:
http://mdurazob.info/mapaleaf2.html
var mymap = L.map('map').setView([23.995244, -103.020029], 5);
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors | Tiles Courtesy of MapQuest ',
subdomains: ['otile1', 'otile2', 'otile3', 'otile4']
}).addTo(mymap);
var svg = d3.select(mymap.getPanes().overlayPane).append("svg");
var g = svg.append("g").attr("class", "leaflet-zoom-hide");
d3.json("rutahidalgo.geojson", function(collection) {
var featuresdata = collection.features.filter(function(d) {
return d.properties.id == "route1"
});
var transform = d3.geo.transform({
point: projectPoint
});
var d3path = d3.geo.path().projection(transform);
var toLine = d3.svg.line().interpolate("linear").x(function(d) {
return applyLatLngToLayer(d).x
}).y(function(d) {
return applyLatLngToLayer(d).y
});
var ptFeatures = g.selectAll("circle").data(featuresdata).enter().append("circle").attr("r", 3).attr("class", "waypoints");
var linePath = g.selectAll(".lineConnect").data([featuresdata]).enter().append("path").attr("class", "lineConnect");
var marker = g.append("circle").attr("r", 10).attr("id", "marker").attr("class", "travelMarker");
mymap.on("viewreset", reset);
function reset() {
var bounds = d3path.bounds(collection),
topLeft = bounds[0],
bottomRight = bounds[1];
text.attr("transform", function(d) {
return "translate(" + applyLatLngToLayer(d).x + "," + applyLatLngToLayer(d).y + ")";
});
begend.attr("transform", function(d) {
return "translate(" + applyLatLngToLayer(d).x + "," + applyLatLngToLayer(d).y + ")";
});
ptFeatures.attr("transform", function(d) {
return "translate(" + applyLatLngToLayer(d).x + "," + applyLatLngToLayer(d).y + ")";
});
marker.attr("transform", function() {
var y = featuresdata[0].geometry.coordinates[1]
var x = featuresdata[0].geometry.coordinates[0]
return "translate(" + mymap.latLngToLayerPoint(new L.LatLng(y, x)).x + "," + mymap.latLngToLayerPoint(new L.LatLng(y, x)).y + ")";
});
svg.attr("width", bottomRight[0] - topLeft[0] + 120).attr("height", bottomRight[1] - topLeft[1] + 120).style("left", topLeft[0] - 50 + "px").style("top", topLeft[1] - 50 + "px");
linePath.attr("d", toLine) g.attr("transform", "translate(" + (-topLeft[0] + 50) + "," + (-topLeft[1] + 50) + ")");
}
function transition() {
linePath.transition().duration(7500).attrTween("stroke-dasharray", tweenDash).each("end", function() {
d3.select(this).call(transition);
});
}
function tweenDash() {
return function(t) {
var l = linePath.node().getTotalLength();
interpolate = d3.interpolateString("0," + l, l + "," + l);
var marker = d3.select("#marker");
var p = linePath.node().getPointAtLength(t * l);
marker.attr("transform", "translate(" + p.x + "," + p.y + ")");
console.log(interpolate(t)) return interpolate(t);
}
}
function projectPoint(x, y) {
var point = mymap.latLngToLayerPoint(new L.LatLng(y, x));
this.stream.point(point.x, point.y);
}
});
AND this is the geojson:
{
"type":"FeatureCollection",
"crs":{
"type":"name",
"properties":{
"name":"urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features":[
{
"type":"Feature",
"properties":{
"latitude":21.159216,
"longitude":-100.934121,
"time":1,
"id":"route1",
"name":"Along route"
},
"geometry":{
"type":"Point",
"coordinates":[
-100.934121,
21.159216
]
}
},
{
"type":"Feature",
"properties":{
"latitude":20.527743,
"longitude":-100.807746,
"time":2,
"id":"route1",
"name":"Along route"
},
"geometry":{
"type":"Point",
"coordinates":[
-100.807746,
20.527743
]
}
},
{
"type":"Feature",
"properties":{
"latitude":20.951976,
"longitude":-101.427837,
"time":3,
"id":"route1",
"name":"Along route"
},
"geometry":{
"type":"Point",
"coordinates":[
-101.427837,
20.951976
]
}
},
{
"type":"Feature",
"properties":{
"latitude":21.018937,
"longitude":-101.257851,
"time":4,
"id":"route1",
"name":"Along route"
},
"geometry":{
"type":"Point",
"coordinates":[
-101.257851,
21.018937
]
}
},
{
"type":"Feature",
"properties":{
"latitude":19.768333,
"longitude":-101.189444,
"time":5,
"id":"route1",
"name":"Along route"
},
"geometry":{
"type":"Point",
"coordinates":[
-101.189444,
19.768333
]
}
},
{
"type":"Feature",
"properties":{
"latitude":19.283333,
"longitude":-99.35,
"time":6,
"id":"route1",
"name":"Along route"
},
"geometry":{
"type":"Point",
"coordinates":[
-99.35,
19.283333
]
}
},
{
"type":"Feature",
"properties":{
"latitude":20.095711,
"longitude":-99.838028,
"time":7,
"id":"route1",
"name":"Along route"
},
"geometry":{
"type":"Point",
"coordinates":[
-99.838028,
20.095711
]
}
},
{
"type":"Feature",
"properties":{
"latitude":19.768333,
"longitude":-101.189444,
"time":8,
"id":"route1",
"name":"Along route"
},
"geometry":{
"type":"Point",
"coordinates":[
-101.189444,
19.768333
]
}
},
{
"type":"Feature",
"properties":{
"latitude":19.989644,
"longitude":-102.288057,
"time":9,
"id":"route1",
"name":"Along route"
},
"geometry":{
"type":"Point",
"coordinates":[
-102.288057,
19.989644
]
}
},
{
"type":"Feature",
"properties":{
"latitude":20.291022,
"longitude":-102.544298,
"time":10,
"id":"route1",
"name":"Along route"
},
"geometry":{
"type":"Point",
"coordinates":[
-102.544298,
20.291022
]
}
},
{
"type":"Feature",
"properties":{
"latitude":20.674278,
"longitude":-103.010037,
"time":11,
"id":"route1",
"name":"Along route"
},
"geometry":{
"type":"Point",
"coordinates":[
-103.010037,
20.674278
]
}
},
{
"type":"Feature",
"properties":{
"latitude":22.176245,
"longitude":-102.340678,
"time":12,
"id":"route1",
"name":"Along route"
},
"geometry":{
"type":"Point",
"coordinates":[
-102.340678,
22.176245
]
}
},
{
"type":"Feature",
"properties":{
"latitude":22.769783,
"longitude":-102.582096,
"time":13,
"id":"route1",
"name":"Along route"
},
"geometry":{
"type":"Point",
"coordinates":[
-102.582096,
22.769783
]
}
},
{
"type":"Feature",
"properties":{
"latitude":22.931168,
"longitude":-101.092904,
"time":14,
"id":"route1",
"name":"Along route"
},
"geometry":{
"type":"Point",
"coordinates":[
-101.092904,
22.931168
]
}
},
{
"type":"Feature",
"properties":{
"latitude":23.127954,
"longitude":-101.114198,
"time":15,
"id":"route1",
"name":"Along route"
},
"geometry":{
"type":"Point",
"coordinates":[
-101.114198,
23.127954
]
}
},
{
"type":"Feature",
"properties":{
"latitude":23.644761,
"longitude":-100.643697,
"time":16,
"id":"route1",
"name":"Along route"
},
"geometry":{
"type":"Point",
"coordinates":[
-100.643697,
23.644761
]
}
},
{
"type":"Feature",
"properties":{
"latitude":23.821589,
"longitude":-100.724147,
"time":17,
"id":"route1",
"name":"Along route"
},
"geometry":{
"type":"Point",
"coordinates":[
-100.724147,
23.821589
]
}
}
]
}
Best Answer
As for animating a path, you might be interested in using Leaflet.Polyline.SnakeAnim plugin, instead of trying to achieve the result through D3.
You just have to create the intermediate
L.polyline's between each point in your GeoJSON data, possibly adding the point themselves (asL.marker's), then callsnakeIn()on the resulting Layer Group.Demo: http://jsfiddle.net/3v7hd2vx/36/
Note: the plugin is compatible with Leaflet 1.0, but not with Leaflet 0.7.