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; +}