Member Avatar for riccardo_1

Hi all,
i'm currently workin on a project and i need to show on a maps the live position of my car.
i have an arduino wich send every 5sec to my DB the position
The problem is that i can't figure out how to refresh my polylines every 5second without reloading the page!
any help will be realy apreciate.
thanks
riccardo

<?php

$result = mysql_query("SELECT `lat`, `lng` FROM `valori' ");
   while($r = mysql_fetch_assoc($result, MYSQL_NUM)) {
     $rows[] = $r;
   }

?>
<script>

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: {lat: 51.5202863763, lng: -0.183619436312},
          mapTypeId: google.maps.MapTypeId.SATELLITE
        });

        $(window).load(function(){
            update()
            setInterval(function(){
                update()
            }, 5000)
        })

        function update(){
 var polylinePlanCoordinates  = [];
  var polyline_data = <?php echo json_encode( $rows ); ?>;
  for (var i=0;i< polyline_data.length;i++ ){
   polylinePlanCoordinates.push(new google.maps.LatLng(polyline_data[i][0], polyline_data[i][1]));

          }

var path= new google.maps.Polyline({
  path: polylinePlanCoordinates,
  geodesic: true,
  strokeColor: '#FF0000',
  strokeOpacity: 1.0,
  strokeWeight: 2
          });

}
 path.setMap(map);

      }
    </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABLjW3bN2UJK6srnKF05jwGTyFUPzxWuY&callback=initMap"></script>
  • 2 Contributors
  • 1 Reply
  • 1K Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by rproffitt
Member Avatar for rproffitt

For my reply I'll talk about "design." I looked at your code and it looks like you are drawing on the Google map rather than the display.

So there is no drawing on your display or image by you. I'll skip writing at length so take this as is without feeling I shortchanged you. I would be guessing you are using a web browser so by reload the page you fire off your script and thus it works but looks a little ugly. Since it's just a school project, this usually is fine.

So back to design. Rather than putting that map right from google to your (unknown) display you would redesign this so the google map images go to some file or image array and you paint/splat or such to your image area insted of a total page load. There are so many prior examples of image rotation in a browser view that I won't broach that subject.

Recap. Redesign so the map images go to some file system. Use a script to rotate the new image into place.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.