https://github.com/ptv-logistics/leaflet-ptv-developer
Leaflet classes for extended PTV Developer Maps functionalities
https://github.com/ptv-logistics/leaflet-ptv-developer
leaflet maplibre-gl-js ptv-developer
Last synced: 4 months ago
JSON representation
Leaflet classes for extended PTV Developer Maps functionalities
- Host: GitHub
- URL: https://github.com/ptv-logistics/leaflet-ptv-developer
- Owner: ptv-logistics
- License: isc
- Created: 2022-03-28T07:27:07.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-05-15T10:55:58.000Z (over 1 year ago)
- Last Synced: 2025-05-25T19:44:12.436Z (5 months ago)
- Topics: leaflet, maplibre-gl-js, ptv-developer
- Language: HTML
- Homepage:
- Size: 345 KB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Purpose
leaflet-ptv-developer provides classes to add [PTV Developer](https://developer.myptv.com/) specific features to Leaflet.
## Components
* [L.TileLayer.PtvDeveloper](#tilelayerptvdeveloper)
## How to build
```npm install```
or use the latest build at https://unpkg.com/leaflet-ptv-developer/dist/
The Layer class `L.TileLayer.PtvDeveloper` can be used to make PTV Developer [`data-tiles`](https://developer.myptv.com/Documentation/Raster%20Maps%20API/Code%20Samples/Data%20Tiles.htm) 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`
```javascript
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`](https://developer.myptv.com/Documentation/Raster%20Maps%20API/Code%20Samples/Image%20Tiles.htm) base map layer and a clickable restrictions `data-tiles` overlay.
```javascript
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`](https://developer.myptv.com/Documentation/Vector%20Maps%20API/QuickStart.htm) base map layer.
```javascript
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);
```