boilerplate

Basic Setups for Map Widgets

This section contains templates to initialize a basic xMapServer-2 base map. Read here for xMapServer-1 samples.

Leaflet Basic Setup

Demo

xserver-internet

var map = L.map('map').setView(new L.LatLng(49.01405, 8.4044), 14);

var baseMapLayer = L.tileLayer(
    'https://s0{s}-xserver2-test.cloud.ptvgroup.com/services/rest/XMap/tile/{z}/{x}/{y}?storedProfile={profile}' +
    '&xtok={token}', {
        token: window.token,
        profile: 'silkysand',
      	attribution: '© ' + new Date().getFullYear() + ' PTV Group, HERE',
        subdomains: '1234',
        maxZoom: 22
    }).addTo(map);  

on-premise

var map = L.map('map').setView(new L.LatLng(49.01405, 8.4044), 14);

var baseMapLayer = L.tileLayer(
    'http://127.0.0.1:50000/services/rest/XMap/tile/{z}/{x}/{y}?storedProfile={profile}', {	
        profile: 'silkysand',
        attribution: '© ' + new Date().getFullYear() + ' PTV Group, HERE',
        maxZoom: 22
    }).addTo(map);

Aerial/Road Hybrid Maps

A hybrid map with HERE aerial imagery and PTV overlay can be achieved by creating a mesh-up of multiple tile layers. A Leaflet TileLayer with a HERE tile-URI and one or more PTV TileLayers (excluding the background) can be inserted to the same Leaflet Map instance.

Source Code

The PTV layer PTV_TruckAttributes and PTV_TrafficIncidents can also be made clickable (using L.TileLayer.XServer).

Source Code with Click-Interaction

MapLibre GL

Source Code

Demo

OpenLayers2 Basic Setup

Demo

xserver-internet

var raster = new OpenLayers.Layer.XYZ(
    'BaseMap', [
            'https://s01-xserver2-test.cloud.ptvgroup.com/services/rest/XMap/tile/${z}/${x}/${y}?xtok=' + token,
            'https://s02-xserver2-test.cloud.ptvgroup.com/services/rest/XMap/tile/${z}/${x}/${y}?xtok=' + token,
            'https://s03-xserver2-test.cloud.ptvgroup.com/services/rest/XMap/tile/${z}/${x}/${y}?xtok=' + token,
            'https://s04-xserver2-test.cloud.ptvgroup.com/services/rest/XMap/tile/${z}/${x}/${y}?xtok=' + token
        ], {
            sphericalMercator: true
        }
    );

on-premise

var raster = new OpenLayers.Layer.XYZ(
    'BaseMap', [
            'http:127.0.0.1:50000/services/rest/XMap/tile/${z}/${x}/${y}'
        ], {
            sphericalMercator: true
        }
    );

OpenLayers3 Basic Setup

Demo

xserver-internet

var raster = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'https://s0{1-4}-xserver2-test.cloud.ptvgroup.com/services/rest/XMap/tile/{z}/{x}/{y}?xtok=' + token,
        layer: 'xmap', maxZoom: 22
    })
});

on-premise

var raster = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http:127.0.0.1:50000/services/rest/XMap/tile/{z}/{x}/{y}',
        layer: 'xmap', maxZoom: 22
    })
});

KendoUI Basic Setup

Demo

xserver-internet

function createMap() {
    $("#map").kendoMap({
        center: [49.01405, 8.4044],
        zoom: 10,
        layers: [{
            type: 'tile',
            urlTemplate: 'https://s0#= subdomain #-xserver2-test.cloud.ptvgroup.com/services/rest/XMap/tile/' +
            '#= zoom #/#= x #/#= y #?xtok=' + token,
            subdomains: ['1', '2', '3', '4'],
            attribution: '© ' + new Date().getFullYear() + ' PTV Group, HERE'
        }]
    });
}

on-premise

function createMap() {
    $("#map").kendoMap({
       center: [49.01405, 8.4044],
        zoom: 10,
        layers: [{
            type: 'tile',
            urlTemplate: 'http://127.0.0.1:50000/services/rest/XMap/tile/#= zoom #/#= x #/#= y #',
            attribution: '© ' + new Date().getFullYear() + ' PTV Group, HERE'
        }]
    });
}