>140
mini-adventures in mobile, geo and arduino dev in > 140 characters...
Browse: Home » Nokia Maps / TfL Traffic Camera Mashup

Nokia Maps / TfL Traffic Camera Mashup

admin 8 October, 2012

Thought it was about time I stepped on the mashup bandwagon, a good number of years after the bandwagon had set out on it’s journey.

I’d be wanting to play with a mapping JavaScript API for some time and had seen some examples of people using the Google maps API with live traffic CCTV images from Transport for London (TfL).  I decided to try and reproduce one of these mashups using the Nokia Maps API.  Here’s a screen shot of the mashup in action:

Displaying a Nokia map

The first step was to display a panable, zoomable map using the Nokia maps API.  In order to use this service you need to register as a developer with Nokia and then registe your username for access to the Location API.

Once registered it only takes a small amount of code to display a map.
Include this in the HTML head tag.

<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
<!-- load the api -->
<script src="http://api.maps.nokia.com/2.2.1/jsl.js"
type="text/javascript" charset="utf-8"></script>

And the following in the HTML body tag.

<!--This div tag will contain the map -->
<div id="map" style="z-index: -1; left: 0px; width: 100%;
   height: 80%; position: absolute;"></div>

<script type="text/javascript">
   // Set up is the credentials to use the API
   nokia.Settings.set("appId", "your-appid"); 
   nokia.Settings.set("authenticationToken", "your-auth-token");

   var map = new nokia.maps.map.Display(
      document.getElementById("map")
   );
</script>

To add some useful functionality to the map such as zoom controls and the ability to view  satellite imagery add the behaviours to the optional components parameter.  The map can also be centered and the initial scale set as follows.

   var map = new nokia.maps.map.Display(
      document.getElementById("map"), {
         components: [ 
            // Behavior collection
            new nokia.maps.map.component.Behavior(),
            new nokia.maps.map.component.ZoomBar(),
            new nokia.maps.map.component.Overview(),
            new nokia.maps.map.component.TypeSelector(),
            new nokia.maps.map.component.ScaleBar() ],
            // Zoom level for the map
            'zoomLevel': 10,
            // Map center coordinate on London
            'center': [51.5, -0.1167] 
      }
   );

Adding CCTV information from TfL

The CCTV images for London are supplied by TfL as part of their open data initiative (Transport Data Service).  In order to get access you need to register for the service here.

The next step was to access the TfL CCTV service to get the camera information using the link provided by TfL.  The service returns xml data which looks like this:

<?xml version="1.0" encoding="utf-8"?>
<syndicatedFeed>
<header>
<identifier>TfL Traffic Cameras</identifier>
<version>0.1</version>
<publishDateTime>2012-09-15T16:31:17Z</publishDateTime>
<author>digital@tfl.gov.uk</author>
<owner>Transport for London</owner>
<refreshRate>1</refreshRate>
<max_Latency>10</max_Latency>
<timeToError>10</timeToError>
<overrideMessage />
<errorMessage />
<feedInfo></feedInfo>
<logo>http://www.tfl.gov.uk/tfl-global/images/roundel.gif</logo>
</header>
<cameraList updated="1347726677">
<rooturl>/tfl/livetravelnews/trafficcams/cctv/</rooturl>
<camera id="00001.02645" available="true">
<corridor>A205</corridor>
<location>Ram St/Barchard St</location>
<currentView>Ram St N/B</currentView>
<file>0000102645.jpg</file>
<captureTime>2012-09-15T16:30:29Z</captureTime>
<easting>525706</easting>
<northing>174806</northing>
<lat>51.458282</lat>
<lng>-0.1920207</lng>
<osgr>TQ257748</osgr>
<postCode>SW18 1TJ</postCode>
</camera>

As you can see the data returned by the TfL CCTV service contains camera locations (lat longs and OS grid) and the image URLs.

Following on from the Twitter Vote Thingy I used AJAX in a main page (nokiamap_with_tfl_cams.html) to call some php (gettraffic_cams.php) which would access the TfL service via a class (traffic_cam_class.php).  gettraffic_cams.php simply instantiates the class, calls it’s getCams() method and echos the result.

Like the Twitter Vote Thingy the getCams() method uses cURL to access the service URL.
The xml response is parsed using the php function simplexml_load_string e.g.

            $xml = simplexml_load_string($response);

The xml is then iterated and a JSON string is constructed containing all the camera information.  This is then returned to gettraffic_cams.php.

The javscript function gotCams is called when the state of the AJAX object changes i.e. when some data has been received.  On receipt the JSON object string containing camera locations is parsed.

Each location is added to a collection of ‘map markers’.  When setting up each map marker an ‘infobubble’ can be added to the marker object which displays some HTML (in this case an iframe containing the camera image) when the map marker is clicked.  A listener is added to the map marker to handle this (see the addInfoBubble function).

