Tuesday, 2 December 2014

HTML checkboxes, Javascript and PHP

So you want to select one or more HTML checkboxes and then use Javascript call a PHP program that returns data from a database usingan SQL query that OR's the checked items?

In this example, data on London Tube Stations in one or more zones is extracted from a MySQL database when any of the check boxes for zones is toggled.


First we need to write the HTML to display a check box for each zone. When the user checks, or unchecks, the getstations() Javascript function fires. This program posts an HTTP get request to stations.php, which returns information on stations. The results are written to an HTML div. For brevity only three zones are coded.

      <title>Checkbox Example</title>  
      <script type="text/javascript" src="stations.js"></script>  
      <script type="text/javascript" src="utils.js"></script>  
           <h1>Display Stations in Zones</h1>  
                <input type="checkbox" name="zone" value="1" onclick="getstations();"> Zone 1<br>  
                <input type="checkbox" name="zone" value="2" onclick="getstations();"> Zone 2<br>  
                <input type="checkbox" name="zone" value="3" onclick="getstations();"> Zone 3<br>  
           <h2> Stations</h2>  
           <div id="stations">  


We shall now write a PHP program that returns an XML file containing data on the stations. Data is encoded as attributes within station tags.

   // Make a MySQL Connection  
   $connection = mysql_connect("localhost", "root", "");  
   if (!$connection) {  
    die('Not connected : ' . mysql_error());  
   // Use the kyr_db DB  
   $db_selected = mysql_select_db("kyr_db");  
   if (!$db_selected) {  
    die ('Can\'t use db : ' . mysql_error());  
   // get the zone HTTP parameter  
   $zone_list = $_GET["zones"];  
   // Explode comma separated list of zones  
   $zones = explode(",",$zone_list);  
   // Build SQL Query  
   // The query needs an OR operator inserted for the second and subsequent clauses.  
   $query = "SELECT * FROM kyr_london_tube_stations WHERE";  
   $or = 0;  
   foreach ($zones as $zone) {  
           if ($or == 0) {  
                $query = $query . " zone = " . $zone;  
                $or = 1;  
           } else {  
           $query = $query . " OR zone = " . $zone;  
   // Retrieve data from the stations table  
   $result = mysql_query($query);  
   if (!$result) {  
    die('Invalid query: ' . mysql_error());  
   // Set the content type, then write the XML file  
  header ("Content-Type:text/xml");  
   // Open shapes tag  
   echo '<stations>';  
   // Loop through results extracting values   
   while ($row = mysql_fetch_array($result)) {  
           $name = htmlentities($row['NAME']);  
           $zone = htmlentities($row['ZONE']);;  
           echo '<station name="' . $name . '" zone="' . $zone . '"/>';   
   // Close shapes tag  
  echo '</stations>';  
   // Close database connection  


Finally, need to write the getstations() Javascript function that will make an AJAX request to the MySQL database. This function calls the downloadUrl() function in utils.js to undertake the XmlHttpRequest.

 function getstations() {  
       var zones = document.getElementsByName("zone");  
      var zone_ids = [];  
      var text = "";  
      // Clear text in div  
      document.getElementById("stations").innerHTML = text  
      for (var i = 0; i < zones.length; i++) {  
           if (zones[i].checked) {  
      if (zone_ids.length > 0) {  
           var ids_list = zone_ids.toString();  
           url = "stations.php?zones=" + ids_list;  
           downloadUrl(url, function(data) {  
                var rows = data.documentElement.getElementsByTagName("station");  
                if (rows.length > 0) {  
                     for (var i = 0; i < rows.length; i++) {  
                          text = text + rows[i].getAttribute("name") + " " + rows[i].getAttribute("zone") + "</br>";  
                // Write text to div  
                document.getElementById("stations").innerHTML = text;  

Thursday, 9 January 2014

3D visualisation of Sanborn Maps for Charlottesville, VA

The Sanborn Fire Insurance Maps are a great source of information on the history of urban development in the US. As part of the Spatial Data Management and Manipulation module of their BSc in Geographical Information Systems at Kingston University students created a geodatase of landuse and building height for part of Charlottesville, Vaginia. To visualise database contents students created 3D visualisations in ArcScene. This one was created by Alvin Ancindor, Katso Matchediso, Amy Pritchard and Brian Setswamorago from the 1920 Sanborn maps. While coverage is incomplete, it remains impressive.

Friday, 6 December 2013

Animated Tornado Density Map

Density of Tornado Tracks within a 41km search radius and population of large cities (blue bars). Data from National Weather Service (2012) http://www.spc.noaa.gov/gis/svrgis. Student work by Amy Harris, submitted for MSc modules in GIS and Hazards, Kingston University London.

Thursday, 5 December 2013

GIS in Action Video

A short promotional film of geovisualations by GIS staff and students in the School of Geography, Geology and the Environment, Kingston University London.

The Age and Geographical Bearing of Mammalian Evolutionary Relationships

This is an updated version of a previous image that only showed bearing. Click here for a full size image.

In the upper figure, older (blue) branches cluster across ocean basins (disjucntions driven by continental drift) and within continents (endemic clades). Older branches are more common within and between the southern "Gondwanan" continents than those in the northern hemisphere. There is a paucity of north-south oriented branches in the northern hemisphere that may well refect how Pleistocene climate change has driven species ranges in this region.

Saturday, 10 November 2012

Exporting video from ArcGIS to Lightworks

In the past I have used Microsoft Movie Maker for video editing. Like many Microsoft products it was relatively easy to use, but quite limited functionality. It also had an unfortunate tendency to crash and refused to load when I tried to install it on my current laptop. Rather than deal with the installation problem I decided to try the free Lightworks video editing suite instead. Much of my contents comes from ArcGIS animations, so how do you go get high-definition video out of ArcGIS and into Lightworks?

Lightworks currently only supports some free and open video codecs. Codecs are implementations of video storage and compression algorithms. Video 'formats' such as AVI (.avi) and MOV (.mov) are wrappers around these codecs. To play or edit video files an appropriate codec must be installed and the software support the format. Other issues, such a frame rates may also be important as I discovered.

How I export HD video from ArcGIS to Lightworks:
  • In ArcGIS:
    1. Make you animation 20% longer than you want it to be as the conversion process will speed up the video by 20%.
    2. From the Animation Toolbar, Export animation.
    3. In the Export animation dialog, open the Options... dialog. Check Use custom extents under Video Resolution, then set the Horizontal resolution to 1440 and Vertical Resolution to 1080. These are the dimensions required by the to render the video using the MPEG-2 I-frame HD codec in 1440×1080i/p format. Codec resolution information is on page 2 in Using the Matrox VFW Software Codecs. Also set Frame based video export to the full range of frames.
    4. Export, then in the Video Compression dialog select the Matrox MPEG-2 I-frame HD codec.
    5. Click OK to export.

ArcGIS Video Export Options dialog

There is however a problem. Despite being in a format and codec supported by Lightworks, Lightworks only supports video with a frame rate of at least 25fps. ESRI help indicates that the frame rate can be set from 1 -100, but I have been unable to change from the default 20 fps. Instead, I use VirtualDub 1.9.11 to change the frame rate.

    1. Open VirthualDub.
    2. From the File menu, Open video file.
    3. From the Video menu, Frame Rate. Set Source rate adjustment to Change frame rate to (fps) to your desired rate; 25 in this case. Also set Frame rate conversion to the desired rate. I suspect the first is not really need.
    4. From the Video menu, select Compression and select the within the dialog select the Matrox MPEG-2 I-frame HD codec.
    5. From the File menu, Save as AVI.

VirtualDub Frame Rate Control
VirtualDub Compression
  • Open Lightworks
    1. Create a project with your frame rate. 25 fps in this case.
    2. Click on the Project Name to open the Project settings menu. Select the Video tab and set the Format to 1080i 25fps.
    3. You can now import you video.
    4. It will however be 20% quicker than the time set in ArcGIS.

Wednesday, 9 May 2012

London Congestion Charge Zone as GIS data

So, I ask Transport for London whether the London Congestion Charge Zone is available as a GIS file, and if not, why not? 

I get a letter back, telling me no, but asking if I have any suggestions. Wake up TFL!