As shown in the diagram below,
large parts of the MapTP AJAX API are automatically generated from the MapTP Web Services interfaces (WSDL). These so-called core classes
offer the full range of features provided in the MapTP Web Services, and thus allow you to build sophisticated and highly customized mapping applications. All core classes of the MapTP AJAX API belong to the MapTP.Webservices namespace.
On runtime, the MapTP AJAX API communicates with the MapTP Web Services via XML/SOAP requests and responses.
In the following "Hello World" tutorial you can learn how to show the map on a Web page using the core classes. You can find further examples, as well as information on constructing requests, retrieving MapTP Web Services responses, event handling, etc. in the section "Where to go from here".
You can load the core classes with the following command:
Map24.loadApi( ["core_api"], mapTPApiLoaded );
The first parameter “core_api” defines that the core classes should be loaded. If you also want to use the wrapper classes in your application, you have to add the “wrapper_api” parameter as follows:
Map24.loadApi( ["core_api", “wrapper_api”], mapTPApiLoaded );
In the second parameter you have to specify the name of a function that is called after the API has been loaded (here: mapTPApiLoaded). In this function you have to do the following steps to show the map in your Web browser:
- Create the map as an instance of type Map24.Map.
- Define the area in your HTML page that will contain the map. This is done with the Map24.Map.addCanvas() function. A canvas represents the visible screen area in which maps are drawn. To define this area you must pass the ID of the <div> tag (here: “maparea”) in the NodeName parameter.
- Add a new map client to the map with the Map24.Map.addMapClient() function.
- Show the map with the Map24.Map.show() function.
function mapTPApiLoaded(){
map = new Map24.Map();
//Add a new canvas to the map
map.addCanvas( new Map24.Canvas( { NodeName: "maparea" } ), "c" );
//Add a new map client to the map
map.addMapClient( new Map24.MapClient.Applet(), "Applet" );
map.show( "Applet", "c" );
}
This is the complete code for loading the core classes and showing the map:
<!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=CJX1e2059693bcd799cd0f22a81f2073X12"></script>
<script type="text/javascript" language="javascript">
var map = null;
var conn = null;
function goMap24() {
Map24.loadApi( ["core_api"], map24ApiLoaded );
}
function mapTPApiLoaded(){
map = new Map24.Map();
//Add a new canvas to the map
map.addCanvas( new Map24.Canvas( { NodeName: "maparea" } ), "c" );
//Add a new map client to the map
map.addMapClient( new Map24.MapClient.Applet(), "Applet" );
map.show( "Applet", "c" );
}
</script>
</head>
<body onload="goMap24();">
<div id="maparea" style="width:700px;height:500px;background-color:#E0E0E0;"></div>
</body>
</html>
Furthermore, there are several articles on topics that are helpful to understand e.g. when sending requests to the MapTP Web Services with the core classes:
