Animated Marker with Polyline

Sample Implementation

    
      
      <html>
        <head>
          <title>Animated Marker with Polyline</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 marker, map, add, poly;
        var coordinates = [
            [70.7805, 22.270962],[70.7805, 22.270962],[70.7805, 22.270962],[70.7805, 22.270962],[70.7805, 22.270962],[70.7812666, 22.27086],[70.7812516, 22.2708966],[70.78121, 22.270955],[70.7811466, 22.2710466],[70.7810883, 22.2711133],[70.7810749, 22.2711266],[70.7810516, 22.2711333],[70.7810066, 22.2711349],[70.78057, 22.271192],[70.780485, 22.270991],[70.780326, 22.271051],[70.780322, 22.271045],[70.780254, 22.271237],[70.780163, 22.271351],[70.779931, 22.271851],[70.779641, 22.272741],[70.779183, 22.273374],[70.778699, 22.274174],[70.778463, 22.274734],[70.778456, 22.274748],[70.778101, 22.275522],[70.777984, 22.27572],[70.777934, 22.275759],[70.777919, 22.275765],[70.777827, 22.275772],[70.777792, 22.275753],[70.777518, 22.27561],[70.776659, 22.275137],[70.775883, 22.274709],[70.775555, 22.274529],[70.774687, 22.274026],[70.773818, 22.273528],[70.773405, 22.273297],[70.773251, 22.273211],[70.773177, 22.273169],[70.772965, 22.273051],[70.772575, 22.272797],[70.772169, 22.272528],[70.77123, 22.272163],[70.770271, 22.27189],[70.770132, 22.271853],[70.77008, 22.27184],[70.769977, 22.271812],[70.769741, 22.271748],[70.768802, 22.271471],[70.76865, 22.271424],[70.768541, 22.271391],[70.768029, 22.271221],[70.767633, 22.271083],[70.76745, 22.271024],[70.766682, 22.270685],[70.76637, 22.270526],[70.766044, 22.270366],[70.765706, 22.270221],[70.764748, 22.270018],[70.764585, 22.270052],[70.764449, 22.270101],[70.764175, 22.270207],[70.764155, 22.270273],[70.764162, 22.27032],[70.764183, 22.270352],[70.764209, 22.27041],[70.764192, 22.270636],[70.764172, 22.271058],[70.764299, 22.271838],[70.764252, 22.2723],[70.76414, 22.2726],[70.763923, 22.273193],[70.763612, 22.274072],[70.763544, 22.274286],[70.763477, 22.274482],[70.763204, 22.27509],[70.76293, 22.27548],[70.762584, 22.276097],[70.762353, 22.277029],[70.76218, 22.277738],[70.762136, 22.27792],[70.762126, 22.277959],[70.762076, 22.278182],[70.762184, 22.278274],[70.762296, 22.278375],[70.762672, 22.27871]
        ];

        function initMap1() {
            /* create map */
            map = new mappls.Map('map', {
                center: [22.278482453646376, 70.76971779758742],
                zoom: 10
            });
            map.on('load', function() {
                /* create polyline */
                poly = new mappls.Polyline({
                    map: map,
                    paths: coordinates,
                    strokeColor: 'blue',
                    strokeOpacity: 1.0,
                    strokeWeight: 5,
                    cType: 1,
                    fitbounds: true
                });
                /* create marker */
                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: [20, 5],
                    position: {
                        lat: coordinates[0][1],
                        lng: coordinates[0][0]
                    },
                    fitbounds: false
                });
                marker['id'] = "m1"; /* store id in marker object */
                var c = 0;
                smoothll(coordinates, m = 2, hed = true, function(crd) {
                    start = function() {
                        if (add) return;
                        add = setInterval(() => {
                            c++;
                            if (crd[c]) {
                                marker.setPosition([crd[c][0], crd[c][1]]); /* change marker position */
                                document.getElementById(marker.id).style.transform = "rotate(" + crd[c][2] + "deg)"; /* change heading of marker */
                                if (c == (crd.length - 1)) {
                                    clearInterval(add);
                                }
                            }
                        }, 10);
                    };
                    start();
                });
            });
        }
        /* create lnglat between nodes for smooth movement of marker*/
        function smoothll(arr, m, h, call) {
            var prv = arr[0],
                next = arr[1],
                allCrd = [],
                mtr = m; /* the number of coordinate you want meter/second */
            for (var j = 0; j < arr.length; j++) {
                prv = arr[j], next = arr[j + 1];
                if (prv && next) {
                    var hed = 0;
                    if (h === true) hed = (90 - (ac(prv[0], prv[1], next[0], next[1])));
                    var dis = dis1(prv, next);
                    if (dis > mtr) {
                        var n = dis / mtr;
                        var crd = [];
                        for (var i = n - 1; i > 0; i--) {
                            crd.push([prv[0] * i / n + next[0] * (n - i) / n, prv[1] * i / n + next[1] * (n - i) / n, hed]);
                            if (Math.ceil(i) == 1) {
                                crd.push(next);
                            }
                        }
                    } else {
                        crd = [];
                    }
                    allCrd.push(crd);
                }
            }
            var finalcrd = Array.prototype.concat.apply([], allCrd);
            call(finalcrd)
        };
        /* calculate Distance between 2 point*/
        function dis1(start, destination, radius = 6371008.8) {
            var R = radius;
            var φ1 = toRadians(start[1]),
                λ1 = toRadians(start[0]);
            var φ2 = toRadians(destination[1]),
                λ2 = toRadians(destination[0]);
            var Δφ = φ2 - φ1;
            var Δλ = λ2 - λ1;
            var a =
                Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
                Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
            var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            var d = R * c;
            return d;
        };

        function toRadians(value) {
            return (value / 180) * Math.PI;
        };
        /* calculate heading between 2 point*/
        function ac(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;
        };
    </script>
        </body>
      </html>
      
      
      /* First install : npm install mappls-web-maps */

      import { Component, OnInit, ElementRef } from '@angular/core';
      import { mappls } from 'mappls-web-maps';
      @Component({
      selector: 'app-root',
      template: '<div  id="map"  style="width: 99%; height: 99vh; background-color: white;"></div>',
      styleUrls: ['./app.component.css']
      })
      export class AppComponent implements OnInit {
          mapObject: any;
          mapplsClassObject = new mappls();
                  title = 'Default Map';
        mapProps = { center: [28.6330, 77.2194] }

        ngOnInit() {
        this.mapplsClassObject.map({ id: "map", key: "<Token>", properties: this.mapProps }, (data: any) => {
            this.mapObject = data;
            });
            }

              }
      
      
      /* First install : npm install mappls-web-maps */
      
      import { mappls } from  'mappls-web-maps';
      import  './App.css';
      function  App() {
      const  styleMap  = {width:  '99%', height:  '99vh', display:'inline-block'}
      var mapObject ;
      var mapplsClassObject=  new  mappls();
          const title="Default Map"
    const mapProps = { center: [28.6330, 77.2194]}
    const map=mapplsClassObject.map({id:"map",key:"<Token>", properties: mapProps},(data)=>{
        mapObject = data;
        });
          return (
         <div  id="map"  style={styleMap}></div>
         );
      }
      export  default  App;
Request Call Back
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.
For Solutions : +91-7829 774 111
For Gadgets : +91-9999 333 223