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
                ]
            }
        }
    ]
}
Improve this question
4
  • 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
    Commented Jun 30, 2016 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
    Commented Jun 30, 2016 at 16:02
  • Yes, when I ran your example, the reset function was never entered.
    – John Powell
    Commented Jun 30, 2016 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
    Commented Jun 30, 2016 at 16:23

1 Answer 1

Reset to default
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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.