From 1e0b43dd00ef406df738e16af9a16ed7f5bca012 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Sat, 20 Oct 2012 21:43:34 +0200 Subject: [PATCH] Better HTML and CSS for the examples And give the h1 tags a "title" id. The exampleparser.py script uses that as the example title in the index page. --- examples/full-screen.html | 23 +++++++++++++++++++---- examples/overlay-and-popup.html | 23 ++++++++++++++++++----- examples/side-by-side.html | 9 +++++++-- examples/two-layers.html | 9 +++++++-- 4 files changed, 51 insertions(+), 13 deletions(-) diff --git a/examples/full-screen.html b/examples/full-screen.html index 3d12115d72..2e96597349 100644 --- a/examples/full-screen.html +++ b/examples/full-screen.html @@ -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; } Full-screen example -
-
Example of a full-screen map.
+
+
+

Full-screen example

+
Example of a full-screen map.
+
+

See the + full-screen.js source + to see how this is done.

+
+
+
fullscreen, mapquest, openaerial, tile, tilelayer
diff --git a/examples/overlay-and-popup.html b/examples/overlay-and-popup.html index cedcbb5ed7..fa7968f378 100644 --- a/examples/overlay-and-popup.html +++ b/examples/overlay-and-popup.html @@ -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 @@ Overlay example -
Demonstrates Overlays.
-
overlay, popup, mapquest, openaerial
Vienna +
+

Overlay example

+
Demonstrates Overlays.
+
+

See the + overlay-and-popup.js source + to see how this is done.

+
+
+
overlay, popup, mapquest, openaerial
diff --git a/examples/side-by-side.html b/examples/side-by-side.html index 578a9d7ca0..2983cd69a8 100644 --- a/examples/side-by-side.html +++ b/examples/side-by-side.html @@ -15,9 +15,8 @@ Side-by-side example -

ol3 side-by-side demo

+

Side-by-side example

Side-by-side DOM and WebGL sync'ed maps.
-
side-by-side, webgl, dom, sync, object
@@ -67,6 +66,12 @@
DOM

Notes: The two maps share the same center, resolution, rotation and layers.

+
+

See the + side-by-side.js source to + see how this is done.

+
+
side-by-side, webgl, dom, sync, object
diff --git a/examples/two-layers.html b/examples/two-layers.html index 32472c92b3..cc71de2683 100644 --- a/examples/two-layers.html +++ b/examples/two-layers.html @@ -15,9 +15,8 @@ ol3 two-layers demo -

Two-layer example

+

Two-layer example

Sync'ed DOM and WebGL maps with two layers.
-
layers, tilejson, bing, bingmaps
@@ -28,6 +27,12 @@
DOM
+
+

See the + two-layers.js source + to see how this is done.

+
+
layers, tilejson, bing, bingmaps