- This page demostrates the use of the OpenLayers UTFGrid Controls. When the selected event is triggered, the underlying feature attributes are shown on the right.
-
+
+
+ This page demonstrates the use of the OpenLayers UTFGrid Controls.
-
+
+
+
+ When the selected event is triggered, the underlying feature attributes are shown below.
+
Click with custom callback
-
-
-
-
-
+
UTFGrids can be used to
output highly optimized feature "hit grids". The UTFGrid encoding scheme encodes
interactivity data for a tile in a space efficient manner. It is designed to be
@@ -63,48 +67,43 @@
/*
* Map
*/
- var map = new OpenLayers.Map('themap', {
- projection: new OpenLayers.Projection("EPSG:900913"),
- units: "m",
- maxResolution: 156543.0339,
- maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
+ var map = new OpenLayers.Map({
+ div: "themap",
+ projection: "EPSG:900913",
controls: [] // No default controls; no pan zoom for demo
});
/*
* Controls
*/
- var callback = function(attributes) {
- if (attributes) {
- var msg = "In 2005, " + attributes.NAME
- msg += " had a population of " + attributes.POP2005 + " people.";
- var element = OpenLayers.Util.getElement('attrsdiv');
- element.innerHTML = msg;
- return true;
- } else {
- this.element.innerHTML = '';
- return false;
+ var callback = function(dataLookup) {
+ var msg = "";
+ if (dataLookup) {
+ var data;
+ for (var idx in dataLookup) {
+ // idx can be used to retrieve layer from map.layers[idx]
+ data = dataLookup[idx];
+ msg += "In 2005, " + data.NAME + " had a population of " +
+ data.POP2005 + " people. ";
+ }
}
- }
+ document.getElementById("attrsdiv").innerHTML = msg;
+ };
- controls = {
- 'move': new OpenLayers.Control.UTFGrid({
- 'div': 'attrsdiv',
- 'handlerMode': 'move'
+ var controls = {
+ move: new OpenLayers.Control.UTFGrid({
+ callback: callback,
+ handlerMode: 'move'
}),
- 'hover': new OpenLayers.Control.UTFGrid({
- 'div': 'attrsdiv',
- 'handlerMode': 'hover'
+ hover: new OpenLayers.Control.UTFGrid({
+ callback: callback,
+ handlerMode: 'hover'
}),
- 'click': new OpenLayers.Control.UTFGrid({
- 'div': 'attrsdiv',
- 'handlerMode': 'click'
- }),
- 'click_callback': new OpenLayers.Control.UTFGrid({
- 'handlerMode': 'click',
- 'callback': callback
- }),
- }
+ click: new OpenLayers.Control.UTFGrid({
+ callback: callback,
+ handlerMode: 'click'
+ })
+ };
var control;
for(var key in controls) {
control = controls[key];
@@ -126,11 +125,8 @@
* Layers
*/
- var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
- "http://vmap0.tiles.osgeo.org/wms/vmap0",
- {layers: 'basic'}
- );
- map.addLayer(ol_wms);
+ var osm = new OpenLayers.Layer.OSM();
+ map.addLayer(osm);
var grid_layer = new OpenLayers.Layer.UTFGrid(
'Invisible UTFGrid Layer',
diff --git a/examples/utfgrid_twogrids.html b/examples/utfgrid_twogrids.html
index ad4baf8f0b..de3bf84ae2 100644
--- a/examples/utfgrid_twogrids.html
+++ b/examples/utfgrid_twogrids.html
@@ -1,85 +1,95 @@
+
-
";
- debug += "";
- if (this.debugElement) {
- this.debugElement.innerHTML = debug;
- }
- },
-
/**
* APIMethod: callback
- * Takes the attrs and does somethings with them
- * The default behavior is to make a simple table
- * and write to a div (defined by this.element)
+ * Function to be called when a mouse event corresponds with a location that
+ * includes data in one of the configured UTFGrid layers.
*
* Parameters:
- * attrs - {Object}
- *
- * Returns:
- * {Boolean} - was the element updated?
+ * dataLookup - {Object} Keys of this object are layer indexes and can be
+ * used to resolve a layer in the map.layers array. The structure of
+ * the property values depend on the data included in the underlying
+ * UTFGrid and may be any valid JSON type.
*/
- callback: function(attrs) {
- if (attrs !== null && typeof(attrs) !== 'undefined') {
- val = "
";
- for(var index in attrs) {
- val += "
" + index + "
" + attrs[index] + "
";
- }
- val += "
";
- this.element.innerHTML = val;
- return true;
- } else {
- this.element.innerHTML = '';
- return false;
- }
- },
-
- /**
- * Method: resolveCode
- * Resolve the UTF-8 encoding stored in grids to simple
- * number values.
- * See the [utfgrid section of the mbtiles spec](https://github.com/mapbox/mbtiles-spec/blob/master/1.1/utfgrid.md)
- * for details.
- *
- * Parameters:
- * key - {Integer}
- *
- * Returns:
- * {Integer} Adjusted key for non-escaped chars
- */
- resolveCode: function(key) {
- if (key >= 93) key--;
- if (key >= 35) key--;
- key -= 32;
- return key;
+ callback: function(dataLookup) {
+ // to be provided in the constructor
},
/**
* Method: reset
- * Resets the element
+ * Calls the callback with null.
*/
reset: function(evt) {
this.callback(null);
- if (this.element)
- this.element.innerHTML = '';
},
/**
diff --git a/lib/OpenLayers/Layer/UTFGrid.js b/lib/OpenLayers/Layer/UTFGrid.js
index f3a75bf5ee..277cc4db70 100644
--- a/lib/OpenLayers/Layer/UTFGrid.js
+++ b/lib/OpenLayers/Layer/UTFGrid.js
@@ -180,7 +180,7 @@ OpenLayers.Layer.UTFGrid = OpenLayers.Class(OpenLayers.Layer.Grid, {
utfgridResolution: 4,
/**
- * APIMethod: getTileInfo
+ * Method: getTileInfo
* Get tile information for a given location at the current map resolution.
*
* Parameters:
@@ -246,6 +246,53 @@ OpenLayers.Layer.UTFGrid = OpenLayers.Class(OpenLayers.Layer.Grid, {
j: Math.floor((fy - globalRow) * this.tileSize.h)
};
},
+
+ /**
+ * APIProperty: getData
+ * Get tile data associated with a map location.
+ *
+ * Parameters:
+ * location - {} map location
+ *
+ * Returns:
+ * {Object} The UTFGrid data corresponding to the given map location.
+ */
+ getData: function(location) {
+ var info = this.getTileInfo(location);
+ var tile = info.tile;
+ var data;
+ if (tile) {
+ var resolution = this.utfgridResolution;
+ var json = tile.json
+ if (json) {
+ var code = this.resolveCode(json.grid[
+ Math.floor((info.j) / resolution)
+ ].charCodeAt(
+ Math.floor((info.i) / resolution)
+ ));
+ data = json.data[json.keys[code]];
+ }
+ }
+ return data;
+ },
+
+ /**
+ * Method: resolveCode
+ * Resolve the UTF-8 encoding stored in grids to simple number values.
+ * See the UTFGrid spec for details.
+ *
+ * Parameters:
+ * key - {Integer}
+ *
+ * Returns:
+ * {Integer} Adjusted key for non-escaped chars
+ */
+ resolveCode: function(key) {
+ if (key >= 93) key--;
+ if (key >= 35) key--;
+ key -= 32;
+ return key;
+ },
/**
* APIProperty: tileClass