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

Filled out the html example page

Browse Source
This commit is contained in:
Matthew Perry
2012-02-07 12:21:03 -08:00
parent 80656cdfd0
commit 0a74cb45f8
1 changed files with 35 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
examples/utfgrid.html
View File

@@ -3,15 +3,20 @@
<title> OpenLayers UTFGrid Demo </title>
<script src='./OpenLayers.js' type='text/javascript'></script>
<style>
.olTileImage { border: 1px solid #DDD !important; }
#themap { width:512px; height:380px; border:1px black solid; }
#debugdiv { float:right; }
#attrsdiv { width: 300px; height: 100px; float:right; border: 1px grey dashed;}
</style>
</head>
<body>
<h1> OpenLayers UTFGrid Demo </h1>
<div id="selector">
<div id="top">
<div>
<p>
This page demostrates the use of the OpenLayers <a href="http://mapbox.com/mbtiles-spec/utfgrid/">UTFGrid</a> Controls. When the selected event is triggered, the underlying feature attributes are shown on the right.
</p>
</div>
<div id="selector">
<ul id="controlToggle">
<li>
<input type="radio" name="type" value="move" id="moveHandler"
@@ -34,9 +39,25 @@
<label for="clickHandlerCustom">Click with custom callback</label>
</li>
</ul>
</div>
</div>
<div id="themap"></div>
<div id="attrsdiv"></div>
<div id="themap">
</div>
<div>
<p><a href="http://mapbox.com/mbtiles-spec/utfgrid/">UTFGrids</a> 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>
For more info, view the
<a href="https://github.com/mapbox/utfgrid-spec"> UTFGrid Specification</a>
or check out the <a href="http://mapbox.com/demo/visiblemap/">Visible Map Demo</a>
(implemented in Wax and ModestMaps).
</p>
</div>
<script>
/*
* Map
@@ -53,9 +74,16 @@
* Controls
*/
var callback = function(attributes) {
var msg = "<strong>In 2005, " + attributes.NAME + " had a population of " + attributes.POP2005 + " people.</strong>";
var element = OpenLayers.Util.getElement('attrsdiv');
element.innerHTML = msg;
if (attributes) {
var msg = "<strong>In 2005, " + attributes.NAME
msg += " had a population of " + attributes.POP2005 + " people.</strong>";
var element = OpenLayers.Util.getElement('attrsdiv');
element.innerHTML = msg;
return true;
} else {
this.element.innerHTML = '';
return false;
}
}
controls = {
@@ -105,7 +133,6 @@
var grid_layer = new OpenLayers.Layer.UTFGrid(
'Invisible UTFGrid Layer',
//"http://tiles/world_utfgrid/${z}/${x}/${y}.json"
"./utfgrid/${z}/${x}/${y}.json"
);
map.addLayer(grid_layer);