Skip to content

Commit

Permalink
UTFGrid geography class example.
Browse files Browse the repository at this point in the history
  • Loading branch information
@tschaub
tschaub committed Mar 4, 2012
1 parent 32db586 commit c6aa996
Show file tree
Hide file tree
Showing 24 changed files with 171 additions and 0 deletions.
88 changes: 88 additions & 0 deletions examples/utfgrid-geography-class.html
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 61 additions & 0 deletions examples/utfgrid-geography-class.js
View file
Original file line number Diff line number Diff line change
@@ -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 change: 1 addition & 0 deletions examples/utfgrid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions examples/utfgrid/geography-class/0/0/0.grid.json
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions examples/utfgrid/geography-class/1/0/0.grid.json
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions examples/utfgrid/geography-class/1/0/1.grid.json
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions examples/utfgrid/geography-class/1/1/0.grid.json
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions examples/utfgrid/geography-class/1/1/1.grid.json
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions examples/utfgrid/geography-class/2/0/0.grid.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"grid":[" "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," !"," "," !! "," !! "," !!!!"," !!!!"," !!!!"," ! !!!!!"," ! !!!!"," !!!!"," !! !"," !! !!"," !!! !!!"," !! !!!!!! !!"," !!! !!!! !! !!"," !!! ! !! "," !!! ! !! !! "," ! !! ! ! !"," !!! "," !!!! ! ! !!! "," !!! ! ! ! !! !!!!"," !!!!!!!! !! !!!!! !!"," ! !!!!! !!! !!!! !"," !!!!!!!! ! !!!!! !"," !!!!!!!! ! !! !! !"," !!! ! !"," !!! "," !!!!!! ! !!!"," !!!!!! !! !!! !!!!"," !!!!!!!! !!! !!!!!! "," !!!!!!!! ! !!!! !!!!!!!! "," !!!!!!!!!!!! !! !!!! ! "," !!!! !!!!!!!!!! !!!! ","## !!! !!!!!!!!!! ! !! ","## $$$ !!!!!!!!!! !! "," $$$$$$$ ! !! !!!!!!! !!! "," $$$$$$$$$$$$ $ ! ! ! !!!!!!!!!!!! !!! "," $$$$$$$$$$$$$$$$!! !!!!!! !! !!!!!!!!!!!! !!!!!!"," $$$$$$$$$$$$$$$$!!! !!!!!!!!!!!!! !!!!! !!! !!! !!!","## $$$$$$$$$$$$$$$$$$!!!!!!!!!!!!!!!!!!! !!!!!! ! !!","### $$$$$$$$$$$$$$$$$$!!!!!!!!!!!!!!!!!!! ! !!! !!!!!!","#### $$$$$$$$$$$$$$$$!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!","###### $$$$$$$$$$$$$$$$!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"],"keys":["","40","185","228"],"data":{"40":{"admin":"Canada","flag_png":"iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyEAIAAAB1xzWqAAAACXBIWXMAAABIAAAASABGyWs+AAAABmJLR0T///////8JWPfcAAAC6klEQVR42u2dMU4rMRBAU3AIGmqOgESNBC0VN0A5AhWIkhtwCQoqOiQKRMEFqLmIKZ4i+ct/FxPbG2/2NaPIduzx+sUej2edVQirw9VhT/Lo/ug+hO+777sQwmf4VA5LnhJPrK9xXAmWYAmWUrAES7AES7AEa1fy4f3hfSMFS7AqyK+zr7MQjtfH643sRzfBmjFYN5c3l/9qSIpgCVbRXJUOGynkCpZg/VmuX9evw3qSK1iC9R/5+Pb4tjHJ4xY/Dj4OfhswcikZDzO1UbNgLRos2j19Pn3eYHF+cn6Spy3fwuriM+mCtWiwXq5frtv0gpoFa6FgtRiYKV0SgtW18Z6/8OVIatN4F6xwdXF1UU9/ahOsRYCFST7keSK3lv5Dxz7xnlGwugaLMuMlYycnc0lavq4Jn5rttMgSmeNczemXYDUEi18/xjLQkMLQMnjpbJQ6Noc87NtpHkNDL9KlNp5B8YSRQkl6lDO3CVYTsMZnmvHHHeNFW7EXajtJDePnjPka5jgsBKvhUsjvu9weKgeLxS62pVo7LASrofFevqcDqVrDU15b/r5SsBqCVXdP14PM3zkKVkOwcg6M5yXjg23B2hlYGLn7ARa9yD9nFKzKYJHLzm6f5qr4CdC7nOcgWJXBqnsU05sccucK1kTuhnFf0RxlzlwlWBOdFRJYN99lEc3/Gh4oWBMdQmP2lrhMp5dou11goGBNGt3AGVzdKKsWEg1L3vYRrB2EzcQ7x/laUYI1g3isHvqVvhEkWLOPIH26fbrdxTDQIq0bQbq3ocnTe7/aRcELVhdglYfZ9PbejmB1AVYaGEhbDDzzCvMZTle8SnyLXCSLGrmU5FsEzFBbOtgt3jQUrC7AImogxoWU/DDo/HBhnAi0Qov5MQuCtaCL15iZ+rnASLAES7AE67crjXq4ukiwBEuwBCvP+yVYgtXk4pAp72UQrEWAhY9KsARLsARLG0uwFgtWn3/BIlj+l45gCZZglcsfHBPAdZqOceQAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTEtMDktMDJUMjM6Mjk6MjEtMDQ6MDBxBsFaAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDExLTAyLTI4VDE5OjMwOjUyLTA1OjAwchcLNwAAAFJ0RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hai9Db2RlL3RtLW1hc3Rlci9leGFtcGxlcy9nZW9ncmFwaHktY2xhc3MvZmxhZ3MvQ0FOLnN2Z/LyUl0AAAAASUVORK5CYII="},"185":{"admin":"Russia","flag_png":"iVBORw0KGgoAAAANSUhEUgAAAGQAAABDEAIAAAC1uevOAAAACXBIWXMAAABIAAAASABGyWs+AAAABmJLR0T///////8JWPfcAAAA20lEQVR42u3bwQmDMBSA4bziEi7iMO7XYVykbmFs01MPgg0RBb/vKJKExw96SeQiQVMPI0BYCAthgbAQFsICYSEshAXCQlgIC4SFsBAWCAthISwQFhfVnbt9nvP8+yT66I9fZ//73zfrTrVn939XrjvPcfPZEuM0Tm7p0FqUPoWFfyyEhbBAWAgLYYGwEBbCAmEhLIQFwkJYCAuEhbAQFggLYXET71s6KT0Hg6BxWMvrc2fMIPApRFgIC4SFsBAWCAthISwQFsJCWCAshIWwQFgIC2GBsBAWwoJqK8XrMLz36KVyAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDExLTA5LTAyVDIzOjI5OjIwLTA0OjAw13HK7gAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxMS0wMi0yOFQyMjozNTo0Ny0wNTowMJEEdTIAAABSdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWovQ29kZS90bS1tYXN0ZXIvZXhhbXBsZXMvZ2VvZ3JhcGh5LWNsYXNzL2ZsYWdzL1JVUy5zdmczbNaZAAAAAElFTkSuQmCC"},"228":{"admin":"United States of America","flag_png":"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"}}}
Loading

0 comments on commit c6aa996

Please sign in to comment.