ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

UTFGrid geography class example.

Browse Source
This commit is contained in:
Tim Schaub
2012-03-04 01:57:46 -07:00
parent 32db586fba
commit c6aa996d2a
24 changed files with 171 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
examples/utfgrid-geography-class.html Normal file
View File

@@ -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>

61
examples/utfgrid-geography-class.js Normal file
View File

@@ -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);

1
examples/utfgrid.html
View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <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"> <meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers UTFGrid Demo</title> <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"> <link rel="stylesheet" href="style.css" type="text/css">
<style> <style>
#attrs { #attrs {

1
examples/utfgrid/geography-class/0/0/0.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/1/0/0.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/1/0/1.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/1/1/0.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/1/1/1.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/2/0/0.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/2/0/1.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/2/0/2.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/2/0/3.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/2/1/0.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/2/1/1.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/2/1/2.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/2/1/3.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/2/2/0.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/2/2/1.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/2/2/2.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/2/2/3.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/2/3/0.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/2/3/1.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/2/3/2.grid.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/geography-class/2/3/3.grid.json Normal file
View File

File diff suppressed because one or more lines are too long