Menu
Close

Marker Follows Path

Sample Implementation

    
      
      <html>
        <head>
          <title>Marker Follows Path</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, polyline;
        var path = [{ lat: 28.55186943239279, lng: 77.26765259393522 }];

        function initMap1() {
            map = new mappls.Map("map", {
                center: [28.553033295685296, 77.26818903573576],
                zoom: 16,
                zoomControl: true,
                clickableIcons: false,
                disableDoubleClickZoom: true,
            });
            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: [20, 5],
                    position: {
                        lat: 28.55186943239279,
                        lng: 77.26765259393522,
                    },
                    fitbounds: false,
                });
                marker["id"] = "m1"; //icon id store in marker object (Important)


                map.addListener("click", function (e) {
                    path.push({
                        lat: e.lngLat.lat,
                        lng: e.lngLat.lng,
                    });

                    if (path.length < 3) {
                        polyline = new mappls.Polyline({
                            map: map,
                            paths: path,
                            strokeColor: '#333',
                            strokeOpacity: 1.0,
                            strokeWeight: 3,
                            fitbounds: true
                        });
                    } else {
                        polyline.extend({ lat: e.lngLat.lat, lng: e.lngLat.lng });
                    }


                    smoothNavigate(
                        marker,
                        {
                            lat: e.lngLat.lat,
                            lng: e.lngLat.lng,
                        },
                        5
                    );
                });
            });
        }

        // 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
                ); // find distancr
                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);
                    }
                }, 100);
            } 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; // Radius of the earth in km
            var dLat = deg2rad(lat2 - lat1); // deg2rad below
            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