Using PTV xMapServer with JavaScript mapping APIs

  • While xServer internet uses HTTP basic authentication with <user>/<password>, it is highly recommended to work with the token assigned to your subscription using the combination “xtok”/<token>. Using the token is a safer way than using your far more sensible account data.

  • This section describes how to incorporate the PTV xServer internet map services into interactive JavaScript based map controls. Look at "A map in different flavours" to see the result and the referring code of the different practices. PTV supports the following products:

  • PTV Ajax Maps

    PTV's own API for building map applications for the browser. While it is optimized to work with PTV xServer, it can be also be combined with many third-party services.

  • A reliable OpenSource mapping API with focus on established GIS standards.

  • Designed with simplicity, performance and usability in mind, this JavaScript mapping API was built from scratch to support mobile devices with a light-weight and flexible API.

  • PTV xServer add-on AJAX Maps and PTV xServer internet

    PTV AJAX Maps lets you build browser-based map applications with PTV xServer. In the reference to the AJAX MapsJavaScript, you must add your token as parameter. The boilerplate code to use PTV AJAX Maps with xServer internet:

<html>
  <head>
    <!--[if IE]>
    <script type="text/javascript" src="https://ajaxmaps-eu-n-test.cloud.ptvgroup.com/ajaxmaps/webcomponent/script/excanvas.js"></script>
    <![endif]-->
    <script type="text/javascript" src="https://ajaxmaps-eu-n-test.cloud.ptvgroup.com/ajaxmaps/.qxrpc"></script>
    <script type="text/javascript" src="https://ajaxmaps-eu-n-test.cloud.ptvgroup.com/ajaxmaps/webcomponent/script/map-standalone.js?xtok=<insert your token here!>"></script>
     
    <script type="text/javascript">
      function init() {
        var container =
          document.getElementById("mapContainer");
        var map =
          new com.ptvag.webcomponent.map.Map(container);
        window.onresize = function() {
          map.updateSize();
        };
      }
    </script>
  </head>
 
  <body onload="init()">
    <div id="mapContainer"
      style="width:100%;height:100%">
    </div>
  </body>
</html>

  • In-depth information about the API of PTV AJAX Maps

    Interactive map with PTV xMap client and Leaflet

    This tutorial shows how to display an interactive map with the PTV xMap client classes and Leaflet. You will need the following files and can reference them in your html-file:

<link type="text/css" rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css"></link>
      
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="https://svc-eu-n-test.cloud.ptvgroup.com/xmap/xmap-client.js"></script>
<script src="https://xmap-eu-n-test.cloud.ptvgroup.com/leaflet/leaflet.ptv.js"></script>

  • The leaflet.ptv.js-file helps integrating the PTV-layers in an interactive Leaflet map.

var map;
 
// you need a token to display the layers!!
var token = '<INSERT-YOUR-TOKEN-HERE'; 
 
//initialize a client with the requestURL and set credentials
//the requestURL is the base URL of the service to use, before the /rs/ part
var client = new XMapClient('https://xmap-eu-n-test.cloud.ptvgroup.com/xmap');
client.setCredentials("xtok", token);
 
//let's go to Karlsruhe...
var location = new L.LatLng(49.014, 8.4043);
 
//initialize layers
var bgLayer = new L.PtvLayer.Background(client);
var fgLayer = new L.PtvLayer.Foreground(client);
 
//set up the map
//'mapContainer' is the id of the html-element you want to show the map in
map = new L.Map('mapContainer', {
    center: location,
    zoom: 16,
    layers: [bgLayer, fgLayer],
    crs: L.CRS.PTVMercator
    });
 
map.attributionControl.setPosition('bottomleft');
map.attributionControl.setPrefix('&copy; PTV, TomTom');
map.zoomControl.setPosition('bottomright');

  • You can try this code with our JSFiddle sample here.

    WMS and xServer internet

    XServer internet supports WMS, the standard web API for map imagery. You will find a detailed explanation of the API here. You can use this API to integrate PTV xMapServer into 3rd-party map controls like Open Layers.

    The request scheme for xServer internet with WMS is:

    https://xmap-eu-n-test.cloud.ptvgroup.com/WMS/WMS?REQUEST=GetMap&width=600&height=600&bbox=...

    Note: To access the layers xmap-ajaxfg and xmap-plain, you have to append your token. Add &xtok=<your token> as additional parameter!

    OpenLayers with WMS

    PTV provides a code sample for integration of xMapServer into OpenLayers. You can find a sample for the on-premise integration here. This sample can be easily adopted for xServer internet by appending the token to the label layer.

    You can run the boilerplate code for xServer internet with OpenLayers with this JSFiddle sample here.

    Leaflet with WMS

    An alternative to the PTV Leaflet client is integration of xMapServer with the WMS API. You can run the boilerplate code for Leaflet integration with xServer internet with this JSFiddle sample here.