39 lines
1.2 KiB
HTML
39 lines
1.2 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; 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>
|
|
</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>
|
|
</tr>
|
|
<tr>
|
|
<td><div id="domMap" class="map"></div></td>
|
|
<td><div id="webglMap" 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>
|
|
<div id="tags">layers, stamen, canvas</div>
|
|
<script src="loader.js?id=canvas-tiles" type="text/javascript"></script>
|
|
</body>
|
|
</html>
|