diff --git a/examples/vector-tile-info.css b/examples/vector-tile-info.css
new file mode 100644
index 0000000000..9d778d829b
--- /dev/null
+++ b/examples/vector-tile-info.css
@@ -0,0 +1,16 @@
+#map {
+ position: relative;
+}
+
+#info {
+ z-index: 1;
+ opacity: 0;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ margin: 0;
+ background: rgba(0,60,136,0.7);
+ color: white;
+ border: 0;
+ transition: opacity 100ms ease-in;
+}
diff --git a/examples/vector-tile-info.html b/examples/vector-tile-info.html
new file mode 100644
index 0000000000..160b4319be
--- /dev/null
+++ b/examples/vector-tile-info.html
@@ -0,0 +1,11 @@
+---
+layout: example.html
+title: Vector Tile Info
+shortdesc: Getting feature information from vector tiles.
+docs: >
+
Move your pointer over rendered features to display feature properties.
+tags: "vector tiles"
+---
+
diff --git a/examples/vector-tile-info.js b/examples/vector-tile-info.js
new file mode 100644
index 0000000000..2ee277516a
--- /dev/null
+++ b/examples/vector-tile-info.js
@@ -0,0 +1,34 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.MVT');
+goog.require('ol.layer.VectorTile');
+goog.require('ol.source.VectorTile');
+
+var map = new ol.Map({
+ target: 'map',
+ view: new ol.View({
+ center: [0, 0],
+ zoom: 2
+ }),
+ layers: [new ol.layer.VectorTile({
+ source: new ol.source.VectorTile({
+ format: new ol.format.MVT(),
+ url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf'
+ })
+ })]
+});
+
+map.on('pointermove', showInfo);
+
+var info = document.getElementById('info');
+function showInfo(event) {
+ var features = map.getFeaturesAtPixel(event.pixel);
+ if (!features) {
+ info.innerText = '';
+ info.style.opacity = 0;
+ return;
+ }
+ var properties = features[0].getProperties();
+ info.innerText = JSON.stringify(properties, null, 2);
+ info.style.opacity = 1;
+}
diff --git a/src/ol/renderer/canvas/vectortilelayer.js b/src/ol/renderer/canvas/vectortilelayer.js
index 3f5e6fc1ff..9e724e2c86 100644
--- a/src/ol/renderer/canvas/vectortilelayer.js
+++ b/src/ol/renderer/canvas/vectortilelayer.js
@@ -284,7 +284,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.forEachFeatureAtCoordinate = functi
var tile, tileCoord, tileExtent;
for (i = 0, ii = renderedTiles.length; i < ii; ++i) {
tile = renderedTiles[i];
- tileCoord = tile.tileCoord;
+ tileCoord = tile.wrappedTileCoord;
tileExtent = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent);
bufferedExtent = ol.extent.buffer(tileExtent, hitTolerance * resolution, bufferedExtent);
if (!ol.extent.containsCoordinate(bufferedExtent, coordinate)) {
diff --git a/test/spec/ol/renderer/canvas/vectortilelayer.test.js b/test/spec/ol/renderer/canvas/vectortilelayer.test.js
index fcb87f6a9e..6a686ff24e 100644
--- a/test/spec/ol/renderer/canvas/vectortilelayer.test.js
+++ b/test/spec/ol/renderer/canvas/vectortilelayer.test.js
@@ -1,5 +1,3 @@
-
-
goog.require('ol');
goog.require('ol.obj');
goog.require('ol.Feature');
@@ -305,6 +303,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
this.tileKeys = [key];
this.sourceTiles_ = {};
this.sourceTiles_[key] = sourceTile;
+ this.wrappedTileCoord = arguments[0];
};
ol.inherits(TileClass, ol.VectorImageTile);