openplans / leaflet.animatedmarker Goto Github PK

View Code? Open in Web Editor NEW

366.0 29.0 111.0 196 KB

A Leaflet plugin to animated a Marker along a polyline

Home Page: http://openplans.github.com/Leaflet.AnimatedMarker/

License: MIT License

CSS 59.49% JavaScript 25.85% HTML 14.66%

leaflet.animatedmarker's People

Contributors

Stargazers

Watchers

Forkers

nhinze gijs scottbrimberry pau1m wolfiezero pierrelorioux liuzhiguo pajaro5 davidheyman bentist ascandella dgorissen zeke flybluewolf maasik vhwessel tolik129 designagencytom pkaushik solo999 svad clhenrick hyeong-jin tsellste redfoxkamakura acricaa briantjacobs ruanyl kenshiro-o josselinphilippe nderitufrancis50 rukku alantai kendelljoseph lorenzosfarra keithcys becompany soronubot teghoz pandaskii a42 kennymatthew personsg javiermaly rjauquet fgcarto gisdaocaoren mannava bladepop hudsonhyunlim able1991 mcanthony openmaps jarvanxing alperdincer teropes intermaps cuulee thdtjsdn jakehm kennynaoh simplycomplexco ailong wyangwo druzinis wmaiouiru utkucansever zhouhaizhou siddharthsethi11 beenotung yoloasia balao7 ycylingithub h0schi hd1001 myungsunscott nastucy wushengcq zhxsh shmen jiegiser anke522 izidio tatuco codemaster34 sunilnkashyap emi-hi haoyuant scalhoun anshuljain1985 owaresabd script47 danireload ccci-code oncepursuit li736247056 matthewanstey can2399 kinow acyadigar

leaflet.animatedmarker's Issues

Project Status and recommended fork?

This project looks unmaintained? Is there a recommended fork to move to?

demo ko

Your demo is ko
Please fix the problem, I want to see how this plugin looks

The console log says:
leaflet.css:1 Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID
leaflet-src.js:1 Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID
AnimatedMarker.js:1 Uncaught ReferenceError: L is not defined
at AnimatedMarker.js:1
demo.js:7 Uncaught ReferenceError: L is not defined
at demo.js:7
at demo.js:63
/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)

Issue with zooming

In my application, I'm seeing an issue when I zoom in/out. On your demo, it looks like when you zoom in/out the marker moves back to it's correct position. That's not happening on mine. A similar effect is not happening when I switch tabs and go back.

Could it be because my path is one long line, and maybe the demo is a bunch of smaller ones?

Draw a line while the animated marker moves over the map

Is it possible to draw a line while the animated marker moves over the map? With a little guide I could try to do it.

stop() does not work for me.

Hello.

Thank you very much for the animated marker plugin for leaflet js.

I am not sure if it a bug, but the function stop() does not work for me? Do I make a mistake?

This is my code example:

`
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8"/>
<title>Eine OSM Karte mit Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="AnimatedMarker.js"></script>
</head>
<body>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<div style="height: 700px;" id="mapid"></div>
<script>
var mymap = L.map('mapid', {doubleClickZoom:false}).setView([50.27264, 7.26469], 9);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
/*
var line = L.polyline(
[[50.68510, 7.94136],[50.68576, 6.94149],[51.68649, 6.94165]]),
animatedMarker = L.animatedMarker(line.getLatLngs());*/

var line = L.polyline(
[[50.68510, 7.94136],[50.68576, 6.94149],[51.68649, 6.94165]]),
animatedMarker = L.animatedMarker(line.getLatLngs(), {
autoStart: false,
distance: 200, // meters
interval: 1000, // milliseconds
});

mymap.addLayer(animatedMarker);

function start(){animatedMarker.start();}
function stop(){animatedMarker.stop();}

</script>

</body>
</html>
`

Thanks
Astrid

demo not working under https

Some dependencies cannot be loaded under https.

Console log

