Merge pull request #5 from PTV-Group/feature/improve-samples

add sample code to change the tile size
PTV-Group · Feb 13, 2023 · 523cf75 · 523cf75
2 parents cabccd9 + 1206e13
commit 523cf75
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/raster-tiles.html b/raster-tiles.html
@@ -26,18 +26,23 @@
     <script>
         var coordinate = L.latLng(49.012, 8.4044); // Karlsruhe, Germany
 
+        var tileSize = 256; // 512 or 1024 are also possible
+        var zoomOffset = tileSize === 256 ? 0 : tileSize === 512 ? -1 : - 2;
+
         var map = L.map('map', {
             fullscreenControl: true
         }).setView(coordinate, 17);
 
         // insert a standard PTV Developer raster base tiles. 
         var basemapLayer = L.tileLayer(
             'https://api.myptv.com/rastermaps/v1/image-tiles/{z}/{x}/{y}' +
-            '?apiKey={token}&layers={layers}', {
+            '?apiKey={token}&layers={layers}&size={tileSize}', {
                 attribution: '&copy; ' + new Date().getFullYear() + ' PTV Group, HERE, TomTom',
                 layers: 'background,transport',
+                tileSize: tileSize,
                 token: window.apiKey,
                 maxZoom: 22,
+                zoomOffset: zoomOffset,
                 pane: 'tilePane'
             }).addTo(map);
 
@@ -48,30 +53,36 @@
         // insert clickable restrictions layer. 
         var restrictionsLayer = L.tileLayer.ptvDeveloper(
             'https://api.myptv.com/rastermaps/v1/data-tiles/{z}/{x}/{y}' +
-            '?apiKey={token}&layers={layers}', {
+            '?apiKey={token}&layers={layers}&size={tileSize}', {
+                tileSize: tileSize,
                 layers: 'restrictions',
                 token: window.apiKey,
                 maxZoom: 22,
+                zoomOffset: zoomOffset,
                 pane: 'clickableTiles'
             }).addTo(map);
 
         // insert clickable traffic incident layer. 
         var trafficIncidentsLayer = L.tileLayer.ptvDeveloper(
             'https://api.myptv.com/rastermaps/v1/data-tiles/{z}/{x}/{y}' +
-            '?apiKey={token}&layers={layers}', {
+            '?apiKey={token}&layers={layers}&size={tileSize}', {
+                tileSize: tileSize,
                 layers: 'trafficIncidents',
                 token: window.apiKey,
                 maxZoom: 22,
+                zoomOffset: zoomOffset,
                 pane: 'clickableTiles'
             })
 
         // insert label layer on the top
         var labelsLayer = L.tileLayer(
             'https://api.myptv.com/rastermaps/v1/image-tiles/{z}/{x}/{y}' +
-            '?apiKey={token}&layers={layers}', {
+            '?apiKey={token}&layers={layers}&size={tileSize}', {
+                tileSize: tileSize,
                 layers: 'labels',
                 token: window.apiKey,
                 maxZoom: 22,
+                zoomOffset: zoomOffset,
                 pane: 'clickableTiles'
             }).addTo(map);
 

diff --git a/vector-tiles.html b/vector-tiles.html
@@ -28,6 +28,9 @@
     <script type="text/javascript" src="./api-key.js"></script>
     <script>
         var coordinate = L.latLng(49.012, 8.4044); // Karlsruhe, Germany
+
+        var tileSize = 256;  // 512 or 1024 are also possible
+        var zoomOffset = tileSize === 256 ? 0 : tileSize === 512 ? -1 : - 2;
 
         var map = L.map('map', {
             fullscreenControl: true
@@ -53,8 +56,10 @@
         // insert clickable restrictions layer. 
         var restrictionsLayer = L.tileLayer.ptvDeveloper(
             'https://api.myptv.com/rastermaps/v1/data-tiles/{z}/{x}/{y}' +
-            '?apiKey={token}&layers={layers}', {
+            '?apiKey={token}&layers={layers}&size={tileSize}', {
                 layers: 'restrictions',
+                tileSize: tileSize,
+                zoomOffset: zoomOffset,
                 token: window.apiKey,
                 maxZoom: 18,
                 opacity: 0.5,
@@ -64,8 +69,10 @@
         // insert clickable traffic incident layer. 
         var trafficIncidentsLayer = L.tileLayer.ptvDeveloper(
             'https://api.myptv.com/rastermaps/v1/data-tiles/{z}/{x}/{y}' +
-            '?apiKey={token}&layers={layers}', {
+            '?apiKey={token}&layers={layers}&size={tileSize}', {
                 layers: 'trafficIncidents',
+                tileSize: tileSize,
+                zoomOffset: zoomOffset,
                 token: window.apiKey,
                 maxZoom: 18,
                 opacity: 0.5,