How to import XML data generated with PHP from MySQL into a JavaScript code?

egregious

I am working with Google Maps API and to add a layer of heatmap over it. This is the source code :-


<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Heatmap Layer</title>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
    <script>
      // Adding 500 Data Points
      var map, pointarray, heatmap;

  var taxiData = [
    new google.maps.LatLng(37.782551, -122.445368),
    new google.maps.LatLng(37.782745, -122.444586),
    new google.maps.LatLng(37.782842, -122.443688),
    new google.maps.LatLng(37.782919, -122.442815),
    new google.maps.LatLng(37.782992, -122.442112),
    new google.maps.LatLng(37.783100, -122.441461),
    new google.maps.LatLng(37.783206, -122.440829),
    new google.maps.LatLng(37.783273, -122.440324),
    new google.maps.LatLng(37.783316, -122.440023),
    new google.maps.LatLng(37.783357, -122.439794),
    new google.maps.LatLng(37.783371, -122.439687),
    new google.maps.LatLng(37.783368, -122.439666),
    new google.maps.LatLng(37.755503, -122.403406),
    new google.maps.LatLng(37.754665, -122.403242),
    new google.maps.LatLng(37.753837, -122.403172),
    new google.maps.LatLng(37.752986, -122.403112),
    new google.maps.LatLng(37.751266, -122.403355)
  ];

  function initialize() {
    var mapOptions = {
      zoom: 13,
      center: new google.maps.LatLng(37.774546, -122.433523),
      mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);

    pointArray = new google.maps.MVCArray(taxiData);

    heatmap = new google.maps.visualization.HeatmapLayer({
      data: pointArray
    });

    heatmap.setMap(map);
  }

  function toggleHeatmap() {
    heatmap.setMap(heatmap.getMap() ? null : map);
  }

  function changeGradient() {
    var gradient = [
      'rgba(0, 255, 255, 0)',
      'rgba(0, 255, 255, 1)',
      'rgba(0, 191, 255, 1)',
      'rgba(0, 127, 255, 1)',
      'rgba(0, 63, 255, 1)',
      'rgba(0, 0, 255, 1)',
      'rgba(0, 0, 223, 1)',
      'rgba(0, 0, 191, 1)',
      'rgba(0, 0, 159, 1)',
      'rgba(0, 0, 127, 1)',
      'rgba(63, 0, 91, 1)',
      'rgba(127, 0, 63, 1)',
      'rgba(191, 0, 31, 1)',
      'rgba(255, 0, 0, 1)'
    ]
    heatmap.setOptions({
      gradient: heatmap.get('gradient') ? null : gradient
    });
  }

  function changeRadius() {
    heatmap.setOptions({radius: heatmap.get('radius') ? null : 20});
  }

  function changeOpacity() {
    heatmap.setOptions({opacity: heatmap.get('opacity') ? null : 0.2});
  }
</script>
  </head>

  <body onload="initialize()">
    <div id="map_canvas" style="height: 600px; width: 800px;"></div>
    <button onclick="toggleHeatmap()">Toggle Heatmap</button>
    <button onclick="changeGradient()">Change gradient</button>
    <button onclick="changeRadius()">Change radius</button>
    <button onclick="changeOpacity()">Change opacity</button>
  </body>
</html>

The above code creates a heatmap over Google Map. See their original documentation here :-

https://developers.google.com/maps/documentation/javascript/layers

There is documentation for the heatmap layer. In that, instead of merely adding Latitude and Longitude, there is option to add an intensity value too , the latter making the heatmap areas red where intensity is high and green where it is low...This can be given as shown below (like it is in documentation. The example is shown below) :-

var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

Now, I have an XML file which contains latitude,longitude and intensity values. The PHP code that generates this XML file is :-

while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  echo '<marker ';
  echo 'name="' . parseToXML($row['name']) . '" ';
  echo 'address="' . parseToXML($row['address']) . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'intensity="' . $row['intensity'] . '" ';
  echo '/>';
}

