Tracking Timeline

Sample Implementation

 

  <html>
  <head>
    <title>Tracking Timeline</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Tracking Timeline">

        <script src="https://apis.mappls.com/advancedmaps/api/<Token>/map_sdk?layer=vector&v=3.0&callback=initMap1"></script>
        <script src="https://apis.mappls.com/advancedmaps/api/<token>/map_sdk_plugins?v=3.0"></script>
        <style>
        body {
            margin: 0;
        }

        #map {
            width: 100%;
            height: 100vh;
            margin: 0;
            padding: 0;
        }
    </style>
    </head>

    <body>
        <div id="map"></div>
                <script>
            var routeData = [{
                    "deviceTime": "2023-02-08T04:07:33.000+00:00",
                    "latitude": 22.270962,
                    "longitude": 70.7805,
                    "speed": 0,
                    "course": 0
                },
                {
                    "deviceTime": "2023-02-08T04:08:08.000+00:00",
                    "latitude": 22.270962,
                    "longitude": 70.7805,
                    "speed": 0,
                    "course": 0
                },
                {
                    "deviceTime": "2023-02-08T04:08:24.000+00:00",
                    "latitude": 22.270962,
                    "longitude": 70.7805,
                    "speed": 0,
                    "course": 0
                },
                {
                    "deviceTime": "2023-02-08T04:08:53.000+00:00",
                    "latitude": 22.270962,
                    "longitude": 70.7805,
                    "speed": 0,
                    "course": 0
                },
                {
                    "deviceTime": "2023-02-08T04:09:24.000+00:00",
                    "latitude": 22.270962,
                    "longitude": 70.7805,
                    "speed": 0,
                    "course": 0
                },
                {
                    "deviceTime": "2023-02-08T04:09:45.000+00:00",
                    "latitude": 22.27086,
                    "longitude": 70.7812666,
                    "speed": 3.7797,
                    "course": 325
                },
                {
                    "deviceTime": "2023-02-08T04:09:46.000+00:00",
                    "latitude": 22.2708966,
                    "longitude": 70.7812516,
                    "speed": 4.85961,
                    "course": 339
                },
                {
                    "deviceTime": "2023-02-08T04:09:48.000+00:00",
                    "latitude": 22.270955,
                    "longitude": 70.78121,
                    "speed": 5.39957,
                    "course": 329
                },
                {
                    "deviceTime": "2023-02-08T04:09:52.000+00:00",
                    "latitude": 22.2710466,
                    "longitude": 70.7811466,
                    "speed": 4.31966,
                    "course": 348
                },
                {
                    "deviceTime": "2023-02-08T04:09:55.000+00:00",
                    "latitude": 22.2711133,
                    "longitude": 70.7810883,
                    "speed": 3.7797,
                    "course": 329
                },
                {
                    "deviceTime": "2023-02-08T04:09:56.000+00:00",
                    "latitude": 22.2711266,
                    "longitude": 70.7810749,
                    "speed": 3.7797,
                    "course": 309
                },
                {
                    "deviceTime": "2023-02-08T04:09:57.000+00:00",
                    "latitude": 22.2711333,
                    "longitude": 70.7810516,
                    "speed": 4.85961,
                    "course": 298
                },
                {
                    "deviceTime": "2023-02-08T04:09:58.000+00:00",
                    "latitude": 22.2711349,
                    "longitude": 70.7810066,
                    "speed": 6.47948,
                    "course": 272
                },
                {
                    "deviceTime": "2023-02-08T04:10:09.000+00:00",
                    "latitude": 22.271192,
                    "longitude": 70.78057,
                    "speed": 4.85961,
                    "course": 237
                },
                {
                    "deviceTime": "2023-02-08T04:10:18.000+00:00",
                    "latitude": 22.270991,
                    "longitude": 70.780485,
                    "speed": 3.23974,
                    "course": 227
                },
                {
                    "deviceTime": "2023-02-08T04:10:38.000+00:00",
                    "latitude": 22.271051,
                    "longitude": 70.780326,
                    "speed": 3.23974,
                    "course": 334
                },
                {
                    "deviceTime": "2023-02-08T04:10:39.000+00:00",
                    "latitude": 22.271045,
                    "longitude": 70.780322,
                    "speed": 3.23974,
                    "course": 345
                },
                {
                    "deviceTime": "2023-02-08T04:10:50.000+00:00",
                    "latitude": 22.271237,
                    "longitude": 70.780254,
                    "speed": 8.63931,
                    "course": 346
                },
                {
                    "deviceTime": "2023-02-08T04:10:52.000+00:00",
                    "latitude": 22.271351,
                    "longitude": 70.780163,
                    "speed": 10.2592,
                    "course": 335
                },
                {
                    "deviceTime": "2023-02-08T04:11:01.000+00:00",
                    "latitude": 22.271851,
                    "longitude": 70.779931,
                    "speed": 16.1987,
                    "course": 337
                },
                {
                    "deviceTime": "2023-02-08T04:11:13.000+00:00",
                    "latitude": 22.272741,
                    "longitude": 70.779641,
                    "speed": 15.6588,
                    "course": 337
                },
                {
                    "deviceTime": "2023-02-08T04:11:25.000+00:00",
                    "latitude": 22.273374,
                    "longitude": 70.779183,
                    "speed": 10.2592,
                    "course": 337
                },
                {
                    "deviceTime": "2023-02-08T04:11:43.000+00:00",
                    "latitude": 22.274174,
                    "longitude": 70.778699,
                    "speed": 8.63931,
                    "course": 342
                },
                {
                    "deviceTime": "2023-02-08T04:11:59.000+00:00",
                    "latitude": 22.274734,
                    "longitude": 70.778463,
                    "speed": 2.15983,
                    "course": 342
                },
                {
                    "deviceTime": "2023-02-08T04:12:27.000+00:00",
                    "latitude": 22.274748,
                    "longitude": 70.778456,
                    "speed": 0,
                    "course": 342
                },
                {
                    "deviceTime": "2023-02-08T04:13:29.000+00:00",
                    "latitude": 22.275522,
                    "longitude": 70.778101,
                    "speed": 14.5788,
                    "course": 333
                },
                {
                    "deviceTime": "2023-02-08T04:13:33.000+00:00",
                    "latitude": 22.27572,
                    "longitude": 70.777984,
                    "speed": 8.09935,
                    "course": 317
                },
                {
                    "deviceTime": "2023-02-08T04:13:34.000+00:00",
                    "latitude": 22.275759,
                    "longitude": 70.777934,
                    "speed": 7.01944,
                    "course": 305
                },
                {
                    "deviceTime": "2023-02-08T04:13:35.000+00:00",
                    "latitude": 22.275765,
                    "longitude": 70.777919,
                    "speed": 5.93953,
                    "course": 285
                },
                {
                    "deviceTime": "2023-02-08T04:13:36.000+00:00",
                    "latitude": 22.275772,
                    "longitude": 70.777827,
                    "speed": 6.47948,
                    "course": 260
                },
                {
                    "deviceTime": "2023-02-08T04:13:37.000+00:00",
                    "latitude": 22.275753,
                    "longitude": 70.777792,
                    "speed": 9.71923,
                    "course": 245
                },
                {
                    "deviceTime": "2023-02-08T04:13:41.000+00:00",
                    "latitude": 22.27561,
                    "longitude": 70.777518,
                    "speed": 15.6588,
                    "course": 235
                },
                {
                    "deviceTime": "2023-02-08T04:13:52.000+00:00",
                    "latitude": 22.275137,
                    "longitude": 70.776659,
                    "speed": 16.7387,
                    "course": 232
                },
                {
                    "deviceTime": "2023-02-08T04:14:03.000+00:00",
                    "latitude": 22.274709,
                    "longitude": 70.775883,
                    "speed": 11.3391,
                    "course": 239
                },
                {
                    "deviceTime": "2023-02-08T04:14:09.000+00:00",
                    "latitude": 22.274529,
                    "longitude": 70.775555,
                    "speed": 16.7387,
                    "course": 235
                },
                {
                    "deviceTime": "2023-02-08T04:14:22.000+00:00",
                    "latitude": 22.274026,
                    "longitude": 70.774687,
                    "speed": 12.959,
                    "course": 239
                },
                {
                    "deviceTime": "2023-02-08T04:14:38.000+00:00",
                    "latitude": 22.273528,
                    "longitude": 70.773818,
                    "speed": 12.959,
                    "course": 237
                },
                {
                    "deviceTime": "2023-02-08T04:14:46.000+00:00",
                    "latitude": 22.273297,
                    "longitude": 70.773405,
                    "speed": 7.01944,
                    "course": 236
                },
                {
                    "deviceTime": "2023-02-08T04:14:55.000+00:00",
                    "latitude": 22.273211,
                    "longitude": 70.773251,
                    "speed": 0,
                    "course": 235
                }
            ];
            /*Map Initialization*/
            var map, dd = [],
                tracking_plugin, tracking_option;

            function initMap1() {
                map = new mappls.Map('map', {
                    center: [22.27147184060101, 70.76587171703409],
                    zoom: 12
                });

                map.addListener('load', function() {
                    /*tracking plugin initialization*/
                    tracking_option = {
                        map: map,
                        data: routeData,
                        /* routeColor:"blue", */
                        strokeWidth: 7,
                        ccpIcon: 'https://cdn.mapmyindia.com/Intouch/web/img/marker_blue.png',
                        ccpIconWidth: 50,
                        fitBounds: true,
                        speedText: true
                        /*  ccpIcon:'http://www.mapmyindia.com/api/advanced-maps/doc/sample/map_sdk/car.png', */

                    }
                    tracking_plugin = mappls.trackingTimeline(tracking_option);
                });
            }
        </script>

        </body>
  </html>
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