openplans.github.io/:13 Mixed Content: The page at 'https://openplans.github.io/Leaflet.AnimatedMarker/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Dancing+Script:700'. This request has been blocked; the content must be served over HTTPS.
openplans.github.io/:15 Mixed Content: The page at 'https://openplans.github.io/Leaflet.AnimatedMarker/' was loaded over HTTPS, but requested an insecure stylesheet 'http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css'. This request has been blocked; the content must be served over HTTPS.
openplans.github.io/:1 Mixed Content: The page at 'https://openplans.github.io/Leaflet.AnimatedMarker/' was loaded over HTTPS, but requested an insecure script 'http://cdn.leafletjs.com/leaflet-0.4.5/leaflet-src.js'. This request has been blocked; the content must be served over HTTPS.
AnimatedMarker.js:1 Uncaught ReferenceError: L is not defined
    at AnimatedMarker.js:1
(anonymous) @ AnimatedMarker.js:1
demo.js:7 Uncaught ReferenceError: L is not defined
    at demo.js:7
    at demo.js:63
(anonymous) @ demo.js:7
(anonymous) @ demo.js:63

Browser (Brave) Versions

Brave: 0.19.123 
rev: f45cb3a2b308ea1c893f8b2db6143958b8e8d0ac 
Muon: 4.5.31 
libchromiumcontent: 63.0.3239.108 
V8: 6.3.292.48 
Node.js: 7.9.0 
Update Channel: Release 
OS Platform: Linux 
OS Release: 4.14.11-1-ARCH 
OS Architecture: x64

Tested on Firefox without any extensions, it works under http.

Update to use dom/PosAnimation.js for animations

As suggested by @mourner

move the popup label (animated) together with marker.

Is it possible to animated-move the popup (label) with the animated marker?
on L.animatedMarker.setLatLng(newLatLng); the popup jumps to the destination first and then de marker smoothly moves to the new LatLng position.
it would be so nice if they move together to the new endpoint, is there an easy solution for this?
Thanks!

The demo doesn't work because gh-pages branch is not up-to-date

The index.html of the gh-pages branch still tries to load Leaflet 0.4.5. Thus the demo at https://openplans.github.io/Leaflet.AnimatedMarker/ does not display any map.

stop moving map when marker is moving

hello
i am using leaflet in my project. for moving the markers on the map i am using this plugin. it is very useful for me also. but i am getting a serious problem with it. on my map several vehicles are there on different different positions(gps locations).i am getting new positions(data) via web socket. so while one vehicle is moving and suddenly another vehicle started to move the map immidietely moves to that position.i want wherever the marker may move but the map should always be stand and still. can this be done in anyway? i am really in trouble for this. please help me as soon as possible.for me its very urgent. thanks in advance. any kind of help is welcome.

with regards
datta

Callback function ?

Hi,

great little plugin. It would be nice to be able to define a callback function that would receive the current status of the animation (current distance travelled, lat/long, time?) so that events can be triggered along the path when the marker reaches a certain spot. I'm hacking it it right now, but it would be a nice feature.

Thanks,

Nick,

package.json

Is there a plan to add a package.json file for node compatibility? Right now I'm downloading manually but it would be nice to automate the install process.

Set Start position of moving

Can you create a function which set start moving position of marker in custom place by setting lat and lng?

restart animation

I needed to restart the animation when a user clicks a button. I added this to the AnimatedMarker.js file

  reStart: function(latlngs){
    this.initialize(latlngs);
    // Don't show CSS transition back to initial position
    this._icon.style[L.DomUtil.TRANSITION] = ('all ' + 0 + 'ms linear')
    this._shadow.style[L.DomUtil.TRANSITION] = ('all ' + 0 + 'ms linear')
    // Reset marker to initial position
    this.setLatLng(this._latlngs[0]);
    var that = this;
    setTimeout(function(){
      that.start();
    }, 200)
  }

...and this to my onclick handler

animatedMarker.reStart(line.getLatLngs());

There may be a better solution, but this is working for me.

infinite loop

Hello,
I have an icon walking along the polyline, from source to destination point. Now I am trying to implement a permanent restart of the movement: when arriving at destination, it should restart from source point. Any hints ?
Thanks, Th

Move the marker

hi,

Thanks for the wonderful animated marker plugin for leaflet js. I was wondering how can I move the marker based on the gps co-ordinates instead of using the array?

I can't preload the array with co-ordinates as I need to update/move the marker as and when the gps co-ordinates changes.

Thanks a ton,
M&M

Question

How can I attach a popUpbox to the animated marker ? I need it to show some data (with user need to click on the marker)

Thanks,

how can add latlngs to the polyline in interval when it start run