I am totally new to JavaScript, but has a grip on PHP and MySQL.

As you can see from the first code, the heatmap generation is via client side through JavaScript. I want it to be more flexible and dynamic so that the Javascript values in the SECOND code that I posted can be imported from the XML data that I generated through MySQL. Is it possible?

Thanks in advance....

johanafm

There is a serialization technique called JSON, Javascript String Object Notation, which transforms objects, arrays and scalars to/from string notation. Thus, do not create the XML serverside, but rather use javascript to fetch a json-encoded array of objects { lat, long, weight } via XHR. If you use jQuery (and you should), set dataType to 'JSON' in the settings parameter to the ajax call and the json-string will automatically be parsed into an array of objects when it returns to your javascript code.

Then the only remaining thing is to iterate over the array and for each element add location: new google.maps.location(lat, long);

johanafm

By the way, you obviously do not need to fetch the data via XHR. You could use the same string directly in the js code served with the page initially if you prefer.

sneakyimp

The function [man]json_encode[/man] would be very helpful in this case. You could alter your PHP code create a numeric array of associative arrays and echo it as json:

$result_array = array();
$i=0;
while ($row = @mysql_fetch_assoc($result)){
  // ADD TO $result_array
  $result_array[] = $row;
}
echo json_encode($result_array); // this outputs the json encoding of your array

Then, in your javascript, your approach will depend on how you generate your javascript. If you fetch it via AJAX from your script, you'll probably need to use the eval statement on the json string. If you are outputting your javascript in your php script, then you could probably just echo the json value.

<script type="text/javascript">
var myArray = <? echo $json_encode($result_array) ?>;
</script>

johanafm

sneakyimp;11012201 wrote:
use the eval statement on the json string.

While this obviously will work since the json string is indeed javascript string notation of objects, arrays etc, I recommend using jquery's parseJSON() function, since it works on a subset of javascript which deals only with data structures and scalars. Thus it removes the risk of executing code.

sneakyimp

johanafm;11012279 wrote:
I recommend using jquery's parseJSON() function, since it works on a subset of javascript which deals only with data structures and scalars. Thus it removes the risk of executing code.

I was hoping that someone would make a suggestion like this. Sorry that I was too lazy to make my own suggestion. Mozilla.org has an article discussing how to encode/decode JSON strings.

sneakyimp

johanafm;11012279 wrote:
I recommend using jquery's parseJSON() function, since it works on a subset of javascript which deals only with data structures and scalars. Thus it removes the risk of executing code.

I was hoping that someone would make a suggestion like this. Sorry that I was too lazy to make my own suggestion. Mozilla.org has an article discussing how to encode/decode JSON strings.

egregious

Sorry for the late reply. My code still doesn't seem to work whilst using data from my local database server.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Heatmap Layer</title>
    <link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
    <script>
   var map, pointarray, heatmap;
	var heatMapData = [];
 function initialize() {
         var mapOptions = {
          zoom: 8,
          center: new google.maps.LatLng(23.2500, 87.8500),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
         };

     var map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);




     downloadUrl("phpsqlajax_genxml_heatmap.php", function(data) {
       var xml = data.responseXML;
       var markers = xml.documentElement.getElementsByTagName("marker");
     for (var i = 0; i < markers.length; i++) { //loop through nodes getting info
     var point = new google.maps.LatLng(
     parseFloat(markers[i].getAttribute("lat")),
     parseFloat(markers[i].getAttribute("lng")));
     var intensity = markers[i].getAttribute("intensity");
     var hObj = { //create object
                 location: point,
                 weight: intensity
                };
     heatMapData.push(hObj); //push object onto array

   }
 });

     var heatmap = new google.maps.visualization.HeatmapLayer ({
                                                                data: heatMapData
                                                               });
heatmap.setMap(map);
}        

		//pointArray = new google.maps.MVCArray(heatMapData);


function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}
function doNothing() {}
</script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="height: 600px; width: 800px;"></div>
    </body>
</html>

