Separating UTFGrid example markup and js source.

examples/utfgrid.html

@@ -6,7 +6,6 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <title>OpenLayers UTFGrid Demo</title>
     <link rel="stylesheet" href="style.css" type="text/css">
-    <script src="../lib/OpenLayers.js"></script>
     <style>
         #attrs {
             height: 1.5em;
@@ -21,9 +20,10 @@
         <div id="shortdesc">
             This page demonstrates the use of the OpenLayers UTFGrid Controls. 
         </div>
-        <div id="themap" class="smallmap"></div>
+        <div id="map" class="smallmap"></div>
         <p>
-            When the selected event is triggered, the underlying feature attributes are shown below.
+            When the selected event is triggered, the underlying feature 
+            attributes are shown below.
         </p>
         <div id="attrs">&nbsp;</div>
         <ul id="controlToggle">
@@ -45,95 +45,19 @@
         </ul>
     </div>
     <div id="docs">
-        <p><a href="http://mapbox.com/mbtiles-spec/utfgrid/">UTFGrids</a> can be used to 
+        <p>UTFGrids can be used to output highly optimized feature "hit grids."
-        output highly optimized feature "hit grids". The UTFGrid encoding scheme encodes 
+        The UTFGrid encoding scheme encodes interactivity data for a tile in a
-        interactivity data for a tile in a space efficient manner. It is designed to be 
+        space efficient manner. It is designed to be used in browsers for
-        used in browsers for interactive features like displaying tooltips without 
+        interactive features like displaying tooltips without having to hit the
-        having to hit the server for an "info query".
+        server for an "info query."
         </p>
         <p>
-        For more info, view the 
+        See the <a href="utfgrid.js" target="_blank">utfgrid.js source</a> for 
-        <a href="https://github.com/mapbox/utfgrid-spec"> UTFGrid Specification</a> 
+        detail on using UTFGrids in OpenLayers.  For more info, view the 
-        or check out the <a href="http://mapbox.com/demo/visiblemap/">Visible Map Demo</a> 
+        <a href="https://github.com/mapbox/utfgrid-spec">UTFGrid Specification</a>.
-        (implemented in Wax and ModestMaps).  
         </p>
     </div>
-    <script>
+    <script src="../lib/OpenLayers.js"></script>
-        /*
+    <script src="utfgrid.js"></script>
-         * Map
-         */
-        var map = new OpenLayers.Map({
-            div: "themap", 
-            projection: "EPSG:900913",
-            controls: [] // No default controls; no pan zoom for demo
-        });
-
-        /*
-         * Controls
-         */
-        var callback = function(infoLookup) {
-            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) {
-                        msg += "[" + info.id + "] <strong>In 2005, " + 
-                            info.data.NAME + " had a population of " +
-                            info.data.POP2005 + " people.</strong> ";
-                    }
-                }
-            }
-            document.getElementById("attrs").innerHTML = msg;
-        };
-            
-        var controls = {
-            move: new OpenLayers.Control.UTFGrid({
-                callback: callback,
-                handlerMode: 'move'
-            }),
-            hover: new OpenLayers.Control.UTFGrid({
-                callback: callback,
-                handlerMode: 'hover'
-            }),
-            click: new OpenLayers.Control.UTFGrid({
-                callback: callback,
-                handlerMode: 'click'
-            })
-        };
-        var control;
-        for(var key in controls) {
-            control = controls[key];
-            control.deactivate();
-            map.addControl(control);
-        }
-        controls['move'].activate();
-
-        function toggleControl(el) {
-            for(var c in controls) {
-                control = controls[c];
-                control.deactivate();
-            }
-            control = controls[el.value];
-            control.activate();
-        }
-
-        /*
-         * Layers
-         */
-
-        var osm = new OpenLayers.Layer.OSM();
-        map.addLayer(osm);
-
-        var grid_layer = new OpenLayers.Layer.UTFGrid( 
-            'Invisible UTFGrid Layer', 
-            "./utfgrid/world_utfgrid/${z}/${x}/${y}.json",
-            {utfgridResolution: 4} // default is 2
-        );
-        map.addLayer(grid_layer);
-
-        map.zoomTo(1);
-    </script>
 </body>
 </html>

examples/utfgrid.js

