Introduction

Javascript API introduces a new API where you can get the whole map through the world. Here you can watch the map and also make different type of utilities using this API.

The Maps API is a free service, available for any web site that is free to consumers. Before using this API,we assume that you are familliar with Javascript.

Tutorials for different features are included in samples section which makes you become more familliar with this API. To know more detail description of the features, see API Reference section.

Audience

This documentation is designed for people familiar with JavaScript and JSON programming and object-oriented programming concepts. There are many JavaScript tutorials available on the Web.

Quick Start Guide

You need to include the MapServer JavaScriptAPI into your HTML page. Do not copy the javascript to a file in your website. Rather refer a link to the file located on our servers. When we update the API (fix bugs & add enhancements) you will automatically benefit. Copy the tag below into the section of your HTML page.

Step 1: Get a Key

Before you can add a map to your site you will need to register with us. You will receive a key called a UID, which you will need to include in your code. To obtain a key please register here.

Step 2: Include the API into your HTML page

Code Sample


<script type="text/javascript" language="javascript" src="http://maps.afrigis.co.za/loadjsapi/?key=YOUR_API_KEY&version=2">
</script>

Step 3: Create div tags to hold the map

Two div tags should be created to hold the map. Copy the following code sample to the section in your HTML where you wish for the map to display.

Code Sample

<div id="MapPanel" style="width:400px;height:300px;border:1px solid black">
</div>

Step 4: Add JavaScript with a global map object and initAGMap() function

The global map object will be initialized in the initAGMap() function. The initAGMap() function should be called from the body's onload event. The initAGMap() function initializes the global map object and sets the map to an initial location.

Code Sample

<script type="text/javascript" language="JavaScript">
 var agmap = null; //declare a global map object
 function initAGMap()
 {
    agmap = new AGMap(document.getElementById("MapPanel")); 
    agmap.centreAndScale(new AGCoord(-25.7482681540537, 28.225935184269),5); // zoom level 5 here
 }
</script>

Step 5: Register the initAGMap() function with the body's onload event

Code Sample

<body onload="initAGMap()">

NB! Note to ASP.NET developers

In the Page directive, set the ValidateRequest="false".

Code Sample

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Map.aspx.cs" Inherits="Map" ValidateRequest="false" %>