diff --git a/examples/tileutfgrid.html b/examples/tileutfgrid.html new file mode 100644 index 0000000000..e2141f747c --- /dev/null +++ b/examples/tileutfgrid.html @@ -0,0 +1,58 @@ + + + + + + + + + + + TileUTFGrid example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

TileUTFGrid example

+

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

+
+

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 new file mode 100644 index 0000000000..d0240e3728 --- /dev/null +++ b/examples/tileutfgrid.js @@ -0,0 +1,46 @@ +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.layer.Tile'); +goog.require('ol.source.TileJSON'); +goog.require('ol.source.TileUTFGrid'); + +var mapLayer = new ol.layer.Tile({ + source: new ol.source.TileJSON({ + url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json' + }) +}); + +var gridSource = new ol.source.TileUTFGrid({ + url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json', + preemptive: true +}); + +var gridLayer = new ol.layer.Tile({source: gridSource}); + +var view = new ol.View({ + center: [0, 0], + zoom: 1 +}); + +var mapElement = document.getElementById('map'); +var map = new ol.Map({ + layers: [mapLayer, gridLayer], + target: mapElement, + view: view +}); + +var flag = document.getElementById('flag'); +var admin_name = document.getElementById('admin_name'); +map.on('pointermove', function(evt) { + var viewResolution = /** @type {number} */ (view.getResolution()); + gridSource.forDataAtCoordinateAndResolution(evt.coordinate, viewResolution, + function(data) { + // If you want to use the template from the TileJSON, + // load the mustache.js library separately and call + // info.innerHTML = Mustache.render(gridSource.getTemplate(), data); + mapElement.style.cursor = data ? 'pointer' : ''; + flag.src = data ? 'data:image/png;base64,' + data['flag_png'] : ''; + flag.style.visibility = data ? 'visible' : 'hidden'; + admin_name.innerHTML = data ? data['admin'] : ' '; + }); +});