//Called every time our XmlHttpRequest objects state changes.
function gotCams() {
   //Check to see if the XmlHttpRequests state is finished.
   if (receiveReq.readyState == 4) {                    
   var cams = JSON.parse(receiveReq.responseText);
   for (var i = 0; i < cams.length - 1; i++) {
      //add marker if lat and long are not zero length
      if (cams[i].lat != '' && cams[i].lng != '') {
         var lat_long =  new nokia.maps.geo.Coordinate(parseFloat(cams[i].lat), parseFloat(cams[i].lng));
         var marker = new nokia.maps.map.StandardMarker(lat_long);
         var myHTMLcontent = "<div class=\"myHtmlContent\">"+"<iframe width='370' height='310' src='" + cams[i].file_location + "' frameborder='0' allowfullscreen></iframe>"+"</div>";
         addInfoBubble(infoBubbles, marker, myHTMLcontent);
         //document.getElementById("debug").innerHTML = document.getElementById("debug").innerHTML + ' ' + cams[i].location + ' ' + cams[i].lat + ' ' + cams[i].lng;
         camContainer.objects.add(marker);
      }
   }
   map.objects.add(camContainer);
}

//Adds an info bubble displaying html to a marker
function addInfoBubble(infoBubbles, marker, html) {
   marker.html = html;
   //Add click listener to marker.  Display info bubble on click.
   marker.addListener("click",
      function(evt) {
         infoBubbles.addBubble(evt.target.html, evt.target.coordinate);   
      }, false
   );

Adding Nokia real time traffic

Adding the capability to display live traffic information on top of the map is easy.  Just add the following to the behaviour collection.  This adds a car icon in the top right hand corner of the map.  When this is clicked current traffic conditions are shown as coloured roads.

new nokia.maps.map.component.Traffic ()

In order to carry out this mini-adventure I found the following resources really useful:
http://www.developer.nokia.com/Community/Wiki/Nokia_Maps_API_-_Add_Maps_To_Any_Web_Page
http://www.developer.nokia.com/Community/Wiki/Nokia_Maps_API_-_How_to_add_map_markers

http://www.developer.nokia.com/Community/Wiki/Nokia_Maps_API_-_How_to_add_an_HTML_InfoBubble_on_the_map

Have a play here.
Source code here.

Uncategorized, dev, javascript, maps, nokia, php, tfl
← Previous Next →

  • info

  • RT @markbessoudo: Rivers of Wales. [Credit: @dafyddelfryn via @mapiaucymru cc @GeorgeMonbiot] https://t.co/kcW0NtVz46,
  • RT @here: Help us build the new #GIS epicenter of Europe in Veldhoven https://t.co/zswlUlgWho #jobs https://t.co/Sagl6sOx7R,
  • Deep sigh....... https://t.co/3c4EEOtu6X,
  • http://t.co/Qv4ex9PfHG - some nice maps.,
  • RT @here: 🎉 5 Million downloads from Google Play! 🎉 Thank you for your support! https://t.co/ikJhjZAXq5 http://t.co/Ie13SHwOf3,
  • RT @here: We updated maps for #Android, #iOS and #Windows. Download them now! http://t.co/1m3SJxUGbz http://t.co/L6jUhHt7AR,
  • RT @TiggySellars: @FredBoycott Barnsley Cocktail £2.73 http://t.co/scHz1zWoHS,
  • RT @here: .@Jaguar seeks to eliminate blind spots in your car with ‘see through’ surfaces http://t.co/dFtV5amSdl http://t.co/RTAKYhE3Tu,
  • RT @OrdnanceSurvey: Can you believe solar farms don’t have their own #map symbol? Design one for our #competition http://t.co/J9C2sUKEre,
  • OK kids..a gift for you..our FREE nav app on iOS http://t.co/LeNt5Cps9R and Android http://t.co/yiaSnRLJbo,
  • RT @here: It’s official – HERE is everywhere #iOS, #Android and #WindowPhone http://t.co/sH5jnFsvRZ #SpringIsHERE http://t.co/l0AWQvaa0c,
  • RT @here: We interviewed @philiphubs to find out all about geocoding and how it makes digital maps work http://t.co/Z29y1yPnZU http://t.co/8UwRr2cnSx,
  • RT @stuarthelmer: .@SundayTimesNews horrified that driverless cars might, er, overtake cyclists in accordance w/ Highway Code. http://t.co/PrrCY9vzEg,
  • RT @UnvirtuousAbbey: The four basic religions (via @elvo86 ) http://t.co/F8FBcKLpZz,
  • RT @terra_bella: SkySat-1 captured the Blood Swept Lands and Seas of Red installation at the Tower of London on November 10, 2014. http://t.co/4liPYamsar,

Copyright © 2022 >140.

Powered by WordPress, Fanwood, and Grimpeur Deux.