diff --git a/examples/tileutfgrid.html b/examples/tileutfgrid.html index e2141f747c..23c39c577c 100644 --- a/examples/tileutfgrid.html +++ b/examples/tileutfgrid.html @@ -8,6 +8,14 @@ + TileUTFGrid example @@ -30,26 +38,29 @@
-
+

TileUTFGrid example

This example shows how to read data from a TileUTFGrid layer.

+

Point to a country to see its name and flag.

Tiles made with TileMill. Hosting on MapBox.com or with open-source TileServer.

See the tileutfgrid.js source to see how this is done.

utfgrid, tileutfgrid, tilejson
-
-
- -
 
-
-
+
+ +
+
 
+ +
+
+ diff --git a/examples/tileutfgrid.js b/examples/tileutfgrid.js index cfaf33e972..66e864714e 100644 --- a/examples/tileutfgrid.js +++ b/examples/tileutfgrid.js @@ -1,4 +1,5 @@ goog.require('ol.Map'); +goog.require('ol.Overlay'); goog.require('ol.View'); goog.require('ol.layer.Tile'); goog.require('ol.source.TileJSON'); @@ -29,8 +30,17 @@ var map = new ol.Map({ view: view }); -var flag = document.getElementById('flag'); -var adminName = document.getElementById('admin_name'); +var infoElement = document.getElementById('country-info'); +var flagElement = document.getElementById('country-flag'); +var nameElement = document.getElementById('country-name'); + +var infoOverlay = new ol.Overlay({ + element: infoElement, + offset: [15, 15], + stopEvent: false +}); +map.addOverlay(infoOverlay); + map.on('pointermove', function(evt) { var viewResolution = /** @type {number} */ (view.getResolution()); gridSource.forDataAtCoordinateAndResolution(evt.coordinate, viewResolution, @@ -39,10 +49,12 @@ map.on('pointermove', function(evt) { // load the mustache.js library separately and call // info.innerHTML = Mustache.render(gridSource.getTemplate(), data); mapElement.style.cursor = data ? 'pointer' : ''; - /* jshint -W069 */ - flag.src = data ? 'data:image/png;base64,' + data['flag_png'] : ''; - flag.style.visibility = data ? 'visible' : 'hidden'; - adminName.innerHTML = data ? data['admin'] : ' '; - /* jshint +W069 */ + if (data) { + /* jshint -W069 */ + flagElement.src = 'data:image/png;base64,' + data['flag_png']; + nameElement.innerHTML = data['admin']; + /* jshint +W069 */ + } + infoOverlay.setPosition(data ? evt.coordinate : undefined); }); });