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
examples/full-screen.html
+19 -4
View File
@@ -12,15 +12,30 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#shortdesc { #text {
display: none; position: absolute;
bottom: 1em;
left: 1em;
width: 512px;
z-index: 20000;
background-color: white;
padding: 0 0.5em 0.5em 0.5em;
} }
</style> </style>
<title>Full-screen example</title> <title>Full-screen example</title>
</head> </head>
<body> <body>
<div id="map"></div> <div id="map">
<div id="shortdesc">Example of a full-screen map.</div> <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> <div id="tags">fullscreen, mapquest, openaerial, tile, tilelayer</div>
<script src="loader.js?id=full-screen" type="text/javascript"></script> <script src="loader.js?id=full-screen" type="text/javascript"></script>
</body> </body>
examples/overlay-and-popup.html
+18 -5
View File
@@ -12,8 +12,14 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#shortdesc { #text {
display: none; position: absolute;
bottom: 1em;
left: 1em;
width: 512px;
z-index: 20000;
background-color: white;
padding: 0 0.5em 0.5em 0.5em;
} }
.overlay { .overlay {
display: none; display: none;
@@ -37,7 +43,6 @@
padding: 5px; padding: 5px;
} }
/* Popup CSS generated with http://cssarrowplease.com/ */ /* Popup CSS generated with http://cssarrowplease.com/ */
.arrow_box { .arrow_box {
@@ -73,14 +78,22 @@
<title>Overlay example</title> <title>Overlay example</title>
</head> </head>
<body> <body>
<div id="shortdesc">Demonstrates Overlays.</div>
<div id="tags">overlay, popup, mapquest, openaerial</div>
<div id="map"> <div id="map">
<!-- Clickable label for Vienna --> <!-- Clickable label for Vienna -->
<a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a> <a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
<!-- Popup --> <!-- Popup -->
<div class="overlay arrow_box" id="popup"></div> <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>
<div id="tags">overlay, popup, mapquest, openaerial</div>
<script src="loader.js?id=overlay-and-popup" type="text/javascript"></script> <script src="loader.js?id=overlay-and-popup" type="text/javascript"></script>
</body> </body>
</html> </html>
examples/side-by-side.html
+7 -2
View File
@@ -15,9 +15,8 @@
<title>Side-by-side example</title> <title>Side-by-side example</title>
</head> </head>
<body> <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="shortdesc">Side-by-side DOM and WebGL sync'ed maps.</div>
<div id="tags">side-by-side, webgl, dom, sync, object</div>
<table> <table>
<tr> <tr>
<th>DOM</th> <th>DOM</th>
@@ -67,6 +66,12 @@
</tr> </tr>
</table> </table>
<p><b>Notes:</b> The two maps share the same center, resolution, rotation and layers.</p> <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> <script src="loader.js?id=side-by-side" type="text/javascript"></script>
</body> </body>
</html> </html>
examples/two-layers.html
+7 -2
View File
@@ -15,9 +15,8 @@
<title>ol3 two-layers demo</title> <title>ol3 two-layers demo</title>
</head> </head>
<body> <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="shortdesc">Sync'ed DOM and WebGL maps with two layers.</div>
<div id="tags">layers, tilejson, bing, bingmaps</div>
<table> <table>
<tr> <tr>
<th>DOM</th> <th>DOM</th>
@@ -28,6 +27,12 @@
<td><div id="webglMap" class="map"></div></td> <td><div id="webglMap" class="map"></div></td>
</tr> </tr>
</table> </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> <script src="loader.js?id=two-layers" type="text/javascript"></script>
</body> </body>
</html> </html>