From 34a9c46243c380ccde3d1f96cb34ac5d09f6cdbf Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 25 Feb 2012 16:12:19 -0700 Subject: [PATCH 1/4] Add UTFGrid components to debug loader. --- lib/OpenLayers.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/OpenLayers.js b/lib/OpenLayers.js index 360c7868d1..c257ce73c4 100644 --- a/lib/OpenLayers.js +++ b/lib/OpenLayers.js @@ -124,6 +124,7 @@ "OpenLayers/Tile.js", "OpenLayers/Tile/Image.js", "OpenLayers/Tile/Image/IFrame.js", + "OpenLayers/Tile/UTFGrid.js", "OpenLayers/Layer/Image.js", "OpenLayers/Layer/SphericalMercator.js", "OpenLayers/Layer/EventPane.js", @@ -146,6 +147,7 @@ "OpenLayers/Layer/GeoRSS.js", "OpenLayers/Layer/Boxes.js", "OpenLayers/Layer/XYZ.js", + "OpenLayers/Layer/UTFGrid.js", "OpenLayers/Layer/OSM.js", "OpenLayers/Layer/Bing.js", "OpenLayers/Layer/TMS.js", @@ -203,6 +205,7 @@ "OpenLayers/Control/WMTSGetFeatureInfo.js", "OpenLayers/Control/Graticule.js", "OpenLayers/Control/TransformFeature.js", + "OpenLayers/Control/UTFGrid.js", "OpenLayers/Control/SLDSelect.js", "OpenLayers/Geometry.js", "OpenLayers/Geometry/Collection.js", From 6284e44d2e7cacd0cf587626c263a2f0d26354ee Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 25 Feb 2012 16:18:43 -0700 Subject: [PATCH 2/4] Making the UTFGrid examples more like the rest. --- examples/utfgrid.html | 79 ++++++++++++++++------------------ examples/utfgrid_twogrids.html | 73 ++++++++++++++----------------- 2 files changed, 71 insertions(+), 81 deletions(-) diff --git a/examples/utfgrid.html b/examples/utfgrid.html index 32ebeb1545..8b28cb8db8 100644 --- a/examples/utfgrid.html +++ b/examples/utfgrid.html @@ -1,23 +1,29 @@ + - - OpenLayers UTFGrid Demo - + + + + + OpenLayers UTFGrid Demo + + -

OpenLayers UTFGrid Demo

+

OpenLayers UTFGrid Demo

-
-
-

