Leaflet API. Move a Marker Along a Polyline

[stefanodalli]

Hi there. Trying to migrate from Googlemaps to Leaflet enviroment, returns some errors in following script. Need an help, thanks.

Number.prototype.toRad = function() { return this Math.PI / 180; } // Number.prototype.toDeg = function() { return this 180 / Math.PI; } // polyline length calc L.Polyline.prototype.m_len = function (options) { var distance = 0, coords = null, coordsArray = this._latlngs; for (i = 0; i < coordsArray.length - 1; i++) { coords = coordsArray[i]; distance += coords.distanceTo(coordsArray[i + 1]); } return distance; } // L.LatLng.prototype.moveTowards = function(point, distance) {
var lat1 = this.lat().toRad(); var lon1 = this.lng().toRad(); var lat2 = point.lat().toRad(); var lon2 = point.lng().toRad();
var dLon = (point.lng() - this.lng()).toRad(); // Find the bearing from this point to the next. var brng = Math.atan2(Math.sin(dLon) Math.cos(lat2), Math.cos(lat1) Math.sin(lat2) - Math.sin(lat1) Math.cos(lat2) Math.cos(dLon));

  var angDist = distance / 6371000 ;  // 66371000 Earth's radius.
  // Calculate the destination point, given the source and bearing.
  lat2 = Math.asin(Math.sin(lat1) * Math.cos(angDist) + 
                   Math.cos(lat1) * Math.sin(angDist) * 
                   Math.cos(brng));
  lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(angDist) *
                           Math.cos(lat1), 
                           Math.cos(angDist) - Math.sin(lat1) *
                           Math.sin(lat2));

  if (isNaN(lat2) || isNaN(lon2))  {return null; }
  return new L.LatLng(lat2.toDeg(), lon2.toDeg());

} // end moveTowards // function moveAlongPath(points, distance, index) { index = index || 0; // Set index to 0 by default. if (index < points.length) { var poly = new L.Polyline([points[index], points[index + 1]]); var distanceToNextPoint = poly.m_len(); if (distance <= distanceToNextPoint) { return points[index].moveTowards(points[index + 1], distance); } else { return moveAlongPath(points, (distance - distanceToNextPoint), index + 1); } } else { return null; }
} // end moveAlongPath ////////// var points = <?php echo $coordstring; ?> ;
var polycolor = "<?php echo $race_polyclr; ?>"; var stroke_w = 5; if (mobile_dev == 1 ) { stroke_w = 10; } var polyline = L.polyline(points, {color: polycolor, weight: stroke_w, fillOpacity: 0.2}); map.addLayer(polyline);

[masterix]

I combined MovingMarker with leaflet and its polyline object but sometimes it is hard to have moving icon in the middle of line - see the attached image

var poly = L.polyline(bounds, {color: 'black', weight: '1'}); var myMovingMarker = L.Marker.movingMarker(bounds, [6000], { loop: true, icon: animatedIcon }).addTo(map); poly.addTo(map); bounds is the array of 2 points

[stefanodalli]

You must declare size and anchor ok your marker maybe: example: marker_km = L.Icon.extend({ options: { iconAnchor: [13,13], iconSize: [26,26] } });

[masterix]

Yes, I have such kind of initialization. Anchor is in the middle of icon but it doesn't help

[stefanodalli]

Remember that anchor X,Y values are 1/2 of MarkerSize.

[masterix]

var animatedIcon = L.icon({ iconUrl: iconPath + 'images/circle-icon-10.png', iconSize: [10, 10], iconAnchor: [5, 5] });

[stefanodalli]

right !

[masterix]

And it still doesn't work as expected..

I tried animatedMarket plugin but it doesn't allow to loop animation..