API Demo

Home

_____________________

Using the API

Click here for Information and examples on using our API.

Quick Reference

Basic Map

Overlaying Points

Searching Streets

Directions

Points

F.A.Q

_____________________

Technical Documentation

Map basics

	Introduction
	Audience
	Embedding Maps
	Loading Maps
	Map Elements
	Map Object
	Geographic Point
	Initialising the map
	View example

Introduction

Welcome to the developer documentation for the Streetmaps API! The Streetmaps JavaScript API lets you embed Streetmaps in your web pages. To use the API, you need to first sign up for an API key. Once you've received an API key, you can develop a map application following the instructions in this documentation.

Audience

This documentation is designed for people familiar with JavaScript programming and object-oriented programming concepts. You should also be familiar with Streetmaps from a user's point of view.

Embedding Maps on your website

The best way to start learning about the StreetMaps API is to see a simple example. The following web page displays a 500x500 map zoomed into West Street, Durban. You can look at this example here or copy and paste the below code to your server. Remember, you will have to replace the key below with your own Maps API key.

<script language="javascript" src="http://www.streetmaps.co.za/aatutil.js?Key=--YOUR USER Key HERE--"></script>
<script language="javascript" src="http://www.streetmaps.co.za/aatmaps.js?Key=--YOUR USER Key HERE--"></script>

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>StreeMaps JavaScript API Example</title>

<script>
function displayMap()
{
   // set up the main map window
   myMap = new CAatMap();
   // This is where the navigation images (N,E,S,W,Slider,etc) are found
   myMap.SetImageBase("http://www.streetmaps.co.za/img/");
   // Copyright notice branded on the map
   myMap.SetCopyright("© 2007 AAT and BCX");
   // Logo used for branding; width and height need to be specified
   myMap.SetBranding("http://www.streetmaps.co.za/img/aat_logo.png",48,34);
   // Define the DIV the map will live in
   myMap.SetOutput("map1");
   // Add a map layer, level 500 (higher is lower down)
   var newlayer = myMap.AddLayer("map",500);
   // Turn off the "points" button, won't be used in this example
   myMap.SetPointsButtons(false);
   // Set a starting point for the map
   myMap.Jump(31.039006,-29.855916,0.005);
   // Start in map view
   newlayer.SetType("map");
   myMap.Init();
}
</script>

</head>
<body  onload="displayMap();">
  <table width=400 height=500  border=0>
    <tr>
      <td colspan=2> <div style="width:500;height:500;" id="map1" ></div></td>
    </tr>
  </table>
</body>    
</html>

In this simple example, there are a few things to note

  1. We include two Maps API JavaScript script files.
  2. You need to create a <div> tag to hold the map .
  3. You run a javacript function to load the map .
  4. You center the map on a given geographic point.

These steps are explained below

Loading Maps API

The scripting tags below must be included at the very top of your code and the URL's point to the location of the JavaScript file that includes all of functions / images you need for using our API. Remember to replace "--YOUR USER KEY HERE--" with the key you received when you signed up for the API.

<script language="javascript" src="http://www.streetmaps.co.za/aatutil.js?Key=--YOUR USER KEY HERE--"></script>
<script language="javascript" src="http://www.streetmaps.co.za/aatmaps.js?Key=--YOUR USER KEY HERE--"></script>

Map Elements

You must reserve a spot for the map on your webpage. To do this create a div, as below, element and include the map reference to this element . In the example we have used "map1" as the reference and set its size using style attributes.

<div style="width:500;height:500;" id="map1" ></div>

Map Object

The javascript class that sets up the map is called CAatMap Objects of this class define a single map on a page. We create a new instance of this class using the JavaScript new operator and called it myMap.

myMap = new CAatMap();

Geographic Point

To create a starting point for the map you will need to enter latitude and longitude coordinates. As in the example above the first two parameters are the latitude and longitude which will be the center point of the map when it is loaded and the third option is the zoom level.
The Zoom level, has to be one of the following: 10.24, 5.12, 2.56, 1.28, 0.64, 0.32, 0.12, 0.05, 0.02, 0.01, 0.005, 0.0025, 0.00125, 0.000625. This represents the amount of map, in degrees, per 300x300 pixel tile, between the center and an edge. (play with the Zoom level to really get a feel for it)

myMap.Jump(31.039006,-29.855916,0.005);

Initialising the map

To ensure that the map is only placed on the page after the page has fully loaded, we only execute the function which constructs the Map object once the <body> element of the HTML page receives an onload event. Doing so avoids unpredictable behavior and gives us more control on how and when the map draws.

<body  onload="displayMap();">