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

Better HTML and CSS for the examples

Browse Source 
And give the h1 tags a "title" id. The exampleparser.py script uses that as the example title in the index page.
This commit is contained in:
Éric Lemoine
2012-10-20 21:43:34 +02:00
parent b000c052e3
commit 1e0b43dd00
4 changed files with 51 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
examples/full-screen.html
View File

@@ -12,15 +12,30 @@
width: 100%;
height: 100%;
}
#shortdesc {
display: none;
#text {
position: absolute;
bottom: 1em;
left: 1em;
width: 512px;
z-index: 20000;
background-color: white;
padding: 0 0.5em 0.5em 0.5em;
}
</style>
<title>Full-screen example</title>
</head>
<body>
<div id="map"></div>
<div id="shortdesc">Example of a full-screen map.</div>
<div id="map">
<div id="text">
<h1 id="title">Full-screen example</h1>
<div id="shortdesc">Example of a full-screen map.</div>
<div id="docs">
<p>See the
<a href="full-screen.js" target="_blank">full-screen.js source</a>
to see how this is done.</p>
</div>
</div>
</div>
<div id="tags">fullscreen, mapquest, openaerial, tile, tilelayer</div>
<script src="loader.js?id=full-screen" type="text/javascript"></script>
</body>

23
examples/overlay-and-popup.html
View File

@@ -12,8 +12,14 @@
width: 100%;
height: 100%;
}
#shortdesc {
display: none;
#text {
position: absolute;
bottom: 1em;
left: 1em;
width: 512px;
z-index: 20000;
background-color: white;
padding: 0 0.5em 0.5em 0.5em;
}
.overlay {
display: none;
@@ -37,7 +43,6 @@
padding: 5px;
}
/* Popup CSS generated with http://cssarrowplease.com/ */
.arrow_box {
@@ -73,14 +78,22 @@
<title>Overlay example</title>
</head>
<body>
<div id="shortdesc">Demonstrates Overlays.</div>
<div id="tags">overlay, popup, mapquest, openaerial</div>
<div id="map">
<!-- Clickable label for Vienna -->
<a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
<!-- Popup -->
<div class="overlay arrow_box" id="popup"></div>
<div id="text">
<h1 id="title">Overlay example</h1>
<div id="shortdesc">Demonstrates Overlays.</div>
<div id="docs">
<p>See the
<a href="overlay-and-popup.js" target="_blank">overlay-and-popup.js source</a>
to see how this is done.</p>
</div>
</div>
</div>
<div id="tags">overlay, popup, mapquest, openaerial</div>
<script src="loader.js?id=overlay-and-popup" type="text/javascript"></script>
</body>
</html>

9
examples/side-by-side.html
View File

@@ -15,9 +15,8 @@
<title>Side-by-side example</title>
</head>
<body>
<h1>ol3 side-by-side demo</h1>
<h1 id="title">Side-by-side example</h1>
<div id="shortdesc">Side-by-side DOM and WebGL sync'ed maps.</div>
<div id="tags">side-by-side, webgl, dom, sync, object</div>
<table>
<tr>
<th>DOM</th>
@@ -67,6 +66,12 @@
</tr>
</table>
<p><b>Notes:</b> The two maps share the same center, resolution, rotation and layers.</p>
<div id="docs">
<p>See the
<a href="side-by-side.js" target="_blank">side-by-side.js source</a> to
see how this is done.</p>
</div>
<div id="tags">side-by-side, webgl, dom, sync, object</div>
<script src="loader.js?id=side-by-side" type="text/javascript"></script>
</body>
</html>

9
examples/two-layers.html
View File

@@ -15,9 +15,8 @@
<title>ol3 two-layers demo</title>
</head>
<body>
<h1>Two-layer example</h1>
<h1 id="title">Two-layer example</h1>
<div id="shortdesc">Sync'ed DOM and WebGL maps with two layers.</div>
<div id="tags">layers, tilejson, bing, bingmaps</div>
<table>
<tr>
<th>DOM</th>
@@ -28,6 +27,12 @@
<td><div id="webglMap" class="map"></div></td>
</tr>
</table>
<div id="docs">
<p>See the
<a href="two-layers.js" target="_blank">two-layers.js source</a>
to see how this is done.</p>
</div>
<div id="tags">layers, tilejson, bing, bingmaps</div>
<script src="loader.js?id=two-layers" type="text/javascript"></script>
</body>
</html>