Use Cases > PTV xMap > How to Install Ajax Maps

How to Install Ajax Maps

The servlet has to be deployed before running the example successfully. Please check your installation and configuration carefully. The PTV deployment guide for Ajax Maps servlet and the current servlet itself are downloadable via the Customer Area. But you must log in before downloading the zip file or using the helpful documents.

PTV xServer Add-on AJAX Maps

Two main goals are supposed to be achieved in this section:

  1. Where can I find the AJAX Maps tutorial?

  2. How can I start my first test site?

The tutorial is part of the servlet and can be displayed after supplying following bookmark in your local browser: http://localhost:8080/ajaxmaps/tutorial/tutorial.html. Please note the correct port depends on the chosen deployment scenario (8080,50000, 50010, etc.).

The Map API describes all relevant classes concerning the visualisation of objects via PTV xMap Server.

Start the Map API Demonstration getting familiar with our PTV servlet. Simply copy following URL http://localhost:[port]/ajaxmaps/testMapApi.jsp into your web browser. But don't forget to use the correct port. To get an impression of what's possible with the PTV AJAX Maps servlet, please have a look at our PTV Code Sample Browser.

Licensing

A valid license must be ordered for the use of PTV xMap Server and the permission to deploy the servlet. Please order a test version via Developer Zone .The correct license file can be validated via the PTV xMap Server config web page (PTV Management Console).

Preparation on Server Side

The deployment of this servlet is quite simple. Just follow the installation guide in the Customer Area (becoming a registered member an log in is mandatory).

Update the Web Applications

Please download the latest ajaxmaps-"version".war file if access to the Custom Area is permitted. Following steps have to be done for basic deployment:

Browser support

In principle every browser which supports JavaScript handles the AJAX technology. But we recommend the use of Mozilla Firefox in order to run the application without any difficulties.

On the basis of W3C conform technology AJAX maps works on independent platforms. A browser plugin is not necessary, but JavaScript has to be enabled.

Qooxdoo features

The servlet's object hierarchy is based on the OO features of the qooxdoo JavaScript framework. One notable feature of qooxdoo is a property mechanism that automatically generates getters, setters, and events for properties of an object.

As a user of the PTV AJAX Maps servlet, you don't have to concern yourself with the inner workings of the property system. However, it's important that you can interpret the API documentation. For example, there is a center property in the main map class. This means that you can call setCenter() and getCenter() on the map, even though these are not explicitly listed as methods.

As qooxdoo is used within the AJAX Map, it is possible to use other JavaScript libraries within your web application as well, e.g. jQuery.

Example for the JavaScript-based Client Control

To use the map, you first need to include a few JavaScripts as shown in the example code. The first script tag is contained inside a conditional comment (only interpreted by IE). It enables showing vector graphics on the map in IE by using a "<canvas> emulator" written by Google. All other modern browsers support the <canvas> tag without such a wrapper.

The second script tag includes the necessary code from the qooxdoo framework for making remote procedure calls (used by the map on several occasions). The next script tag (.qxrpc) initialises the RPC system. If you want to make sure that your users can use all the map features even with disabled cookies, you should include a session id in the source URL (e.g. by using <%= response.encodeURL(".qxrpc") %> in a JSP).

The final script tag loads the code for the actual Ajax map. In the example, all the scripts are loaded from the same server where the tutorial is loaded from (using relative URLs). To load them from an external server, simply use absolute URLs (i.e. prefix every script URL with something like http://mapserver/ajaxmaps/).

<!--[if IE]>
   <script type="text/javascript" src="http://localhost/webcomponent/script/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="http://localhost/webcomponent/script/qooxdoo/script/qx-transport.js"></script>
<script type="text/javascript" src="http://localhost/.qxrpc"></script>
<script type="text/javascript" src="http://localhost/webcomponent/script/map.js"></script>

After the page has been loaded, a map instance is created in the onload handler. In this case, we specify only one parameter in the map constructor (the container element).

<script type="text/javascript">
   function init(){
      var container = document.getElementById("mapContainer");
      var map = new com.ptvag.webcomponent.map.Map(container);   
   }
</script>
...
<body onload="init();">
   <div id="mapContainer"></div>

If you intend to use a JavaScript library e.g. jQuery, you can also instantiate the map with a jQuery Selector. qooxdoo and jQuery do not conflict each other as not too much parts of qooxdoo are used for the PTV AJAX Maps servlet. The above code could be adapted as follows:

<script type="text/javascript">
   $(document).ready(function(){
      var map = new com.ptvag.webcomponent.map.Map($("#mapContainer").get(0));
   });
</script>
...
<body>
   <div id="mapContainer"></div>