Introduction

The AfriGIS Intiendo Mapserver JavaScriptAPI enables users to embed a fully functional map into any web page. It provides functionality to control and add customer data to the map. It is written in pure JavaScript, HTML and CSS, meaning no third party plug-in is required.  The API supports the most popular browsers, including: Mozilla Fire Fox, Google Chrome, Opera and Internet Explorer.

Key Features
•  Embed interactive AfriGIS Maps into an web application using pure JavaScript
•  Choose between different available layers e.g. aerial photography and vector maps
•  Overlay dynamic MapServer layers on top of base maps
•  Overlay point, line or polygon data on top of the map in the browser
•  Extremely fast base maps
•  Includes basic address searching functionality
•  Includes Driving Directions
•  Extremely customisable
•  Well documented API

Audience

This document is compiled for users familiar with JavaScript and JSON programming and object-oriented programming concepts. If you are unfamiliar with JavaScript, you may follow 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 (bug fix & 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

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 (bug fix & enhancements) you will automatically benefit. Copy the <script> tag below into the <head> section of your HTML page.

Code Sample

<script type=”text/javascript” language=”javascript” src=”http://maps.afrigis.co.za/loadjsapi/?key=YOUR_API_KEY&version=2.5″>
</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” %>