Separating UTFGrid example markup and js source.

examples/utfgrid_twogrids.js

@@ -0,0 +1,70 @@
+var osm = new OpenLayers.Layer.OSM();
+
+var population = new OpenLayers.Layer.UTFGrid( 
+    "World Population",
+    "./utfgrid/world_utfgrid/${z}/${x}/${y}.json",
+    {utfgridResolution: 4} // default is 2
+);
+var bioregions = new OpenLayers.Layer.UTFGrid( 
+    "World Bioregions",
+    "./utfgrid/bio_utfgrid/${z}/${x}/${y}.json",
+    {utfgridResolution: 4} // default is 2
+);
+
+var map = new OpenLayers.Map({
+    div: "map",
+    projection: "EPSG:900913",
+    controls: [],
+    layers: [osm, population, bioregions],
+    center: [0, 0],
+    zoom: 1
+});
+
+var callback = function(infoLookup) {
+    var msg = "";
+    if (infoLookup) {
+        var layer, info;
+        for (var idx in infoLookup) {
+            layer = map.layers[idx];
+            info = infoLookup[idx];
+            if (info && info.data) {
+                msg += "<strong>" + layer.name + "</strong><br>";
+                msg += "feature id: " + info.id + "<br>";
+                for (var key in info.data) {
+                    msg += key + ": " + info.data[key] + "<br>";
+                }
+            }
+        }
+    }
+    document.getElementById("attrsdiv").innerHTML = msg;
+};
+
+var controls = {
+    move_pop: new OpenLayers.Control.UTFGrid({
+        callback: callback,
+        layers: [population],
+        handlerMode: "move"
+    }),
+    move_bio: new OpenLayers.Control.UTFGrid({
+        callback: callback,
+        layers: [bioregions],
+        handlerMode: "move"
+    }),
+    move_both: new OpenLayers.Control.UTFGrid({
+        callback: callback,
+        layers: null, // same as all map.layers
+        handlerMode: "move"
+    })
+};
+
+for (var key in controls) {
+    map.addControl(controls[key]);
+}
+
+function toggleControl(el) {
+    for (var c in controls) {
+        controls[c].deactivate();
+    }
+    controls[el.value].activate();
+}
+toggleControl({value: "move_pop"});