ESRI javascript API for live tracking

Question

I am trying to implement live tracing feature using the ESRI ArcGIS javascript API. I am unable to move the marker based on the lat, lng retrieved from the database. To give a clear idea, this is the existing code where we are using Google maps for this purpose. How to achieve the same using ESRI arcGIS javascript API?

<script type="text/javascript">

 var marker, map, ct=0, geocoder ;
  function initialize() {
    var myLatlng = new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $lng; ?>);
    var mapOptions = {
      zoom: 14,
      maxZoom: 16,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('main-map'), mapOptions);
    geocoder = new google.maps.Geocoder();


    var image = new google.maps.MarkerImage(
            'assets/images/marker-images/image.png',
            new google.maps.Size(20,21),
            new google.maps.Point(0,0),
            new google.maps.Point(10,21)
        );


    marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        icon: image,    
        title: 'I might be here'
    });

  }


  ///////////////////////////////////////////////////

  $(function() {
    initialize();
    live();
    setInterval( live , 10000);
  });  

   function live() {       
        var duration = 10000;

        $.ajax({

           type: "GET",
           url: "otravels_ajax/getlivedata.php?vid=<?php echo $imei; ?>",
           dataType: 'xml',
           async:false,
           success: function(xml) { 
               $(xml).find("marker").each(function(){ 

                var id = $(this).find('id').text(); lid=id; //alert(lid);
                var lat = $(this).find('lat').text();
                var lng = $(this).find('lng').text();
                var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));//console.log(point);

                var ts = $(this).find('ts').text();//alert(ts);
                var speed = $(this).find('speed').text();
                var status = $(this).find('status').text();
                if(status=='A') status="<span class='label label-success '>Active</span>"; else status="<span class='label label-important '>InActive</span>";
                var loc_addr = $(this).find('loc').text();
                var img=$(this).find('img').text();

                var image = new google.maps.MarkerImage(
                    img,
                    new google.maps.Size(46,42),
                    new google.maps.Point(0,0),
                    new google.maps.Point(23,42)
                );  
                 marker.setIcon(image);
                 marker.animateTo(point, {easing: 'linear', duration: duration});

                 if(!map.getBounds().contains(point))
                 map.panTo(point);

                // $('#live_data').html("<tr><td>"+ts+"</td><td>"+speed+"KM/HR</td><td>"+status+"</td><td id=\"loc\">"+loc_addr+"</td></tr>");

                 $("#d_time").html(ts);
                 $("#d_speed").html(speed+"KM/HR");
                 $("#d_status").html(status);



                 geocoder.geocode({
                 "latLng":point
                 }, function (results, status) {         // alert("fgb"); 
                     if (status == google.maps.GeocoderStatus.OK) {  
                         var placeName = results[1].formatted_address;  //alert(placeName);
                         $("#loc").html(placeName);
                    } 
                });     


             });
        }
        }); 

    }


</script>

Answer 1

The API documentation includes two samples for tracking.

To tracking current location: https://developers.arcgis.com/javascript/latest/sample-code/widgets-track-basic/index.html

To simulate tracking from a set of locations: https://developers.arcgis.com/javascript/latest/sample-code/widgets-track/index.html

Answer 2

Well, there is straight forward way to achieve this.

As you mentioned in the question you already have all those live lat/long values somewhere in your database.

Note:- There are quite different approach to handle GIS data in ArGIS and Google maps. To show the location on the map we usually use graphics layers(recommend) in ArcGIS JS API.

Below are the steps to Achieve this-

1. Create a ESRI Map
2. Create and load a graphics layer for live tracking features
3. Get the current/live location from database.
4. Once you get the live location from your database then clear the previous live tracking features and add new at newly found locations.
5. After every refresh interval your have to clear the previous data/ point from map and add new one.

You can use move Edit operation of the feature using ArcGIS/ESRI tools but that will be too complicated so recommend to remove and add feature.

Hoping above hints will help you :)