- 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 on the right. +

  • 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,11 +65,9 @@ /* * 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 }); @@ -85,26 +85,26 @@ this.element.innerHTML = ''; return false; } - } + }; - controls = { - 'move': new OpenLayers.Control.UTFGrid({ - 'div': 'attrsdiv', - 'handlerMode': 'move' + var controls = { + move: new OpenLayers.Control.UTFGrid({ + div: 'attrsdiv', + handlerMode: 'move' }), - 'hover': new OpenLayers.Control.UTFGrid({ - 'div': 'attrsdiv', - 'handlerMode': 'hover' + hover: new OpenLayers.Control.UTFGrid({ + div: 'attrsdiv', + handlerMode: 'hover' }), - 'click': new OpenLayers.Control.UTFGrid({ - 'div': 'attrsdiv', - 'handlerMode': 'click' + click: new OpenLayers.Control.UTFGrid({ + div: 'attrsdiv', + handlerMode: 'click' }), - 'click_callback': new OpenLayers.Control.UTFGrid({ - 'handlerMode': 'click', - 'callback': callback + click_callback: new OpenLayers.Control.UTFGrid({ + handlerMode: 'click', + callback: callback }), - } + }; var control; for(var key in controls) { control = controls[key]; @@ -126,11 +126,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..e62ef063f2 100644 --- a/examples/utfgrid_twogrids.html +++ b/examples/utfgrid_twogrids.html @@ -1,23 +1,26 @@ + - - OpenLayers Multiple UTFGrid Demo - + + + + + OpenLayers Multiple UTFGrid Demo + + -

OpenLayers Multiple UTFGrid Demo

+

OpenLayers Multiple UTFGrid Demo

-
-
-

- This page demostrates the use of the OpenLayers UTFGrid Controls with more than one UTFGrid Layer. -

+
+
+ This page demonstrates the use of the OpenLayers UTFGrid Controls with more than one UTFGrid Layer.
-
+
+
  • Move (both)
-
-
-
From 55ffdffd6028ac5826b3c3d2392cad2124a832d5 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 25 Feb 2012 16:42:45 -0700 Subject: [PATCH 3/4] Removing debugging method. --- lib/OpenLayers/Control/UTFGrid.js | 26 -------------------------- 1 file changed, 26 deletions(-) diff --git a/lib/OpenLayers/Control/UTFGrid.js b/lib/OpenLayers/Control/UTFGrid.js index b55bb7d246..acccb05e9f 100644 --- a/lib/OpenLayers/Control/UTFGrid.js +++ b/lib/OpenLayers/Control/UTFGrid.js @@ -64,12 +64,6 @@ OpenLayers.Control.UTFGrid = OpenLayers.Class(OpenLayers.Control, { */ element: null, - /** - * Property: debugElement - * {DOMElement} - */ - debugElement: null, - /* Property: defaultHandlerOptions * The default opts passed to the handler constructors */ @@ -192,7 +186,6 @@ OpenLayers.Control.UTFGrid = OpenLayers.Class(OpenLayers.Control, { for (var i=0, len=layers.length; i"; - debug += "
  • j :" + info.j + "
    • "; - debug += "
  • globalrow :" + info.globalRow + "
    • "; - debug += "
  • globalcol :" + info.globalCol + "
    • "; - debug += "
  • gridrow :" + info.gridRow + "
    • "; - debug += "
  • gridcol :" + info.gridCol + "
    • "; - debug += ""; - if (this.debugElement) { - this.debugElement.innerHTML = debug; - } - }, - /** * APIMethod: callback * Takes the attrs and does somethings with them From e1dffacdde5308476ddb6ca5b534eebe125e3e72 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 25 Feb 2012 17:33:32 -0700 Subject: [PATCH 4/4] Providing a method to get data from the layer. I think it should be the job of the layer to retrieve data for a given location (instead of the control). The first part of this change creates a `getData` method on the layer and updates the control to use this method. The second part of this change removes the assumption that the data returned will be an simple object representing feature attributes. The UTFGrid specification doesn't say anything about the structure of property values in the optional data member. The examples given in the spec use string values. The default callback previously assumed that the data could be rendered in a two column table. I think it would make more sense not to make this assumption. With this change, the user must always provide a callback to do anything with returned data. --- examples/utfgrid.html | 39 ++++++------- examples/utfgrid_twogrids.html | 72 ++++++++++++++--------- lib/OpenLayers/Control/UTFGrid.js | 97 +++++++------------------------ lib/OpenLayers/Layer/UTFGrid.js | 49 +++++++++++++++- 4 files changed, 130 insertions(+), 127 deletions(-) diff --git a/examples/utfgrid.html b/examples/utfgrid.html index 8b28cb8db8..1b578cfa85 100644 --- a/examples/utfgrid.html +++ b/examples/utfgrid.html @@ -8,7 +8,9 @@ @@ -22,7 +24,7 @@

    - When the selected event is triggered, the underlying feature attributes are shown on the right. + When the selected event is triggered, the underlying feature attributes are shown below.

    • @@ -74,36 +76,33 @@ /* * 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; }; var controls = { move: new OpenLayers.Control.UTFGrid({ - div: 'attrsdiv', + callback: callback, handlerMode: 'move' }), hover: new OpenLayers.Control.UTFGrid({ - div: 'attrsdiv', + callback: callback, handlerMode: 'hover' }), click: new OpenLayers.Control.UTFGrid({ - div: 'attrsdiv', + callback: callback, handlerMode: 'click' - }), - click_callback: new OpenLayers.Control.UTFGrid({ - handlerMode: 'click', - callback: callback - }), + }) }; var control; for(var key in controls) { diff --git a/examples/utfgrid_twogrids.html b/examples/utfgrid_twogrids.html index e62ef063f2..de3bf84ae2 100644 --- a/examples/utfgrid_twogrids.html +++ b/examples/utfgrid_twogrids.html @@ -8,37 +8,34 @@

      OpenLayers Multiple UTFGrid Demo

      -
      -
      - This page demonstrates the use of the OpenLayers UTFGrid Controls with more than one UTFGrid Layer. -
      -
      -
      -
        -
      • - - -
        • -
      • - - -
        • -
      • - - -
        • -
      +
      + This page demonstrates the use of the OpenLayers UTFGrid Controls with more than one UTFGrid Layer.
      +
      +
        +
      • + + +
        • +
      • + + +
        • +
      • + + +
        • +
      +