0

I'm trying to display route data on a map using leaflet. I'm pulling the data from a MYSQL database with a php script. which is working. The data is stored in an array called vechiclelatlong. I use <?php include('../php/vTrackerv3.php'); ?> under the Javascript tag where is have my Leaflet script. I am getting the following error:

Uncaught ReferenceError: vehiclelatlong is not defined

See scripts below:

PHP script:

<php   
function vData(){   
include("dbconnecti.php");

$strtDate = strtotime('20150404');
$endDate = strtotime('20150405');

$query = "SELECT ED.latitude, ED.longitude, ED.timestamp, ED.creationTime 
FROM EventData ED 
WHERE ED.latitude <> 0 AND ED.longitude <> 0 AND (ED.timestamp >= $strtDate)  AND (ED.timestamp <= $endDate)";
$results = $dbconnect->query($query);

if (!$results)  {
    echo mysql_error();
    die('There was an error excuting query statment: ' ); //. mysqli_error());
}

$num_of_rows = $results -> num_rows;
$data = array();

echo "var vehiclelatlong = [";

for ($x = 0; $x < $num_of_rows; $x++)   {
    $data[] = $results -> fetch_assoc();

    echo "[".$data[$x]['latitude'].",".$data[$x]['longitude']."]";
    if ($x <= $num_of_rows - 2)  
    {
        echo ",";
    }
  }

  echo "];";

}
vData();
?>

HTML script

 <!DOCTYPE html>   
 <html>    
 <head>    
    <title>Tobago Street Map </title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/black-tie/jquery-ui.css" type="text/css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" charset="utf-8"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script type="text/javascript" src="../js/vTracker.js"></script>

 </head>

 <body>
    <div id="map_canvas" style="width: 1400px; height: 600px"></div>

 <script>

    **"<?php include('../php/vTrackerv3.php'); ?>"**

    var map = new L.Map('map_canvas',{doubleClickZoom:false,zoomControl:false}).setView(new L.LatLng(11.18269,  -60.73760), 16);        mapLink = 
        '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; ' + mapLink,
        maxZoom: 18,
        }).addTo(map);
    var polyline = L.polyline(vehiclelatlong).addTo(map);
</script>

</body>
</html>
Improve this question
2
  • after this errors out, what happens when you inspect "vehiclelatlong" on the console? Hit F12, switch to a console, and type "vehiclelatlong".
    – toms
    Apr 7, 2015 at 19:10
  • @toms got the same error msg: ReferenceError: vehiclelatlong is not defined
    – ChrisJ
    Apr 7, 2015 at 20:46

1 Answer 1

Reset to default
1

While your PHP looks to be creating an array, I'm not sure that you're going to have consistent luck getting JS to read it that way (an arrant space here or there, etc.). At least I've tried that in the past, only to realize that while it LOOKS like a good array, it isn't.

I think you're better off just returning your MySQL as a true array and then using json_encode($array) to get it in something that will consistently be read by JS.

Something like

var vehiclelatlong = <?php json_encode($array); ?>;

EDIT: Lets stick with your array (although JSON ~ GEOJSON and there are good PHP GEO tools out there). I got it to work doing the following.
1. made sure both files had a *.php extension
2. removed **" on either side of my include statement in my main page
3. made sure my included file was correctly referenced in my main page
4. made sure my DB query was returning a valid result. I made some changes (including just trying it using SQLite) but you can see the same result.

<?php   
function vData(){  
$db = new PDO("sqlite:so.db");
$query = "SELECT latitude, longitude FROM EventData";
$statement1 = $db->prepare($query);
$statement1->execute();
$results = $statement1->fetchall(PDO::FETCH_ASSOC);
echo "var vehiclelatlong = [";
$count=1;
foreach ($results as $result)   {
echo "[".$result['latitude'].",".$result['longitude']."]";
if ($count < count($results)) echo ",";
$count++;
}
echo "];";
}
vData();
?>
Improve this answer
4
  • the problem is L.polyline takes either standard array data or geojson data
    – ChrisJ
    Apr 7, 2015 at 21:28
  • if you var_dump($data) in your html file do you get a non-null response? in other words are you sure you're referencing the php script/path correctly?
    – deroses
    Apr 8, 2015 at 5:58
  • see edits above
    – deroses
    Apr 8, 2015 at 17:13
  • Thanks... I got it to works also... The problem was that the values in the array were being stored as strings not numbers
    – ChrisJ
    Apr 11, 2015 at 14:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.