UTFGrid geography class example.

2012-03-04 01:57:46 -07:00
parent 32db586fba
commit c6aa996d2a
24 changed files with 171 additions and 0 deletions
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <title>OpenLayers UTFGrid Geography Class</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+    <link rel="stylesheet" href="style.css" type="text/css">
+    <style>
+        #flag {
+            position: relative;
+            z-index: 999;
+            height: 0px;
+            width: 0px;
+            -moz-transition: all 0.1s linear;
+            -webkit-transition: all 0.1s linear;
+        }
+        #flag img {
+            position: absolute;
+            width: 80px;
+            -moz-box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, 0.3);
+            -webkit-box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, 0.3);
+            box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, 0.3);
+        }
+        .olControlAttribution {
+            bottom: 5px;
+            font-size: 9px;
+        }
+        div.olControlZoomPanel {
+            top: 10px;
+            left: 10px;
+        }
+        div.olControlZoomPanel .olControlZoomInItemInactive,
+        div.olControlZoomPanel .olControlZoomOutItemInactive {
+            background: rgba(0, 0, 0, 0.2);
+            position: absolute;
+        }
+        div.olControlZoomPanel .olControlZoomInItemInactive {
+            border-radius: 3px 3px 0 0;
+        }
+        div.olControlZoomPanel .olControlZoomOutItemInactive {
+            border-radius: 0 0 3px 3px ;
+            top: 20px;
+        }
+        div.olControlZoomPanel div:hover {
+            background: rgba(0, 0, 0, 0.5);
+        }
+        div.olControlZoomPanel .olControlZoomOutItemInactive:after ,
+        div.olControlZoomPanel .olControlZoomInItemInactive:after {
+            font-weight: bold;
+            content: '+';
+            font-size: 18px;
+            padding: 0 2px;
+            z-index: 2000;
+            color: #fff;
+            line-height: 1em;
+        }
+        div.olControlZoomPanel .olControlZoomOutItemInactive:after {
+            content: '–';
+            line-height: 0.9em;
+            padding: 0 5px;
+        }
+        div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <h1 id="title">OpenLayers UTFGrid Geography Class Example</h1>
+
+    <div id="shortdesc">
+        This page demonstrates the use of the OpenLayers UTFGrid Controls. 
+    </div>
+    <div id="map" class="smallmap">
+        <div id="flag"></div>
+    </div>
+    <p>Point to a country and try to guess the name before it shows up: <strong id="output">&nbsp;</strong>
+    <div id="docs">
+        <p>
+        See the <a href="utfgrid-geography-class.js" target="_blank">utfgrid-geography-class.js</a> source for 
+        detail on using UTFGrids in OpenLayers.
+        </p>
+    </div>
+    <script src="../lib/OpenLayers.js"></script>
+    <script src="utfgrid-geography-class.js"></script>
+</body>
+</html>
@@ -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 = "<img src='data:image/png;base64," + info.data.flag_png + "'>";
+                flag.style.left = (pixel.x + 15) + "px";
+                flag.style.top = (pixel.y + 15) + "px";
+            } else {
+                output.innerHTML = flag.innerHTML = "&nbsp;";
+            }
+        }
+    }
+};
+    
+var control = new OpenLayers.Control.UTFGrid({
+    callback: callback,
+    handlerMode: "move"
+});
+
+map.addControl(control);
@@ -5,6 +5,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers UTFGrid Demo</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <style>
        #attrs {