The "phpsqlajax_genxml_heatmap.php" is:

<?php
error_reporting(E_PARSE);
function parseToXML($htmlStr) 
{ 
$xmlStr=str_replace('<','&lt;',$htmlStr); 
$xmlStr=str_replace('>','&gt;',$xmlStr); 
$xmlStr=str_replace('"','&quot;',$xmlStr); 
$xmlStr=str_replace("'",'&#39;',$xmlStr); 
$xmlStr=str_replace("&",'&amp;',$xmlStr); 
return $xmlStr; 
} 

// Opens a connection to a MySQL server
$connection=mysql_connect ("localhost","root","mysqlegregious");
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db("heatmap");
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table
$query = "SELECT lat,lng,intensity FROM markers";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Start XML file, echo parent node
echo '<markers>';

// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  echo '<marker ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'intensity="' . $row['intensity'] . '" ';
  echo '/>';
}

// End XML file
echo '</markers>';

?>

I don't know why this ain't working.

I don't know much about JSON either. Could someone help me out?

Thanks...

sneakyimp

What "ain't working" about it? You need to be more specific.

egregious

sneakyimp;11029935 wrote:
What "ain't working" about it? You need to be more specific.

Well, same thing which is written in the 1st post.

I am getting the Google Maps, but the heatmap layer is not loading.

sneakyimp

Have you tried directly accessing phpsqlajax_genxml_heatmap.php ? Does it run when you load it in a browser?

Perhaps you should try some alert() statements in your AJAX-handling code to see if those functions are actually running and maybe put some of the values in the alert message so you can see what's goign on.

bradgrafelman

sneakyimp;11030013 wrote:
Perhaps you should try some alert() statements in your AJAX-handling code to see if those functions are actually running and maybe put some of the values in the alert message so you can see what's goign on.

... or just set breakpoints and add variables of interest to the watch expression list. 😉

egregious

sneakyimp;11030013 wrote:
Have you tried directly accessing phpsqlajax_genxml_heatmap.php ? Does it run when you load it in a browser?

Perhaps you should try some alert() statements in your AJAX-handling code to see if those functions are actually running and maybe put some of the values in the alert message so you can see what's goign on.

Yes phpsqlajax_genxml_heatmap.php is accessible and is displaying markers with tag marker correctly. Its perfect.

I am relatively new to JavaScript. Could you please tell how to use alert() statements so that I can verify the functions

sneakyimp

From what I can tell, your first page is what you are actually looking at, not phpsqlajax_genxml_heatmap.php. That first page sets up an AJAX call to phpsqlajax_genxml_heatmap.php as a separate page request. If you don't know what AJAX is, you are probably not going to be able to solve this problem.

Bradgrafelman is of course correct that using a javascript debugger is a much better approach (any suggestions, bradgraeflman?) but you can also do it caveman-style by adding an alert statement like this:

alert("here is an alert.  if it works, I know that this line of code ran successfully");

dalecosp

sneakyimp;11030071 wrote:
you can also do it caveman-style by adding an alert statement like this:
alert("here is an alert.  if it works, I know that this line of code ran successfully");

You said "caveman" 😃

I'd recommend using FireFox with the Firebug extension as one's JS debugger of choice ... if you have no other experience with a JS debugger. Most other browser have them now, too, and usually installed by default ... even IE, which, IMHO, sucks hind t*t compared to all the others.

bradgrafelman

sneakyimp;11030071 wrote:
(any suggestions, bradgraeflman?)

Google Chrome web browser. (No extensions required! :p)

dalecosp

bradgrafelman;11030077 wrote:
Google Chrome web browser. (No extensions required! :p)

It's nice, but I find Firebug slightly more featureful and a tad easier-to-use ... that's probably based on something less than complete objective data, though 😉

Weedpacket

bradgrafelman wrote:
Google Chrome web browser. (No extensions required! )

Firefox also has a JS debugger built in (I'm not sure why they added it, since it's the sort of thing that ought to be in an extension - such as Firebug.)