50bf2f015c
Applying the scale3d trick just to get rid of small pixel gap between rotated tiles. This will be reworked soon with additional use of transforms.
70 lines
2.3 KiB
HTML
70 lines
2.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
|
<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 side-by-side demo</title>
|
|
</head>
|
|
<body>
|
|
<h1>ol3 side-by-side demo</h1>
|
|
<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>
|
|
<tr>
|
|
<td><div id="domMousePosition" class="mouseposition"></div></td>
|
|
<td><div id="webglMousePosition" class="mouseposition"></div></td>
|
|
</tr>
|
|
</table>
|
|
<table>
|
|
<tr>
|
|
<td>Pan:</td>
|
|
<td>drag, arrow keys</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Zoom:</td>
|
|
<td>double-click, <code>Shift</code>+double-click, mouse wheel, <code>+</code>/<code>-</code> keys; <code>Shift</code>+drag</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Rotate:</td>
|
|
<td><code>Alt</code>+drag, <code>r</code> to reset</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Brightness/contrast:</td>
|
|
<td><code>b</code>/<code>B</code>/<code>c</code>/<code>C</code> keys (WebGL only)</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Hue/saturation:</td>
|
|
<td><code>h</code>/<code>H</code>/<code>s</code>/<code>S</code> keys (WebGL only)</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Opacity:</td>
|
|
<td><code>o</code>/<code>O</code> keys</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Visibility:</td>
|
|
<td><code>v</code>/<code>V</code> keys</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Reset</td>
|
|
<td><code>0</code> key</td>
|
|
</tr>
|
|
</table>
|
|
<p><b>Notes:</b> The two maps share the same center, resolution, rotation and layers.</p>
|
|
<script src="loader.js?id=side-by-side" type="text/javascript"></script>
|
|
</body>
|
|
</html>
|