Purpose

leaflet-ptv-developer provides classes to add PTV Developer specific features to Leaflet.

Components

• L.TileLayer.PtvDeveloper

How to build

npm install

or use the latest build at https://unpkg.com/leaflet-ptv-developer/dist/

L.TileLayer.PtvDeveloper

The Layer class L.TileLayer.PtvDeveloper can be used to make PTV Developer data-tiles elements clickable or request tiles with specific parameters.

Additional options

• disableMouseEvents - disables all mouse click and hover events. Default: false

Integration as single raster map

The easiest way to add a clickable layer is to use the class L.TileLayer.PtvDeveloper, append a clickable data-tiles layer (e.g. restrictions or trafficIncidents) to the profile and set the api key. The icons of the layer can now be clicked to display the object information. The options are the same as for L.TileLayer

var map = L.map('map').setView(new L.LatLng(49.012, 8.4044), 17);

var interactiveTileLayer =  L.tileLayer.ptvDeveloper(
            'https://api.myptv.com/rastermaps/v1/data-tiles/{z}/{x}/{y}' +
            '?apiKey={token}&layers={layers}', {
                attribution: '© ' + new Date().getFullYear() + ' PTV Group, HERE',
                layers: 'background,transport,labels,restrictions',
                token: window.apiKey,
                maxZoom: 22,
                pane: 'tilePane'
            }).addTo(map);

Integration as layered raster map

It's also possible to split the PTV Developer raster tiles into separate Leaflet layers. This sample creates a image-tiles base map layer and a clickable restrictions data-tiles overlay.

var map = L.map('map').setView(new L.LatLng(49.012, 8.4044), 17);

map.createPane('clickableTiles');
map.getPane('clickableTiles').style.zIndex = 500;

var basemapLayer = L.tileLayer(
    'https://api.myptv.com/rastermaps/v1/image-tiles/{z}/{x}/{y}' +
    '?apiKey={token}&layers={layers}', {
        attribution: '© ' + new Date().getFullYear() + ' PTV Group, HERE',
        layers: 'background,transport',
        token: window.apiKey,
        maxZoom: 22,
        pane: 'tilePane'
    }).addTo(map);

var restrictionsLayer = L.tileLayer.ptvDeveloper(
    'https://api.myptv.com/rastermaps/v1/data-tiles/{z}/{x}/{y}' +
    '?apiKey={token}&layers={layers}', {
        layers: 'restrictions,labels',
        token: window.apiKey,
        maxZoom: 22,
        pane: 'clickableTiles'
    }).addTo(map);

Integration as a layered vector map

Another possiblity is to mashup a clickable data-tiles layer with a vector-tiles base map layer.

var map = L.map('map').setView(new L.LatLng(49.012, 8.4044), 17);

var vectorLayer = L.maplibreGL({
        attribution: '© ' + new Date().getFullYear() + ' PTV Group, HERE',
        interactive:false,
        style: 'https://vectormaps-resources.myptv.com/styles/latest/standard.json',
        transformRequest: (url, resourceType) => {
        if (resourceType === 'Tile' && url.startsWith('https://api.myptv.com')) {
            return {
            url: url + '?apiKey=' + window.apiKey
            }
        }
        }
    }).addTo(map);
    
map.createPane('clickableTiles');
map.getPane('clickableTiles').style.zIndex = 500;

var restrictionsLayer = L.tileLayer.ptvDeveloper(
    'https://api.myptv.com/rastermaps/v1/data-tiles/{z}/{x}/{y}' +
    '?apiKey={token}&layers={layers}', {
        layers: 'restrictions',
        token: window.apiKey,
        maxZoom: 22,
        pane: 'clickableTiles'
    }).addTo(map);