Adding multi grid html

2012-02-08 12:04:09 -08:00
parent 5d00c76c92
commit 5857af5fec
1 changed files with 109 additions and 0 deletions
--- a/examples/utfgrid_twogrids.html
+++ b/examples/utfgrid_twogrids.html
@@ -0,0 +1,109 @@
+<html>
+<head>
+    <title> OpenLayers Multiple UTFGrid Demo </title>
+    <script src='./OpenLayers.js' type='text/javascript'></script>
+    <style>
+        #themap { width:512px; height:380px; border:1px black solid; }
+        #attrsdiv { width: 300px; height: 100px; float:right; border: 1px grey dashed;}
+        #controlToggle li { list-style: none; }
+    </style>
+</head>
+<body>
+    <h1> OpenLayers Multiple UTFGrid Demo </h1>
+
+    <div id="top">
+        <div>
+            <p> 
+            This page demostrates the use of the OpenLayers <a href="http://mapbox.com/mbtiles-spec/utfgrid/">UTFGrid</a> Controls with <em>more than one UTFGrid Layer</em>.
+            </p>
+        </div>
+        <div id="selector">
+        <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>
+            </li>
+            <li>
+                <input type="radio" name="type" value="move_bio" id="hoverHandler" 
+                onclick="toggleControl(this);" />
+                <label for="hoverHandler">Move (bioregion)</label>
+            </li>
+            <li>
+                <input type="radio" name="type" value="move_both" id="clickHandler" 
+                onclick="toggleControl(this);" />
+                <label for="clickHandler">Move (both)</label>
+            </li>
+        </ul>
+        </div>
+    </div>
+    <div id="attrsdiv"></div>
+    <div id="themap"> </div>
+    <script>
+        /*
+         * 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),
+            controls: []
+        });
+
+        var world_utfgrid = new OpenLayers.Layer.UTFGrid( 
+            'Invisible UTFGrid Layer', 
+            //"http://tiles/world_utfgrid/${z}/${x}/${y}.json"
+            "./utfgrid/world_utfgrid/${z}/${x}/${y}.json"
+        );
+        var bio_utfgrid = new OpenLayers.Layer.UTFGrid( 
+            'Invisible UTFGrid Layer of World Bioregions', 
+            //"http://tiles/bailey_utfgrid/${z}/${x}/${y}.json"
+            "./utfgrid/bio_utfgrid/${z}/${x}/${y}.json"
+        );
+        map.addLayers([bio_utfgrid,world_utfgrid]);
+
+        controls = {
+            'move_pop': new OpenLayers.Control.UTFGrid({
+                'div': 'attrsdiv',
+                'layers': [world_utfgrid],
+                'handlerMode': 'move'
+            }),
+            'move_bio': new OpenLayers.Control.UTFGrid({
+                'div': 'attrsdiv',
+                'layers': [bio_utfgrid],
+                'handlerMode': 'move'
+            }),
+            'move_both': new OpenLayers.Control.UTFGrid({
+                'div': 'attrsdiv',
+                '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 ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+            "http://vmap0.tiles.osgeo.org/wms/vmap0",
+            {layers: 'basic'}  
+        );
+        map.addLayer(ol_wms);
+        map.zoomTo(1);
+    </script>
+</body>
+</html>