Menu
Close

Animated Marker

Sample Implementation

    
      
      <html>
        <head>
          <title>Animated Marker</title>
          <meta name="viewport" content="initial-scale=1.0">
          <meta charset="utf-8">
          <style>
          html,
          body,
          #map {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100vh;
          }
          </style>
             <script src="https://apis.mappls.com/advancedmaps/api/<Token>/map_sdk?layer=vector&v=3.0&callback=initMap1" defer async></script>
            </head>
        <body>
                    <div id="map"></div>
                        <script>
        var map;

        function initMap1() {
            map = new mappls.Map('map', {
                center: [28.55266169899184, 77.2692803121563],
                zoom: 15
            });
            map.on('load', function() {
                marker = new mappls.Marker({
                    map: map,
                    width: 60,
                    height: 60,
                    html: '<img id="m1" src="https://www.mapmyindia.com/api/advanced-maps/doc/sample/map_sdk/car.png" style="width:20px; margin-left:0px;" />',
                    offset: [0, 5],
                    position: {lat: 28.55186943239279,lng: 77.26765259393522},
                    fitbounds: false
                });
                marker['id'] = "m1"; //icon id store in marker object (Important)
                var loc = [
                    {lat: 28.55335842118791,lng: 77.26624711641074},
                    {lat: 28.553970973758467,lng: 77.26844652780147},
                    {lat: 28.55405578844676,lng: 77.27057083734223},
                    {lat: 28.551761055814836,lng: 77.27028115877988},
                    {lat: 28.55186943239279,lng: 77.26765259393522},
                    {lat: 28.55335842118791,lng: 77.26624711641074}
                ];
                loc.forEach((latlng, i) => {
                    setTimeout(() => {
                        var speed = 5; // in meter
                        smoothNavigate(marker, latlng, speed);
                    }, (2000 * i));
                });
            });
            /* Set position Smoothly */
            function smoothNavigate(obj, setPos, no) {
                if (no != undefined && no) {
                    var coordinates = [];
                    var prv = obj.getPosition();
                    var next = setPos;
                    var dis = getDistanceFromLatLonInKm(prv.lat, prv.lng, next.lat, next.lng);
                    var hed = angleFromCoordinate(prv.lat, prv.lng, next.lat, next.lng);
                    var n = (Math.round(dis)) / no; /* the number of coordinates you want */
                    for (var i = n - 1; i > 0; i--) {
                        coordinates.push({
                            lat: prv.lat * i / n + next.lat * (n - i) / n,
                            lng: prv.lng * i / n + next.lng * (n - i) / n
                        });
                        if (Math.ceil(i) == 1) {
                            coordinates.push(next);
                        }
                    }
                    setTimeout(() => {
                        for (var i = 0; i < coordinates.length; i++) {
                            function invoke(x) {
                                setTimeout(() => {
                                    obj.setPosition(coordinates[x]);
                                    document.getElementById(obj.id).style.transform = "rotate(" + hed + "deg)";
                                }, 10 * x + 1);
                            };
                            invoke(i);
                        }
                    }, 1000);
                } else {
                    obj.setPosition(setPos);
                }
            }
            /* Find Heading of map using Two latlng */
            function angleFromCoordinate(lat1, lon1, lat2, lon2) {
                var p1 = {
                    x: lat1,
                    y: lon1
                };
                var p2 = {
                    x: lat2,
                    y: lon2
                };
                /* angle in radians */
                var angleRadians = Math.atan2(p2.y - p1.y, p2.x - p1.x);
                /* angle in degrees */
                var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
                return angleDeg;
            }

            /* calculate Distance between 2 point */
            function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {
                var R = 6371;
                var dLat = deg2rad(lat2 - lat1);
                var dLon = deg2rad(lon2 - lon1);
                var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
                var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
                var d = R * c; /* Distance in km */
                return d * 1000;
            }

            function deg2rad(deg) {
                return deg * (Math.PI / 180);
            }

        }
    </script>
        </body>
      </html>
      
      
      
    
  
Call at Mappls
Request Call Back

Personalisation SDK, by Mappls, is India's first O2O engagement tool that can 3X your customer engagement, retention and conversion.

There's so much that Mappls MapmyIndia can do for your enterprise or individual requirements. Explore our website to learn more or request a callback/email if you'd like us to connect with you.

or