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

Making the UTFGrid examples more like the rest.

Browse Source
This commit is contained in:
Tim Schaub
2012-02-25 16:18:43 -07:00
parent 34a9c46243
commit 6284e44d2e
2 changed files with 71 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/utfgrid.html
+38 -41
View File
@@ -1,23 +1,29 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<title> OpenLayers UTFGrid Demo </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src='./OpenLayers.js' type='text/javascript'></script> <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="style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
<style> <style>
#themap { width:512px; height:380px; border:1px black solid; }
#attrsdiv { width: 300px; height: 100px; float:right; border: 1px grey dashed;} #attrsdiv { width: 300px; height: 100px; float:right; border: 1px grey dashed;}
#controlToggle li { list-style: none; } #controlToggle li { list-style: none; }
</style> </style>
</head> </head>
<body> <body>
<h1> OpenLayers UTFGrid Demo </h1> <h1 id="title">OpenLayers UTFGrid Demo</h1>
<div id="top"> <div>
<div> <div id="shortdesc">
<p> This page demonstrates the use of the OpenLayers UTFGrid Controls.
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>
<div id="selector"> <div id="attrsdiv"></div>
<div id="themap" class="smallmap"></div>
<p>
When the selected event is triggered, the underlying feature attributes are shown on the right.
</p>
<ul id="controlToggle"> <ul id="controlToggle">
<li> <li>
<input type="radio" name="type" value="move" id="moveHandler" <input type="radio" name="type" value="move" id="moveHandler"
@@ -40,12 +46,8 @@
<label for="clickHandlerCustom">Click with custom callback</label> <label for="clickHandlerCustom">Click with custom callback</label>
</li> </li>
</ul> </ul>
</div>
</div> </div>
<div id="attrsdiv"></div> <div id="docs">
<div id="themap">
</div>
<div>
<p><a href="http://mapbox.com/mbtiles-spec/utfgrid/">UTFGrids</a> can be used to <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 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 interactivity data for a tile in a space efficient manner. It is designed to be
@@ -63,11 +65,9 @@
/* /*
* Map * Map
*/ */
var map = new OpenLayers.Map('themap', { var map = new OpenLayers.Map({
projection: new OpenLayers.Projection("EPSG:900913"), div: "themap",
units: "m", projection: "EPSG:900913",
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
controls: [] // No default controls; no pan zoom for demo controls: [] // No default controls; no pan zoom for demo
}); });
@@ -85,26 +85,26 @@
this.element.innerHTML = ''; this.element.innerHTML = '';
return false; return false;
} }
} };
controls = { var controls = {
'move': new OpenLayers.Control.UTFGrid({ move: new OpenLayers.Control.UTFGrid({
'div': 'attrsdiv', div: 'attrsdiv',
'handlerMode': 'move' handlerMode: 'move'
}), }),
'hover': new OpenLayers.Control.UTFGrid({ hover: new OpenLayers.Control.UTFGrid({
'div': 'attrsdiv', div: 'attrsdiv',
'handlerMode': 'hover' handlerMode: 'hover'
}), }),
'click': new OpenLayers.Control.UTFGrid({ click: new OpenLayers.Control.UTFGrid({
'div': 'attrsdiv', div: 'attrsdiv',
'handlerMode': 'click' handlerMode: 'click'
}), }),
'click_callback': new OpenLayers.Control.UTFGrid({ click_callback: new OpenLayers.Control.UTFGrid({
'handlerMode': 'click', handlerMode: 'click',
'callback': callback callback: callback
}), }),
} };
var control; var control;
for(var key in controls) { for(var key in controls) {
control = controls[key]; control = controls[key];
@@ -126,11 +126,8 @@
* Layers * Layers
*/ */
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", var osm = new OpenLayers.Layer.OSM();
"http://vmap0.tiles.osgeo.org/wms/vmap0", map.addLayer(osm);
{layers: 'basic'}
);
map.addLayer(ol_wms);
var grid_layer = new OpenLayers.Layer.UTFGrid( var grid_layer = new OpenLayers.Layer.UTFGrid(
'Invisible UTFGrid Layer', 'Invisible UTFGrid Layer',
examples/utfgrid_twogrids.html
+33 -40
View File
@@ -1,23 +1,26 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<title> OpenLayers Multiple UTFGrid Demo </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src='./OpenLayers.js' type='text/javascript'></script> <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">
<script src="../lib/OpenLayers.js"></script>
<style> <style>
#themap { width:512px; height:380px; border:1px black solid; }
#attrsdiv { width: 300px; height: 100px; float:right; border: 1px grey dashed;} #attrsdiv { width: 300px; height: 100px; float:right; border: 1px grey dashed;}
#controlToggle li { list-style: none; } #controlToggle li { list-style: none; }
</style> </style>
</head> </head>
<body> <body>
<h1> OpenLayers Multiple UTFGrid Demo </h1> <h1 id="title">OpenLayers Multiple UTFGrid Demo</h1>
<div id="top"> <div>
<div> <div id="shortdesc">
<p> This page demonstrates the use of the OpenLayers UTFGrid Controls with more than one UTFGrid Layer.
This page demostrates the use of the OpenLayers <a href="http://mapbox.com/mbtiles-spec/utfgrid/">UTFGrid</a> Controls with <em>more than one UTFGrid Layer</em>.
</p>
</div> </div>
<div id="selector"> <div id="attrsdiv"></div>
<div id="themap" class="smallmap"></div>
<ul id="controlToggle"> <ul id="controlToggle">
<li> <li>
<input type="radio" name="type" value="move_pop" id="moveHandler" <input type="radio" name="type" value="move_pop" id="moveHandler"
@@ -35,51 +38,44 @@
<label for="clickHandler">Move (both)</label> <label for="clickHandler">Move (both)</label>
</li> </li>
</ul> </ul>
</div>
</div> </div>
<div id="attrsdiv"></div>
<div id="themap"> </div>
<script> <script>
/* /*
* Map * Map
*/ */
var map = new OpenLayers.Map('themap', { var map = new OpenLayers.Map({
projection: new OpenLayers.Projection("EPSG:900913"), div: "themap",
units: "m", projection: "EPSG:900913",
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
controls: [] controls: []
}); });
var world_utfgrid = new OpenLayers.Layer.UTFGrid( var world_utfgrid = new OpenLayers.Layer.UTFGrid(
'Invisible UTFGrid Layer', 'Invisible UTFGrid Layer',
//"http://tiles/world_utfgrid/${z}/${x}/${y}.json"
"./utfgrid/world_utfgrid/${z}/${x}/${y}.json" "./utfgrid/world_utfgrid/${z}/${x}/${y}.json"
); );
var bio_utfgrid = new OpenLayers.Layer.UTFGrid( var bio_utfgrid = new OpenLayers.Layer.UTFGrid(
'Invisible UTFGrid Layer of World Bioregions', 'Invisible UTFGrid Layer of World Bioregions',
//"http://tiles/bailey_utfgrid/${z}/${x}/${y}.json"
"./utfgrid/bio_utfgrid/${z}/${x}/${y}.json" "./utfgrid/bio_utfgrid/${z}/${x}/${y}.json"
); );
map.addLayers([bio_utfgrid,world_utfgrid]); map.addLayers([bio_utfgrid,world_utfgrid]);
controls = { var controls = {
'move_pop': new OpenLayers.Control.UTFGrid({ move_pop: new OpenLayers.Control.UTFGrid({
'div': 'attrsdiv', div: 'attrsdiv',
'layers': [world_utfgrid], layers: [world_utfgrid],
'handlerMode': 'move' handlerMode: 'move'
}), }),
'move_bio': new OpenLayers.Control.UTFGrid({ move_bio: new OpenLayers.Control.UTFGrid({
'div': 'attrsdiv', div: 'attrsdiv',
'layers': [bio_utfgrid], layers: [bio_utfgrid],
'handlerMode': 'move' handlerMode: 'move'
}), }),
'move_both': new OpenLayers.Control.UTFGrid({ move_both: new OpenLayers.Control.UTFGrid({
'div': 'attrsdiv', div: 'attrsdiv',
'layers': null, // same as [bio_utfgrid,world_utfgrid] layers: null, // same as [bio_utfgrid,world_utfgrid]
'handlerMode': 'move' handlerMode: 'move'
}) })
} };
var control; var control;
for(var key in controls) { for(var key in controls) {
control = controls[key]; control = controls[key];
@@ -98,11 +94,8 @@
} }
// Visible Layers // Visible Layers
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", var osm = new OpenLayers.Layer.OSM();
"http://vmap0.tiles.osgeo.org/wms/vmap0", map.addLayer(osm);
{layers: 'basic'}
);
map.addLayer(ol_wms);
map.zoomTo(1); map.zoomTo(1);
</script> </script>
</body> </body>