@@ -0,0 +1,61 @@
+var osm = new OpenLayers.Layer.OSM();
+
+var utfgrid = new OpenLayers.Layer.UTFGrid( 
+    "Invisible UTFGrid Layer", 
+    "./utfgrid/world_utfgrid/${z}/${x}/${y}.json",
+    {utfgridResolution: 4} // default is 2
+);
+
+var map = new OpenLayers.Map({
+    div: "map", 
+    projection: "EPSG:900913",
+    controls: [],
+    layers: [osm, utfgrid],
+    center: [0, 0],
+    zoom: 1
+});
+
+var callback = function(infoLookup) {
+    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) {
+                msg += "[" + info.id + "] <strong>In 2005, " + 
+                    info.data.NAME + " had a population of " +
+                    info.data.POP2005 + " people.</strong> ";
+            }
+        }
+    }
+    document.getElementById("attrs").innerHTML = msg;
+};
+    
+var controls = {
+    move: new OpenLayers.Control.UTFGrid({
+        callback: callback,
+        handlerMode: "move"
+    }),
+    hover: new OpenLayers.Control.UTFGrid({
+        callback: callback,
+        handlerMode: "hover"
+    }),
+    click: new OpenLayers.Control.UTFGrid({
+        callback: callback,
+        handlerMode: "click"
+    })
+};
+for (var key in controls) {
+    map.addControl(controls[key]);
+}
+
+function toggleControl(el) {
+    for (var c in controls) {
+        controls[c].deactivate();
+    }
+    controls[el.value].activate();
+}
+
+// activate the control that responds to mousemove
+toggleControl({value: "move"});

examples/utfgrid_twogrids.html

@@ -6,7 +6,6 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <title>OpenLayers Multiple UTFGrid Demo</title>
     <link rel="stylesheet" href="style.css" type="text/css">
-    <script src="../lib/OpenLayers.js"></script>
     <style>
         #controlToggle li { list-style: none; }
     </style>
@@ -15,105 +14,38 @@
     <h1 id="title">OpenLayers Multiple UTFGrid Demo</h1>
 
     <div id="shortdesc">
-        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.
     </div>
-    <div id="themap" class="smallmap"></div>
+    <div id="map" class="smallmap"></div>
     <ul id="controlToggle">
         <li>
             <input type="radio" name="type" value="move_pop" id="moveHandler" 
             onclick="toggleControl(this);" checked="checked" />
-            <label for="moveHandler">Move (population)</label>
+            <label for="moveHandler">View population stats</label>
         </li>
         <li>
             <input type="radio" name="type" value="move_bio" id="hoverHandler" 
             onclick="toggleControl(this);" />
-            <label for="hoverHandler">Move (bioregion)</label>
+            <label for="hoverHandler">View bioregion stats</label>
         </li>
         <li>
             <input type="radio" name="type" value="move_both" id="clickHandler" 
             onclick="toggleControl(this);" />
-            <label for="clickHandler">Move (both)</label>
+            <label for="clickHandler">View all stats</label>
         </li>
     </ul>
+    <div id="docs">
+        <p>
+            This example demonstrates the use of two separate UTFGrid layers.
+            See the <a href="utfgrid_twogrids.js">utfgrid_twogrids.js source</a>
+            for detail on how this is done.
+        </p>
+    </div>
     <div id="attrsdiv"></div>
+    <script src="../lib/OpenLayers.js"></script>
+    <script src="utfgrid_twogrids.js"></script>
     <script>
-        /*
-         * Map
-         */
-        var map = new OpenLayers.Map({
-            div: "themap",
-            projection: "EPSG:900913",
-            controls: []
-        });
-
-        var world_utfgrid = new OpenLayers.Layer.UTFGrid( 
-            "World Population",
-            "./utfgrid/world_utfgrid/${z}/${x}/${y}.json",
-            {utfgridResolution: 4} // default is 2
-        );
-        var bio_utfgrid = new OpenLayers.Layer.UTFGrid( 
-            "World Bioregions",
-            "./utfgrid/bio_utfgrid/${z}/${x}/${y}.json",
-            {utfgridResolution: 4} // default is 2
-        );
-        map.addLayers([bio_utfgrid,world_utfgrid]);
-
-        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: [world_utfgrid],
-                handlerMode: 'move'
-            }),
-            move_bio: new OpenLayers.Control.UTFGrid({
-                callback: callback,
-                layers: [bio_utfgrid],
-                handlerMode: 'move'
-            }),
-            move_both: new OpenLayers.Control.UTFGrid({
-                callback: callback,
-                layers: null, // same as [bio_utfgrid,world_utfgrid]
-                handlerMode: 'move'
-            })
-        };
-        var control;
-        for(var key in controls) {
-            control = controls[key];
-            control.deactivate();
-            map.addControl(control);
-        }
-        controls['move_pop'].activate();
-
-        function toggleControl(el) {
-            for(var c in controls) {
-                control = controls[c];
-                control.deactivate();
-            }
-            control = controls[el.value];
-            control.activate();
-        }
-
-        // Visible Layers
-        var osm = new OpenLayers.Layer.OSM();
-        map.addLayer(osm);
-        map.zoomTo(1);
     </script>
 </body>
 </html>

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"});