This “Hello World” tutorial shows you how to integrate a basic MapTP Map into your Web page using the wrapper classes.
-
Load the core and wrapper classes of the MapTP AJAX API. For this you have to call the Map24.loadApi function, passing an array containing the strings “core_api” and “wrapper_api”. Additionally, you must pass the name of a callback function that is called when the MapTP API is loaded. In our examples we use the name map24ApiLoaded.
function goMap24() {
//Load core and wrapper classes
Map24.loadApi( ["core_api", "wrapper_api"] , map24ApiLoaded );
}
-
Implement the callback function. This simple function initializes the mapping client with the
Map24.MapApplication.init function. To define the area in your HTML page that will contain the map you must pass the ID of the <div> tag (here: “maparea”):
//If function name was defined in the loadApi() function,
//this function is called when the API was loaded
function map24ApiLoaded(){
//Initialize mapping client
Map24.MapApplication.init( { NodeName: "maparea" } );
}
Note: Before the application loads the MapTP API via Map24.loadApi() it is important that the loader script - which contains the code for the Map24.loadApi() function - is completely loaded. The loader script is loaded with the script tag:
<script type="text/javascript" language="javascript" src="http://api.maptp.map24.com/ajax?appkey=...
It is recommended to call Map24.loadApi() and Map24.MapApplication.init() not
from an imported JavaScript code. Depending on timing and Web browser it can
happen that the JavaScript that calls Map24.loadApi() is loaded and executed
before the MapTP AJAX API loader script is fully loaded. This leads to an error
and the map cannot be shown.
Instead, initiate the loadApi() call after all JavaScript code is loaded, when
the HTML body gets loaded:
<body onload="goMap24()">
<div id="maparea" style="width:700px;height:500px;background-color:#E0E0E0;"></div>
</body>
View example
Executable code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Hello World</title>
<script type="text/javascript" language="javascript" src="http://api.maptp.map24.com/ajax?appkey=Add your AJAX application key here">
</script>
<script type="text/javascript" language="javascript">
function goMap24() {
//Load core and wrapper classes and specify a callback method. This method is called when the API is loaded and the map
//can be shown.
Map24.loadApi( ["core_api", "wrapper_api"] , map24ApiLoaded );
}
//Callback function called when the API is loaded. The map can now be shown.
function map24ApiLoaded(){
//Initialize mapping client and show map.
Map24.MapApplication.init( { NodeName: "maparea" } );
}
</script>
</head>
<body onload="goMap24()">
<div id="maparea" style="width:700px;height:500px;background-color:#E0E0E0;"></div>
</body>
</html>