in inactive Browser tab markers are not moving

I have marker that move at the speed of 10kmph. If I switch the tab in the browser for a few minutes, and then switch it back, the marker will very quickly move from the point where it was at the point where it should be. After that this speed become same

Jump motion sort of

Hi,

I was wonder if it is possible to simulate a jump (alike) motion with this awesome plugin?

Thanks,
Luca

Make the markers jump

Hi @OpenPlansAdmin,

I was playing around with your awesome plugin and I was wondering if there is a recommended way to make the markers jump like in google maps?

Thanks,
Luca

calling animatedMarker.stop() from an event listener

Having problems getting the marker to stop at a specific lat lon using the Leaflet 'move' event listener.
A live example is available here and code is available here

Any plans on adding to npm?

This is the best way to animated a marker on leaflet that I've found. It would be easier to implement if there was an npm package.

And this requires jquery right? Add that the to the readme at least.

feature request: flip marker image, depending on direction of movement

First: thank you for this nice plugin!

I am using it to display a walking route using a "walking person" icon. When the route is headed east-west, the person icon is walking in its natural forward direction. When the route is west-east however, the icon is walking backwards. I should like to "flip" the icon when changing direction.
Another option would be to rotate the icon depending on the compass angle of each route segment. (BTW: I would prefer the flip option, because rotating would make my walking person icon move upside-down when heading westwards...)

Using animated marker with realtime GPS data

hi, thanks a lot for the fantastic plugin - looks cool. Had a small question as I am just getting started the leaflet - I have a situation where GPS data is received periodically by the server. How can I use your animated marker plugin to smoothly move the marker to the new gps location rather than just the current 'abrupt' jump method I am using. I guess I will have to do something like below?

var line = L.polyline([[Current Lat Lon],[New Lat lon]]),
    animatedMarker = L.animatedMarker(line.getLatLngs());

map.addLayer(animatedMarker);

Do I have to keep doing map.addLayer for every new gps position that I receiver?

Thanks,
M&M

Not working properly for custom CRS

Hi,
I've open an issue for Leaflet but seems like the problem has to be solved here due to limitations
Leaflet/Leaflet#2946

The problem I have is that I'm using a custom CRS and this plugin is using LatLng.distanceTo() method to calculate the distance between points. This is not working properly in my use case as this value is always calculating the value with the Earth CRS:

distanceTo: function (other) {
return L.CRS.Earth.distance(this, L.latLng(other));
}

The plugin should keep an instance of the configured map and use ´´´map.distance(latlng1, latlng2)´´´ to calculate the distances, this way it will use my custom CRS to calculate the distances.

Salu2.

Start from first point of line.

Why not starting from first point of line?

zoom transition speed

It'd be nice to separate the transition speed for the movement from the zoom. I have no idea if that's possible, or how difficult it would be.

So for example, if I zoom out, right now it uses the defined speed for the transition, and does a slow animation to the new appropriate location. I'd like it to instead be there almost instantly.

Question: is it possible to reverse the movement over a given line

Over a (existing) network of lines on a map it would be useful to be able to move markers to and fro. Is this possbile?

Markers position bug when map zooming

Is there any solution to this problem?

Fix the demo!

please

Adding to Bower's registry

I wonder if AnimatedMarker could be added to Bower's registry? I am happy to do it.

onEnd gets called twice

Hi, thank you very much for this plugin. It is awesome.

What I'm trying to do is to create an animated marker that goes from one place to another and, at the end, create another (ONE) animated marker in the same latitude and longitude that goes to another place and remove the first one.

Right now, when the first animation ends it creates two animated markers.

After a little debugging I found that onEnd function gets called twice in the first animated marker and probably in the second marker as well.

Here is a that part of the code:

