0

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
                ]
            }
        }
    ]
}
  • My first observation, would be that the function reset is never being entered. I put a break point there, and it never got hit. Also, could you reduce the code a bit and/or format it or put it in jsFiddle. – John Powell Jun 30 '16 at 15:33
  • Hi, I tried to clean the code, and then edit the post. Do you mean this reset function? 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 + ")"; }); – Manuel Durazo Jun 30 '16 at 16:02
  • Yes, when I ran your example, the reset function was never entered. – John Powell Jun 30 '16 at 16:10
  • the code was a mess but now it is more clean, the reset function is already in the code, as it is in the second webpage i mentioned, i find it strange that a yellow circle appears in the corner – Manuel Durazo Jun 30 '16 at 16:23
2

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 (as L.marker's), then call snakeIn() 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.

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.