Dev: SM: Basic Map

From AAT Wiki
Jump to navigation Jump to search


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.

Embedding Maps on your website

he 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=" USER Key HERE--"></script>
<script language="javascript" src=" USER Key HERE--"></script>

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"   "">
<html xmlns="">
<title>StreeMaps JavaScript API Example</title>

function displayMap()
   // create the map
   myMap = new CAatMap("map1");

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

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

  • We include two Maps API JavaScript script files.
  • You need to create a
    tag to hold the map.
  • You run a javacript function to load the map.
  • 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=" USER KEY HERE--"></script>
<script language="javascript" src=" 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. You need to pass through the parameter of the div that will contain the map, in this case it's "map1".

myMap = new CAatMap("map1");

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)


Then you need to tell the Map API that you're done modifying the map object, and display it.


Initializing 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();">

Removing Branding (paying only)

Paying customers may remove the branding on the bottom-right of the map, by calling the AatMap.ShowBranding with a false parameter. Calling it with "true" will show the branding on the next map update.