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

Updated

Browse Source
This commit is contained in:
Éric Lemoine
2013-03-06 18:06:39 +01:00
parent bac0f304de
commit 849774dceb
153 changed files with 12810 additions and 1916 deletions
Download Patch File Download Diff File Expand all files Collapse all files
master/examples/canvas-tiles.html
+50 -31
View File
@@ -1,40 +1,59 @@
<!doctype html>
<html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
.map {
width: 400px;
height: 400px;
border: thin solid #cccccc;
margin: 1em;
}
</style>
<title>ol3 canvas tiles demo</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="examples.css" type="text/css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Canvas tiles example</title>
</head>
<body>
<h1 id="title">Canvas tiles example</h1>
<div id="shortdesc">The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not OSM tile coordinates (origin top left).</div>
<table>
<tr>
<th>DOM</th>
<th>WebGL</th>
<th>Canvas</th>
</tr>
<tr>
<td><div id="domMap" class="map"></div></td>
<td><div id="webglMap" class="map"></div></td>
<td><div id="canvasMap" class="map"></div></td>
</tr>
</table>
<div id="docs">
<p>See the
<a href="canvas-tiles.js" target="_blank">canvas-tiles.js source</a>
to see how this is done.</p>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
<ul class="nav pull-right">
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
</ul>
</div>
</div>
</div>
<div id="tags">layers, stamen, canvas</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<h4>Canvas</h4>
<div id="canvasMap" class="map"></div>
</div>
<div class="span4">
<h4>WebGL</h4>
<div id="webglMap" class="map"></div>
</div>
<div class="span4">
<h4>DOM</h4>
<div id="domMap" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<h4 id="title">Canvas tiles example</h4>
<p id="shortdesc">The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not OSM tile coordinates (origin top left).</p>
<div id="docs">
<p>See the <a href="canvas-tiles.js" target="_blank">canvas-tiles.js source</a> to see how this is done.</p>
</div>
<div id="tags">layers, openstreetmap, canvas</div>
</div>
</div>
<script src="loader.js?id=canvas-tiles" type="text/javascript"></script>
</body>
</html>