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

Merge pull request #274 from tschaub/utfgrid

Browse Source 
UTFGrid Tile, Layer, and Control.  This adds support for responsive handling of interactions with large numbers of features represented by UTFGrids.
This commit is contained in:
Tim Schaub
2012-03-09 08:49:30 -08:00
parent 7cd5ad64fa 021ad521a8
commit 1a444589e0
74 changed files with 1815 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,51 @@
<!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;
}
</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>

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

@@ -0,0 +1,62 @@
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"
],
{transitionEffect: "resize", wrapDateLine: true}
);
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.Zoom()
],
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);

64
examples/utfgrid.html Normal file
View File

@@ -0,0 +1,64 @@
<!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 Demo</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style>
#attrs {
height: 1.5em;
}
#controlToggle li { list-style: none; }
</style>
</head>
<body>
<h1 id="title">OpenLayers UTFGrid Demo</h1>
<div>
<div id="shortdesc">
This page demonstrates the use of the OpenLayers UTFGrid Controls.
</div>
<div id="map" class="smallmap"></div>
<p>
When the selected event is triggered, the underlying feature
attributes are shown below.
</p>
<div id="attrs">&nbsp;</div>
<ul id="controlToggle">
<li>
<input type="radio" name="type" value="move" id="moveHandler"
onclick="toggleControl(this);" checked="checked" />
<label for="moveHandler">Move</label>
</li>
<li>
<input type="radio" name="type" value="hover" id="hoverHandler"
onclick="toggleControl(this);" />
<label for="hoverHandler">Hover</label>
</li>
<li>
<input type="radio" name="type" value="click" id="clickHandler"
onclick="toggleControl(this);" />
<label for="clickHandler">Click</label>
</li>
</ul>
</div>
<div id="docs">
<p>UTFGrids can be used to output highly optimized feature "hit grids."
The UTFGrid encoding scheme encodes interactivity data for a tile in a
space efficient manner. It is designed to be used in browsers for
interactive features like displaying tooltips without having to hit the
server for an "info query."
</p>
<p>
See the <a href="utfgrid.js" target="_blank">utfgrid.js source</a> for
detail on using UTFGrids in OpenLayers. For more info, view the
<a href="https://github.com/mapbox/utfgrid-spec">UTFGrid Specification</a>.
</p>
</div>
<script src="../lib/OpenLayers.js"></script>
<script src="utfgrid.js"></script>
</body>
</html>

61
examples/utfgrid.js Normal file
View File

@@ -0,0 +1,61 @@
var osm = new OpenLayers.Layer.OSM();
var utfgrid = new OpenLayers.Layer.UTFGrid({
url: "utfgrid/world_utfgrid/${z}/${x}/${y}.json",
utfgridResolution: 4, // default is 2
displayInLayerSwitcher: false
});
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"});

1
examples/utfgrid/bio_utfgrid/1/0/0.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/bio_utfgrid/1/0/1.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/bio_utfgrid/1/0/2.json Normal file
View File

@@ -0,0 +1 @@
{"keys": [""], "data": {}, "grid": [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]}

1
examples/utfgrid/bio_utfgrid/1/1/0.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/bio_utfgrid/1/1/1.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/bio_utfgrid/1/1/2.json Normal file
View File

@@ -0,0 +1 @@
{"keys": [""], "data": {}, "grid": [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]}

1
examples/utfgrid/bio_utfgrid/1/2/0.json Normal file
View File

@@ -0,0 +1 @@
{"keys": [""], "data": {}, "grid": [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]}

1
examples/utfgrid/bio_utfgrid/1/2/1.json Normal file
View File

@@ -0,0 +1 @@
{"keys": [""], "data": {}, "grid": [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]}

1
examples/utfgrid/bio_utfgrid/1/2/2.json Normal file
View File

@@ -0,0 +1 @@
{"keys": [""], "data": {}, "grid": [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]}

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

1
examples/utfgrid/world_utfgrid/1/0/0.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/world_utfgrid/1/0/1.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/world_utfgrid/1/0/2.json Normal file
View File

@@ -0,0 +1 @@
{"keys": [""], "data": {}, "grid": [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]}

1
examples/utfgrid/world_utfgrid/1/1/0.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/world_utfgrid/1/1/1.json Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/utfgrid/world_utfgrid/1/1/2.json Normal file
View File

@@ -0,0 +1 @@
{"keys": [""], "data": {}, "grid": [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]}

1
examples/utfgrid/world_utfgrid/1/2/0.json Normal file
View File

@@ -0,0 +1 @@
{"keys": [""], "data": {}, "grid": [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]}

1
examples/utfgrid/world_utfgrid/1/2/1.json Normal file
View File

@@ -0,0 +1 @@
{"keys": [""], "data": {}, "grid": [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]}

1
examples/utfgrid/world_utfgrid/1/2/2.json Normal file
View File

@@ -0,0 +1 @@
{"keys": [""], "data": {}, "grid": [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]}

51
examples/utfgrid_twogrids.html Normal file
View File

@@ -0,0 +1,51 @@
<!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 Multiple UTFGrid Demo</title>
<link rel="stylesheet" href="style.css" type="text/css">
<style>
#controlToggle li { list-style: none; }
</style>
</head>
<body>
<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.
</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">View population stats</label>
</li>
<li>
<input type="radio" name="type" value="move_bio" id="hoverHandler"
onclick="toggleControl(this);" />
<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">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>
</script>
</body>
</html>

70
examples/utfgrid_twogrids.js Normal file
View File

@@ -0,0 +1,70 @@
var osm = new OpenLayers.Layer.OSM();
var population = new OpenLayers.Layer.UTFGrid({
name: "World Population",
url: "utfgrid/world_utfgrid/${z}/${x}/${y}.json",
utfgridResolution: 4 // default is 2
});
var bioregions = new OpenLayers.Layer.UTFGrid({
name: "World Bioregions",
url: "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"});