Introduction

A traffic layer visually displays the speed of traffic along a traffic link in real time as a fraction of the speed limit. Groups of links may be colored red (slowest), orange, yellow or green (fastest). This tutorial demonstrates the simple steps required to add a traffic layer to a map.

Prerequisites

This tutorial assumes familiarity with JavaScript. You will need a moderately-specified desktop computer. Experience with digital mapping technology is assumed only at a low level.

Setup

Before we can start using GeoBase we must obtain a copy of the software development kit (SDK). A 30-day trial of the SDK is available for download on the GeoZone website. Download and install the SDK. If you don’t already have a license you will be guided through the simple process to obtain a trial license. Choose your sample data set (HERE or TomTom) and region (California and Nevada, or the UK and Ireland; this tutorial assumes and requires USA map data).

The SDK installer will configure IIS on your local machine to host a GeoStream server. GeoStream is a GeoBase technology that allows remote access (through a web-browser, or .NET application) to your application and associated map data.

You can test your GeoStream installation by visiting this address.

http://localhost/GeoStream/scripts/tutorial.simple-map.aspx

Creating the Project

This project will consist of a single ASPX file. Open a text editor and create a file named ‘traffic-map.aspx’. Save this file in ‘C:\Program Files\Telogis\GeoBase\GeoStream\server\scripts’.

Throughout this tutorial we'll add code to this file to create our application.

Note: The GeoBase SDK installer configured Microsoft IIS to host a website on your local computer. This website is accessible through the URL ‘http://localhost/GeoStream’. The files contained in this website are the files in your ‘C:\Program Files\Telogis\GeoBase\ GeoStream\server\’ directory. For this tutorial we ask that you create your ASPX file in the scripts subdirectory to make your code easier to write.

GeoStream Settings

First, several settings such as the paths to the GeoStream API include file and GeoStream servers are defined by the AuthenticatedPage ASP.NET class. This allows the same definition to be used across all your webpages. The AuthenticatedPage class is also responsible for generating the webpage's authentication token. This token is required by all GeoStream 2 servers and should be placed at the top of your page, above the opening html tag.

<%@ Page Language="C#" Src="AuthenticatedPage.aspx.cs" Inherits="AuthenticatedPage" %>

HTML

The HTML and skeleton JavaScript code for this tutorial is shown below. Add this to your file after the definition above.

Note that the JavaScript code is typically placed between the head tags and that the main() function will be called after the page has loaded (using the body's onload property). Note that you may separate the HTML code and JavaScript code into separate files if you wish, using a regular JavaScript include construct:

<script type="text/javascript" src="path_to_js_file" />

The call to GetAPISource writes the path of the GeoBase includes to the webpage source. This line of code is required.

  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Traffic Layer Demo</title>

      <script type="text/javascript" src="<% GetAPISource (); %>"></script>
      <script type="text/javascript">

        var main = function () {
              
              // JavaScript code goes here

        };
        
      </script>
              
    </head>
    <body onload="main ();">
    </body>
  </html>

JavaScript

Place the following code inside the main JavaScript function. This code performs the following actions:

  • • defines the GeoBase and MapLayers namespaces, Map object and Size class
  • • sets the GeoStream server and authentication tokens. Note that this should be done at the start of the entry function (in this case, at the start of main) as these settings are a prerequisite for any GeoStream server requests.
  • • creates a new Map object - 640 pixels wide and 480 pixels high
  • • creates a new MapLayers object to contain traffic data

By default a new Map object will be appended to the document body. To customize this behavior, create a div in the HTML section with the same id or specify a parent configuration option to the Map Constructor.

var GeoBase = Telogis.GeoBase;
var Map     = Telogis.GeoBase.Widgets.Map;
var Size    = Telogis.GeoBase.Size;
var MapLayers = Telogis.GeoBase.MapLayers;

GeoBase.setService (<% GetService (); %>);
GeoBase.setAuthToken (<% GetToken (); %>);

var map = new Map ({
  id:   "main_map",
  size:  new Size (640, 480)
});

new MapLayers.TrafficLayer({
  map: map,
  id: 'main_map_traffic', 
  source: 'TrafficData'
});

GeoStream Configuration

Navigate to the GeoStream folder on your computer (typically C:\Program Files (x86)\Telogis\GeoBase\GeoStream\server) and open the Web.Config file in a text editor.

Add the following line to the appSettings code block, if it is not already present:

 <add key="TrafficConfig" value="traffic.config" />

In the same folder, locate and open the Traffic.Config file in a text editor. Here we set the traffic data source, the page refresh rate (every 20 minutes in our example), and whether or not the data needs decompressing:

<?xml version="1.0" encoding="utf-8" ?>
<Traffics>
  <Traffic ID="TrafficData"
         Refresh="00.00:20:00"
        xmlns:gb="Telogis.GeoBase.Traffic">
    <gb:InrixRealTimeTrafficSource Url="http://traffic.geobase.info/MarketLAXRealTimeTraffic.xml.zip" Zipped="true" />
  </Traffic>
</Traffics>

Testing

Load the newly created page in a web browser and you should see something similar to the following:

Traffic Layer

Complete Code

<%@ Page Language="C#" Src="AuthenticatedPage.aspx.cs" Inherits="AuthenticatedPage" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Traffic Layer Demo</title>

<script type="text/javascript" src="<% GetAPISource (); %>"></script>
<script type="text/javascript">

var main = function () {

    var GeoBase   = Telogis.GeoBase;
    var MapLayers = GeoBase.MapLayers;
    var Map       = Telogis.GeoBase.Widgets.Map;
    var Size      = Telogis.GeoBase.Size;

    // The call to set the internal GeoBase authentication token should be made at
    // the start of the entry function, as it is a prerequisite for any requests
    // made to the server.

    GeoBase.setService (<% GetService (); %>);
    GeoBase.setAuthToken (<% GetToken (); %>);

    // By default, a newly created map object has its DOM tree appended to the
    // document body. To customize where the map is located, either create in the
    // HTML section a div with the same ID, or specify a "parent" configuration option.

    var map = new Map ({
		id: "main_map", 
		size: new Size (640, 480)
    });
	
    new MapLayers.TrafficLayer({
		map: map, 
		id: 'main_map_traffic', 
		source: 'TrafficData'
    });

};

</script>
</head>
<body onload="main ();">
</body>
</html>

Published, Jul 7th 2016, 22:29

Tagged under: geobase javascript maps