Merge pull request #67 from elemoine/exampleparser

Use OpenLayers 2 examples system

.gitignore

@@ -1,4 +1,5 @@
 /bin/plovr*.jar
+/bin/*.pyc
 /build/gh-pages
 /build/jsdoc-*-timestamp
 /build/lint-spec-timestamp
@@ -9,4 +10,5 @@
 /build/src
 /examples/*.json
 /examples/*.combined.js
-/examples/index.html
+/examples/example-list.js
+/examples/example-list.xml

Makefile

@@ -11,8 +11,8 @@ EXTERNAL_SRC = \
 	build/src/external/externs/types.js \
 	build/src/external/src/exports.js \
 	build/src/external/src/types.js
-EXAMPLES_SRC = $(filter-out $(shell find examples -name \*.combined.js),$(shell find examples -name \*.js))
-EXAMPLES = $(filter-out examples/index.html,$(shell find examples -maxdepth 1 -name \*.html))
+EXAMPLES_SRC = $(filter-out $(shell find examples -name \*.combined.js) examples/Jugl.js examples/example-list.js,$(shell find examples -name \*.js))
+EXAMPLES = $(filter-out examples/example-list.html,$(shell find examples -maxdepth 1 -name \*.html))
 comma := ,
 empty :=
 space := $(empty) $(empty)
@@ -64,10 +64,10 @@ build/src/internal/src/types.js: bin/generate-exports src/ol/exports.txt
 build-examples: examples $(subst .html,.combined.js,$(EXAMPLES))
 
 .PHONY: examples
-examples: examples/index.html $(subst .html,.json,$(EXAMPLES))
+examples: examples/example-list.js $(subst .html,.json,$(EXAMPLES))
 
-examples/index.html: bin/generate-examples-index $(EXAMPLES)
-	bin/generate-examples-index -o $@ -s examples/index.js $(EXAMPLES)
+examples/example-list.js: bin/exampleparser.py $(EXAMPLES)
+	bin/exampleparser.py examples examples
 
 examples/%.json: Makefile base.json
 	echo "{\"id\": \"$(basename $(notdir $@))\", \"inherits\": \"../base.json\", \"inputs\": [\"$(subst .json,.js,$@)\", \"build/src/internal/src/types.js\"]}" > $@
@@ -120,7 +120,8 @@ hostexamples: build examples
 	cp $(EXAMPLES) $(subst .html,.js,$(EXAMPLES)) examples/style.css build/gh-pages/$(BRANCH)/examples/
 	cp build/loader_hosted_examples.js build/gh-pages/$(BRANCH)/examples/loader.js
 	cp build/ol.js build/ol.css build/gh-pages/$(BRANCH)/build/
-	cp examples/index.html examples/index.js build/gh-pages/$(BRANCH)/examples
+	cp examples/example-list.html build/gh-pages/$(BRANCH)/examples/index.html
+	cp examples/example-list.js examples/example-list.xml examples/Jugl.js build/gh-pages/$(BRANCH)/examples/
 
 .PHONY: test
 test: $(INTERNAL_SRC)
@@ -136,6 +137,8 @@ clean:
 	rm -rf build/src
 	rm -f examples/*.json
 	rm -f examples/*.combined.js
+	rm -f examples/example-list.js
+	rm -f examples/example-list.xml
 	rm -rf build/apidoc
 
 reallyclean: clean

bin/exampleparser.py

@@ -0,0 +1,265 @@
+#!/usr/bin/env python
+
+import sys
+import os
+import re
+import time
+from xml.dom.minidom import Document
+
+try:
+    import xml.etree.ElementTree as ElementTree
+except ImportError:
+    try:
+        import cElementTree as ElementTree  # NOQA
+    except ImportError:
+        try:
+            import elementtree.ElementTree as ElementTree # NOQA
+        except ImportError:
+            import lxml.etree as ElementTree  # NOQA
+
+missing_deps = False
+try:
+    import json
+except ImportError:
+    try:
+        import simplejson as json  # NOQA
+    except ImportError, E:
+        missing_deps = E
+
+try:
+    from BeautifulSoup import BeautifulSoup
+except ImportError, E:
+    missing_deps = E
+
+feedName = "example-list.xml"
+feedPath = "http://openlayers.github.com/ol3/master/examples/"
+
+
+def getListOfExamples(relPath):
+    """
+    returns list of .html filenames within a given path - excludes
+    example-list.html
+    """
+    examples = os.listdir(relPath)
+    examples = [example for example in examples if
+                example.endswith('.html') and example != "example-list.html"]
+    return examples
+
+
+def getExampleHtml(path):
+    """
+    returns html of a specific example
+    """
+    print '.',
+    f = open(path)
+    html = f.read()
+    f.close()
+    return html
+
+
+def extractById(soup, tagId, value=None):
+    """
+    returns full contents of a particular tag id
+    """
+    beautifulTag = soup.find(id=tagId)
+    if beautifulTag:
+        if beautifulTag.contents:
+            value = str(beautifulTag.renderContents()).strip()
+            value = value.replace('\t', '')
+            value = value.replace('\n', '')
+    return value
+
+
+def getRelatedClasses(html):
+    """
+    parses the html, and returns a list of all OpenLayers Classes
+    used within (ie what parts of OL the javascript uses).
+    """
+    rawstr = r'''(?P<class>ol\..*?)\('''
+    return re.findall(rawstr, html)
+
+
+def parseHtml(html, ids):
+    """
+    returns dictionary of items of interest
+    """
+    soup = BeautifulSoup(html)
+    d = {}
+    for tagId in ids:
+        d[tagId] = extractById(soup, tagId)
+    #classes should eventually be parsed from docs - not automatically created.
+    classes = getRelatedClasses(html)
+    d['classes'] = classes
+    return d
+
+
+def getGitInfo(exampleDir, exampleName):
+    orig = os.getcwd()
+    os.chdir(exampleDir)
+    h = os.popen("git log -n 1 --pretty=format:'%an|%ai' " + exampleName)
+    os.chdir(orig)
+    log = h.read()
+    h.close()
+    d = {}
+    parts = log.split("|")
+    d["author"] = parts[0]
+    # compensate for spaces in git log time
+    td = parts[1].split(" ")
+    td.insert(1, "T")
+    d["date"] = "".join(td)
+    return d
+
+
+def createFeed(examples):
+    doc = Document()
+    atomuri = "http://www.w3.org/2005/Atom"
+    feed = doc.createElementNS(atomuri, "feed")
+    feed.setAttribute("xmlns", atomuri)
+    title = doc.createElementNS(atomuri, "title")
+    title.appendChild(doc.createTextNode("OpenLayers Examples"))
+    feed.appendChild(title)
+    link = doc.createElementNS(atomuri, "link")
+    link.setAttribute("rel", "self")
+    link.setAttribute("href", feedPath + feedName)
+
+    modtime = time.strftime("%Y-%m-%dT%I:%M:%SZ", time.gmtime())
+    id = doc.createElementNS(atomuri, "id")
+    id.appendChild(doc.createTextNode(
+        "%s%s#%s" % (feedPath, feedName, modtime)))
+    feed.appendChild(id)
+
+    updated = doc.createElementNS(atomuri, "updated")
+    updated.appendChild(doc.createTextNode(modtime))
+    feed.appendChild(updated)
+
+    examples.sort(key=lambda x: x["modified"])
+    for example in sorted(examples, key=lambda x: x["modified"], reverse=True):
+        entry = doc.createElementNS(atomuri, "entry")
+
+        title = doc.createElementNS(atomuri, "title")
+        title.appendChild(doc.createTextNode(example["title"] or
+                                             example["example"]))
+        entry.appendChild(title)
+
+        tags = doc.createElementNS(atomuri, "tags")
+        tags.appendChild(doc.createTextNode(example["tags"] or
+                                            example["example"]))
+        entry.appendChild(tags)
+
+        link = doc.createElementNS(atomuri, "link")
+        link.setAttribute("href", "%s%s" % (feedPath, example["example"]))
+        entry.appendChild(link)
+
+        summary = doc.createElementNS(atomuri, "summary")
+        summary.appendChild(doc.createTextNode(example["shortdesc"] or
+                                               example["example"]))
+        entry.appendChild(summary)
+
+        updated = doc.createElementNS(atomuri, "updated")
+        updated.appendChild(doc.createTextNode(example["modified"]))
+        entry.appendChild(updated)
+
+        author = doc.createElementNS(atomuri, "author")
+        name = doc.createElementNS(atomuri, "name")
+        name.appendChild(doc.createTextNode(example["author"]))
+        author.appendChild(name)
+        entry.appendChild(author)
+
+        id = doc.createElementNS(atomuri, "id")
+        id.appendChild(doc.createTextNode("%s%s#%s" % (feedPath,
+                                                       example["example"],
+                                                       example["modified"])))
+        entry.appendChild(id)
+
+        feed.appendChild(entry)
+
+    doc.appendChild(feed)
+    return doc
+
+
+def wordIndex(examples):
+    """
+    Create an inverted index based on words in title and shortdesc.  Keys are
+    lower cased words.  Values are dictionaries with example index keys and
+    count values.
+    """
+    index = {}
+    unword = re.compile("\\W+")
+    keys = ["shortdesc", "title", "tags"]
+    for i in range(len(examples)):
+        for key in keys:
+            text = examples[i][key]
+            if text:
+                words = unword.split(text)
+                for word in words:
+                    if word:
+                        word = word.lower()
+                        if word in index:
+                            if i in index[word]:
+                                index[word][i] += 1
+                            else:
+                                index[word][i] = 1
+                        else:
+                            index[word] = {i: 1}
+    return index
+
+if __name__ == "__main__":
+
+    if missing_deps:
+        print """This script requires json or simplejson and BeautifulSoup.
+You don't have them. \n(%s)""" % E
+        sys.exit()
+
+    if len(sys.argv) == 3:
+        inExampleDir = sys.argv[1]
+        outExampleDir = sys.argv[2]
+    else:
+        inExampleDir = "../examples"
+        outExampleDir = "../examples"
+
+    outFile = open(os.path.join(outExampleDir, "example-list.js"), "w")
+
+    print 'Reading examples from %s and writing out to %s' % (inExampleDir,
+                                                              outFile.name)
+
+    exampleList = []
+    docIds = ['title', 'shortdesc', 'tags']
+
+    examples = getListOfExamples(inExampleDir)
+
+    modtime = time.strftime("%Y-%m-%dT%I:%M:%SZ", time.gmtime())
+
+    for example in examples:
+        path = os.path.join(inExampleDir, example)
+        html = getExampleHtml(path)
+        tagvalues = parseHtml(html, docIds)
+        tagvalues['example'] = example
+        # add in author/date info
+        d = getGitInfo(inExampleDir, example)
+        tagvalues["author"] = d["author"] or "anonymous"
+        tagvalues["modified"] = d["date"] or modtime
+        tagvalues['link'] = example
+
+        exampleList.append(tagvalues)
+
+    print
+
+    exampleList.sort(key=lambda x: x['example'].lower())
+
+    index = wordIndex(exampleList)
+
+    json = json.dumps({"examples": exampleList, "index": index})
+    # Give the json a global variable we can use in our js.
+    # This should be replaced or made optional.
+    json = 'var info=' + json
+    outFile.write(json)
+    outFile.close()
+
+    outFeedPath = os.path.join(outExampleDir, feedName)
+    print "writing feed to %s " % outFeedPath
+    atom = open(outFeedPath, 'w')
+    doc = createFeed(exampleList)
+    atom.write(doc.toxml())
+    atom.close()
+
+    print 'complete'

bin/generate-examples-index

@@ -1,65 +0,0 @@
-#!/usr/bin/env python
-
-from contextlib import contextmanager
-from optparse import OptionParser
-import os
-import sys
-import xml.etree.cElementTree as ElementTree
-
-
-@contextmanager
-def tag(tb, name, attrs=None):
-    tb.start(name, attrs)
-    yield tb
-    tb.end(name)
-
-
-def main(argv):
-
-    option_parser = OptionParser()
-    option_parser.add_option('--output', '-o', metavar='FILENAME')
-    option_parser.add_option('--script', '-s', action='append', default=[],
-                             dest='scripts', metavar='SCRIPT')
-    options, args = option_parser.parse_args(argv[1:])
-    if options.output:
-        outputdir = os.path.dirname(options.output)
-    else:
-        outputdir = os.curdir()
-
-    tb = ElementTree.TreeBuilder()
-    with tag(tb, 'html'):
-        with tag(tb, 'head'):
-            with tag(tb, 'meta', {'content': 'text/html; charset=utf-8',
-                                  'http-equiv': 'Content-Type'}):
-                pass
-            with tag(tb, 'link', {'href': 'style.css',
-                                  'rel': 'stylesheet',
-                                  'type': 'text/css'}):
-                pass
-            with tag(tb, 'title'):
-                tb.data('ol3 examples')
-        with tag(tb, 'body'):
-            with tag(tb, 'h1'):
-                tb.data('ol3 examples')
-            with tag(tb, 'ul'):
-                for arg in sorted(args):
-                    with tag(tb, 'li'):
-                        href = os.path.relpath(arg, outputdir)
-                        with tag(tb, 'a', {'href': href}):
-                            tb.data(os.path.splitext(os.path.basename(arg))[0]
-                                    .replace('-', ' '))
-            for script in sorted(options.scripts):
-                src = os.path.relpath(script, outputdir)
-                with tag(tb, 'script', {'src': src, 'type': 'text/javascript'}):
-                    tb.data('')
-
-    if options.output:
-        output = open(options.output, 'w')
-    else:
-        output = sys.stdout
-    output.write('<!doctype html>')
-    output.write(ElementTree.tostring(tb.close(), 'utf-8', 'html'))
-
-
-if __name__ == '__main__':
-    sys.exit(main(sys.argv))

examples/example-list.html

@@ -0,0 +1,296 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <!-- This is the example list source: if you are trying to look at the 
+        source of an example, YOU ARE IN THE WRONG PLACE. -->
+        <title>OpenLayers Examples</title>
+        <link rel="alternate" href="example-list.xml" type="application/atom+xml" />
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <style type="text/css">
+            html, body {
+                margin: 0;
+                padding: 0;
+                line-height: 1.25em;
+            }
+            #logo {
+                text-shadow: 2px 2px 3px gray;
+                color: white;
+                vertical-align: middle;
+                position: absolute;
+                top: 5px;
+                left: 5px;
+                font-size: 34px;
+                font-family: "Trebuchet MS",Helvetica,Arial,sans-serif;
+            }
+            #logo img {
+                vertical-align: middle;
+            }
+            .ex_container{
+            }
+            .ex_container a {
+                text-decoration: none;
+                padding: 5px 1em;
+                display: block;
+            }
+            .ex_container a:hover {
+                background-color: #eeeeee;
+            }
+            .ex_title{
+                display: inline;
+                font-weight: bold;
+                color: #333;
+            }
+            .ex_tags{
+                display: inline;
+                font-size: smaller;
+                font-style: italic;
+                color: #333;
+            }
+            .ex_filename {
+                font-weight: normal;
+                font-size: 0.8em;
+                color: #ccc
+            }
+            .ex_description{
+                color: #222;
+                padding: 3px;
+            }
+            .ex_classes{
+                font-size: .7em;
+                color: gray;
+                display: none;
+            }
+            #toc {
+                width: 100%;
+                height: 100%;
+            }
+            #filter {
+                position: fixed;
+                text-align: center;
+                top: 0px;
+                background: #9D9FA1;
+                width: 100%;
+                padding: 1.3em 0;
+            }
+            #examples {
+                overflow: auto;
+                list-style: none;
+                margin: 0;
+                padding: 0;
+            }
+            #examples ul {
+                list-style: none;
+                margin: 0;
+                padding: 0;
+                margin-top: 4em;
+            }
+            #examples ul li {
+                display: inline;
+                float: left;
+                width: 350px;
+                margin: 10px 0 0 10px;
+                padding: 0;
+                border: 1px solid #ddd;
+                border-radius: 3px;
+            }
+            #examples .mainlink {
+                height: 8em;
+                overflow: auto;
+            }
+            #exwin {
+                position: absolute;
+                top: 0;
+                left: 30%;
+                width: 70%;
+                height: 100%;
+                border: none;
+                border-left: 1px solid #cccccc;
+                margin: 0;
+            }
+            @media only screen and (max-width: 600px) {
+                #examples ul {
+                    margin-top: 100px;
+                }
+                #filter {
+                    padding-top: 50px;
+                }
+                #examples ul li {
+                    margin-left: 0;
+                    border-radius: 0;
+                    border-width: 1px 0;
+                    width: 100%;
+                }
+                #examples .mainlink {
+                    height: auto;
+                }
+                #examples .ex_tags, #examples .ex_filename {
+                    display: none;
+                }
+            }
+        </style>
+        <script type="text/javascript" src="Jugl.js"></script>
+        <script type="text/javascript" src="example-list.js"></script>
+        <script type="text/javascript">
+            var template, target;
+
+            function listExamples(examples) {
+                target.innerHTML = "";
+                var node = template.process({
+                    context: {examples: examples},
+                    clone: true,
+                    parent: target
+                });
+                document.getElementById("count").innerHTML = "(" + examples.length + ")";
+            }
+            
+            var timerId;
+            function inputChange() {
+                if(timerId) {
+                    window.clearTimeout(timerId);
+                }
+                var text = this.value;
+                timerId = window.setTimeout(function() {
+                    filterList(text);
+                }, 500);
+            }
+            
+            function filterList(text) {
+                var examples;
+                if(text.length < 2) {
+                    examples = info.examples;
+                } else {
+                    var words = text.split(/\W+/);
+                    var scores = {};
+                    for(var i=0; i<words.length; ++i) {
+                        var word = words[i].toLowerCase();
+                        var dict = info.index[word];
+                        var updateScores = function() {
+                            for(exIndex in dict) {
+                                var count = dict[exIndex];
+                                if(scores[exIndex]) {
+                                    if(scores[exIndex][word]) {
+                                        scores[exIndex][word] += count;
+                                    } else {
+                                        scores[exIndex][word] = count;
+                                    }
+                                } else {
+                                    scores[exIndex] = {};
+                                    scores[exIndex][word] = count;
+                                }
+                            }
+                        };
+                        if(dict) {
+                            updateScores();
+                        } else {
+                            var r;
+                            for (idx in info.index) {
+                               r = new RegExp(word);
+                               if (r.test(idx)) {
+                                    dict = info.index[idx];
+                                    updateScores();
+                               }
+                            }
+                        }
+                    }
+                    examples = [];
+                    for(var j in scores) {
+                        var ex = info.examples[j];
+                        ex.score = scores[j];
+                        examples.push(ex);
+                    }
+                    // sort examples by first by number of words matched, then
+                    // by word frequency
+                    examples.sort(function(a, b) {
+                        var cmp;
+                        var aWords = 0, bWords = 0;
+                        var aScore = 0, bScore = 0;
+                        for(var i in a.score) {
+                            aScore += a.score[i];
+                            aWords += 1;
+                        }
+                        for(var j in b.score) {
+                            bScore += b.score[j];
+                            bWords += 1;
+                        }
+                        if(aWords == bWords) {
+                            cmp = bScore - aScore;
+                        } else {
+                            cmp = bWords - aWords;
+                        }
+                        return cmp;
+                    });
+                }
+                listExamples(examples);
+            }
+            
+            function showAll() {
+                document.getElementById("keywords").value = "";
+                listExamples(info.examples);
+            }
+            
+            function parseQuery() {
+                var params = {};
+                var list = window.location.search.substring(1).split("&");
+                for(var i=0; i<list.length; ++i) {
+                    var pair = list[i].split("=");
+                    if(pair.length == 2) {
+                        params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
+                    }
+                }
+                if(params["q"]) {
+                    var input = document.getElementById("keywords");
+                    input.value = params["q"];
+                    inputChange.call(input);
+                }
+            }
+            window.onload = function() {
+                //document.getElementById('keywords').focus();
+                template = new jugl.Template("template");
+                target = document.getElementById("examples");
+                listExamples(info.examples);
+                document.getElementById("keywords").onkeyup = inputChange;
+                parseQuery();
+            };
+        </script>
+    </head>
+    <body>
+        <div id="toc">
+            <div id="filter">
+                <div id="logo">
+                <img src="http://www.openlayers.org/images/OpenLayers.trac.png"
+                 />
+                 OpenLayers 3
+             </div>
+                <input autofocus placeholder="filter by keywords..." type="text" id="keywords" />
+                <span id="count"></span>
+                <a href="javascript:void showAll();">show all</a>
+            </div>
+            <div id="examples"></div>
+        </div>
+        <div style="display: none;">
+            <ul id="template">
+                <li class="ex_container" jugl:repeat="example examples">
+                <a jugl:attributes="href example.link" class="mainlink"
+                    target="_blank">
+                        <h5 class="ex_title">
+                            <span jugl:replace="example.title">title</span><br>
+                            <span class="ex_filename" jugl:content="'(' + example.example + ')'">filename</span>
+                        </h5>
+                        <div class="ex_description" jugl:content="example.shortdesc">
+                            Short Description goes here
+                        </div>
+                        <p class="ex_classes" jugl:content="example.classes">
+                            Related Classes go here
+                        </p>
+                        <div class="ex_tags" jugl:content="'...tagged with ' + example.tags">
+                            
+                        </div>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </body>
+</html>

examples/full-screen.html

@@ -12,11 +12,36 @@
         width: 100%;
         height: 100%;
       }
+      #text {
+          position: absolute;
+          top: 8px;
+          right: 8px;
+          z-index: 20000;
+          background-color: white;
+          padding: 0 0.5em 0.5em 0.5em;
+          border-radius: 4px;
+      }
+      @media only screen and (max-width: 600px) {
+        #text {
+          display: none;
+        }
+      }
     </style>
-    <title>ol3 full-screen demo</title>
+    <title>Full-screen example</title>
   </head>
   <body>
-    <div id="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>
 </html>

examples/overlay-and-popup.html

@@ -12,6 +12,20 @@
         width: 100%;
         height: 100%;
       }
+      #text {
+          position: absolute;
+          top: 8px;
+          right: 8px;
+          z-index: 20000;
+          background-color: white;
+          padding: 0 0.5em 0.5em 0.5em;
+          border-radius: 4px;
+      }
+      @media only screen and (max-width: 600px) {
+        #text {
+          display: none;
+        }
+      }
       .overlay {
         display: none;
         font-size: 10pt;
@@ -34,7 +48,6 @@
         padding: 5px;
       }
 
-
       /* Popup CSS generated with http://cssarrowplease.com/ */
 
       .arrow_box {
@@ -67,7 +80,7 @@
         margin-left: -13px;
       }
     </style>
-    <title>ol3 overlay-and-popup demo</title>
+    <title>Overlay example</title>
   </head>
   <body>
     <div id="map">
@@ -75,7 +88,17 @@
       <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>

examples/side-by-side.html

@@ -12,10 +12,11 @@
         margin: 1em;
       }
     </style>
-    <title>ol3 side-by-side demo</title>
+    <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>
     <table>
       <tr>
         <th>DOM</th>
@@ -65,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>

examples/style.css

@@ -54,3 +54,9 @@ h6 {
     font-size: 80%;
     font-weight: bold;
 }
+#tags {
+  display: none;
+}
+#shortdesc {
+  margin-bottom: 2em;
+}

examples/two-layers.html

@@ -15,7 +15,8 @@
     <title>ol3 two-layers demo</title>
   </head>
   <body>
-    <h1>ol3 two-layers demo</h1>
+    <h1 id="title">Two-layer example</h1>
+    <div id="shortdesc">Sync'ed DOM and WebGL maps with two layers.</div>
     <table>
       <tr>
         <th>DOM</th>
@@ -26,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>