CODEWITHSUNDEEP
javascriptopenstreetmapleaflet
Azeem
Azeem

Reputation: 2924

Move marker on Openstreet map - Leaflet API

Guys i am complete newbie in using openstreetmaps. I have put some markers on it with custom icons, embedded with popups, etc. Now, I really need to know how to move a marker on Openstreet map. I am implementing it using Leaflet API. There is nothing on marker animation b/w two points on documentation of letlet offical website. Please help me out here because i am clueless. Give me some links or blogs or some kind of helping material on it.

Thanks.

Upvotes: 5

Views: 20980

Answers (6)

Jaime L
Jaime L

Reputation: 31

Use Leaflet.MovingMarker:

    //MovingMarker Options
     var animationMarker = L.Marker.movingMarker(
                            [[48.8567, 2.3508],[50.45, 30.523333]],
                            20000, {autostart: true});
    // Custom Icon Object
    var greenIcon = L.icon({
                            iconUrl: 'icon.png',
                        });
    // Set icon to movingMarker
    animationMarker.options.icon = greenIcon;
    // Add marker to Map
    map.addLayer(animationMarker );

Upvotes: 3

i kadek teguh mahesa
i kadek teguh mahesa

Reputation: 49

you can create moving marker animation using https://github.com/dekguh/Leaflet.MoveMarker, This plugin is made by me and is up to date with the latest leaflet version

You can see an example of use in https://codesandbox.io/s/l-movemarker-basic-usage-fkdvty

Upvotes: 1

Hugo Barragon
Hugo Barragon

Reputation: 62

You have this plugin to leaflet, when you have the new position, instead of doing a .setlatlng() and the marker jumps to that position, you do a .slideTo() and the marker will slide smothly to that new position, and you dont need a set of positions as Leaflet.MovingMarker, you just git the new one and it does everything for you example:

<!DOCTYPE html>
<html>
<head>
<style>
#map {
    height: 500px;
    width: 80%;
}
</style>
<script><!-- will be fixed on next release -->
    <!-- Include this script if exports does not exists on window or -->
    <!-- the following error "ReferenceError: exports is not defined" -->
    <!-- before the cdn import -->
        var exports = {};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
<script src="https://unpkg.com/[email protected]/lib/DriftMarker/Drift_Marker.js"></script>
</head>
<body>
<div id="map"></div>
</body>
<script>
        // We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.
        // Creating a tile layer usually involves setting the URL template for the tile images
        var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
            osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            osm = L.tileLayer(osmUrl, {
                maxZoom: 18,
                attribution: osmAttrib
            });
            
        // initialize the map on the "map" div with a given center and zoom
        var map = L.map('map').setView([19.04469, 72.9258], 1).addLayer(osm);
        
        var marker = new Drift_Marker([19.04469, 72.9258], {
                draggable: true,
                title: "Resource location",
                alt: "Resource Location",
                riseOnHover: true
            }).addTo(map)
                .bindPopup("test").openPopup();
        
        // Script for adding marker on map click
        function onMapClick(e) {
         marker.slideTo(    e.latlng, {
                duration: 2000
              });
        }
        map.on('click', onMapClick);
    marker.slideTo( [20, 20], {
      duration: 2000
    });
</script>
</html>

(click on the map and marker will slide to his new position)

leaflet-drift-marker

Upvotes: 0

Cooper
Cooper

Reputation: 21

You can use Leaflets marker.setLatLng(<LatLng> latlng) function. These markers have an icon which is a HTML element. You can style it using css with the transition method.

An example would be

<style>
    .<icon-class> {
      transition: all 1s;
    }
</style>

This makes the marker move to the new location in a straight line for the duration of one second.

Upvotes: 2

LSkuse
LSkuse

Reputation: 11

https://github.com/ewoken/Leaflet.MovingMarker

Add the script then use:

var myMovingMarker = L.Marker.movingMarker([[48.8567, 2.3508],[50.45, 30.523333]], [20000]).addTo(map);

myMovingMarker.start();

Upvotes: 1

Marcel Pfeiffer
Marcel Pfeiffer

Reputation: 1068

There is L.PosAnimation in the API to do things like this:

http://leafletjs.com/reference.html#posanimation

For a more sophisticated approach you could take a look at this plugin:

https://github.com/openplans/Leaflet.AnimatedMarker

Upvotes: 1

Related Questions