diff --git a/examples/utfgrid-geography-class.html b/examples/utfgrid-geography-class.html new file mode 100644 index 0000000000..a8fc106465 --- /dev/null +++ b/examples/utfgrid-geography-class.html @@ -0,0 +1,88 @@ + + + + + + + OpenLayers UTFGrid Geography Class + + + + + +

OpenLayers UTFGrid Geography Class Example

+ +
+ This page demonstrates the use of the OpenLayers UTFGrid Controls. +
+
+
+
+

Point to a country and try to guess the name before it shows up:   +

+

+ See the utfgrid-geography-class.js source for + detail on using UTFGrids in OpenLayers. +

+
+ + + + diff --git a/examples/utfgrid-geography-class.js b/examples/utfgrid-geography-class.js new file mode 100644 index 0000000000..6dfcf9299d --- /dev/null +++ b/examples/utfgrid-geography-class.js @@ -0,0 +1,61 @@ +var osm = new OpenLayers.Layer.XYZ( + "MapQuest OSM", + [ + "http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png", + "http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png", + "http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png", + "http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png" + ] +); + +var utfgrid = new OpenLayers.Layer.UTFGrid({ + url: "utfgrid/geography-class/${z}/${x}/${y}.grid.json", + utfgridResolution: 4, // default is 2 + displayInLayerSwitcher: false +}); + +var map = new OpenLayers.Map({ + div: "map", + projection: "EPSG:900913", + numZoomLevels: 3, + layers: [osm, utfgrid], + controls: [ + new OpenLayers.Control.Navigation({ + dragPanOptions: { + enableKinetic: true + } + }), + new OpenLayers.Control.ZoomPanel() + ], + center: [0, 0], + zoom: 1 +}); + +var output = document.getElementById("output"); +var flag = document.getElementById("flag"); + +var callback = function(infoLookup, loc, pixel) { + var msg = ""; + if (infoLookup) { + var info; + for (var idx in infoLookup) { + // idx can be used to retrieve layer from map.layers[idx] + info = infoLookup[idx]; + if (info && info.data) { + output.innerHTML = info.data.admin; + flag.innerHTML = ""; + flag.style.left = (pixel.x + 15) + "px"; + flag.style.top = (pixel.y + 15) + "px"; + } else { + output.innerHTML = flag.innerHTML = " "; + } + } + } +}; + +var control = new OpenLayers.Control.UTFGrid({ + callback: callback, + handlerMode: "move" +}); + +map.addControl(control); diff --git a/examples/utfgrid.html b/examples/utfgrid.html index adedf6058e..4ed6ef0548 100644 --- a/examples/utfgrid.html +++ b/examples/utfgrid.html @@ -5,6 +5,7 @@ OpenLayers UTFGrid Demo +