From 6304b56501290a3c63a0448040ccb7f6ed3fb25b Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Sat, 19 Jun 2021 11:55:51 +0100
Subject: [PATCH] New example

---
 examples/canvas-tiles-tms.html | 14 ++++++++
 examples/canvas-tiles-tms.js   | 61 ++++++++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 examples/canvas-tiles-tms.html
 create mode 100644 examples/canvas-tiles-tms.js

diff --git a/examples/canvas-tiles-tms.html b/examples/canvas-tiles-tms.html
new file mode 100644
index 0000000000..28fc084ab7
--- /dev/null
+++ b/examples/canvas-tiles-tms.html
@@ -0,0 +1,14 @@
+---
+layout: example.html
+title: Custom Canvas Tiles
+shortdesc: Renders tiles with TMS coordinates for debugging.
+docs: >
+  The black grid tiles are generated on the client with an HTML5 canvas.
+  The displayed TMS tile coordinates are produced using a custom template
+  for TMS, the vector tile source's 512 pixel tile grid and the
+  <code>zDirection</code> setting for vector tiles.
+  Notice how the country polygons can be split between tiles and vector
+  labels may appear in each tile.
+tags: "layers, vector tiles, tms, canvas"
+---
+<div id="map" class="map"></div>
diff --git a/examples/canvas-tiles-tms.js b/examples/canvas-tiles-tms.js
new file mode 100644
index 0000000000..e7d37c8a8e
--- /dev/null
+++ b/examples/canvas-tiles-tms.js
@@ -0,0 +1,61 @@
+import MVT from '../src/ol/format/MVT.js';
+import Map from '../src/ol/Map.js';
+import TileDebug from '../src/ol/source/TileDebug.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorTileLayer from '../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../src/ol/source/VectorTile.js';
+import View from '../src/ol/View.js';
+import {Fill, Stroke, Style, Text} from '../src/ol/style.js';
+
+const style = new Style({
+  fill: new Fill({
+    color: 'rgba(255, 255, 255, 0.6)',
+  }),
+  stroke: new Stroke({
+    color: '#319FD3',
+    width: 1,
+  }),
+  text: new Text({
+    font: '12px Calibri,sans-serif',
+    fill: new Fill({
+      color: '#000',
+    }),
+    stroke: new Stroke({
+      color: '#fff',
+      width: 3,
+    }),
+  }),
+});
+
+const vtLayer = new VectorTileLayer({
+  declutter: true,
+  source: new VectorTileSource({
+    maxZoom: 15,
+    format: new MVT(),
+    url:
+      'https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/' +
+      'ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf',
+  }),
+  style: function (feature) {
+    style.getText().setText(feature.get('name'));
+    return style;
+  },
+});
+
+const debugLayer = new TileLayer({
+  source: new TileDebug({
+    template: 'z:{z} x:{x} y:{-y}',
+    projection: vtLayer.getSource().getProjection(),
+    tileGrid: vtLayer.getSource().getTileGrid(),
+    zDirection: 1,
+  }),
+});
+
+const map = new Map({
+  layers: [vtLayer, debugLayer],
+  target: 'map',
+  view: new View({
+    center: [0, 6000000],
+    zoom: 4,
+  }),
+});