function moveDriverToPassengerLocation(driver, passenger) {

    // Creating the request for google's direction services
    var request = {
        origin: driver.startLocation,
        destination: passenger.startLocation,
        travelMode: 'DRIVING'
    };

    // Sending the request
    directionsService.route(request, function (result, status) {

        // Verify if the status is ok for getting the path
        if (status == 'OK') {
            // Decoding the polyline
            var decodedPath = L.PolylineUtil.decode(
                result.routes[0].overview_polyline);

            // Verify if the path has more than one point
            if (decodedPath.length > 1) {

                var line = L.polyline(decodedPath);

                // Creating the new animated marker
                var marker = L.animatedMarker(line.getLatLngs(),
                {
                    distance: 300,
                    interval: 2000,
                    icon: taxiIcon,
                    onEnd: function() {
                        map.removeLayer(this);
                        moveDriverToPassengerDestination(driver, passenger);
                    }
                }).addTo(map);
                marker.id = driver.id;
                marker.startLocation = driver.startLocation;
                driversMarkers.push(marker);
                marker.start();
            } else {
                removeDriverMarker(driver);
                removePassengerMarker(passenger);
                moveDriverToPassengerDestination(driver, passenger)
            }
        }
    });
}

function moveDriverToPassengerDestination(driver, passenger) {
    // Creating the request for google's direction services
    var request = {
        origin: passenger.startLocation,
        destination: passenger.destination,
        travelMode: 'DRIVING'
    };

    // Sending the request
    directionsService.route(request, function (result, status) {

        // Verify if the status is ok for getting the path
        if (status == 'OK') {
            // Decoding the polyline
            var decodedPath = L.PolylineUtil.decode(result.routes[0]
                .overview_polyline);

            // Verify if the path has more than one point
            if (decodedPath.length > 1) {
                var line = L.polyline(decodedPath);
                // Creating the new animated marker
                var marker = L.animatedMarker(line.getLatLngs(),
                {
                    distance: 300,
                    interval: 2000,
                    icon: taxiIcon,
                    onEnd: function() {
                        map.removeLayer(this);
                    }
                }).addTo(map);
                marker.id = driver.id;
                marker.startLocation = driver.startLocation;
                driversMarkers.push(marker);
                marker.start();
            }
        }
    });
}

the last point never added to chunked path

When pushing latlngs into the chunkedLatLngs the last point (latlngs[len-1]) never added. I think you need to add chunkedLatLngs.push(latlngs[len-1]) or chunkedLatLngs.push(next) before return:

_chunk: function(latlngs) {

var i,
    len = latlngs.length,
    chunkedLatLngs = [];
for (i=1;i<len;i++) {
  var cur = latlngs[i-1],
      next = latlngs[i],
      dist = cur.distanceTo(next),
      factor = this.options.distance / dist,
      dLat = factor * (next.lat - cur.lat),
      dLng = factor * (next.lng - cur.lng);

  if (dist > this.options.distance) {
    while (dist > this.options.distance) {
      cur = new L.LatLng(cur.lat + dLat, cur.lng + dLng);
      dist = cur.distanceTo(next);
      chunkedLatLngs.push(cur);
    }
  } else {
    chunkedLatLngs.push(cur);
  }
}    
chunkedLatLngs.push(latlngs[len-1]); // <------------------ add

return chunkedLatLngs;

}

setIcon gracefully

I just noticed if I set the icon for an animated marker while it's in mid-movement, it jumps ahead to the final position. The expected behavior is it should change icons, and continue from it's current position.

when "zoom ing", the marker slides to the correct position instead of snapping to it

when a marker stops at the end of a line, if you zoom in or out the marker will slowly slide to the correct position. the same behavior is encountered during the movement of a marker if you zoom in or out.
please let me know if I am doing something wrong or if I can correct this.
thank you

Add git tag

Hello @atogle ,
I am the member of the cdnjs project.
We want to host this library.
Could you add the git tags in Github?
Thanks.

cdnjs/cdnjs#6746

Using with react-leaflet

Instead of putting it in my html, I require the plugin like this
require('./AnimatedMarker')
And I add this to the end of AnimatedMarker.js
module.exports = L.animatedMarker

My custom element looks like this:

require('./AnimatedMarker')
import { MapComponent } from 'react-leaflet'
import L from 'leaflet'

export default class AnimatedMarkerElement extends MapComponent {

  componentWillReceiveProps(nextProps) {
    const line = L.polyline([nextProps.route.coordinates]),
      animatedMarker = L.animatedMarker(line.getLatLngs())

    console.log('in componentWillRecieveProps')
    nextProps.map.addLayer(animatedMarker)
  }

  render() {
    return null
  }
}

The error is:
Uncaught TypeError: Cannot read property 'lat' of null
I think that the plugin is looking for a map that it can't find because its burried inside react elements.