Initial commit

author: Christopher Baines <cb15g11@soton.ac.uk> 2014-02-19 22:32:59 +0000
committer: Christopher Baines <cb15g11@soton.ac.uk> 2014-02-19 22:32:59 +0000
commit: e4d1c918444c15e2e1480ecb332e61ec8feb7629 (patch)
tree: d1ca58de732b894ab015a8b5df4581d6ec3be495 /examples
download: leaflet-soton-e4d1c918444c15e2e1480ecb332e61ec8feb7629.tar
leaflet-soton-e4d1c918444c15e2e1480ecb332e61ec8feb7629.tar.gz
8 files changed, 970 insertions, 0 deletions
diff --git a/examples/basic.html b/examples/basic.html
new file mode 100644
index 0000000..161ecaa
--- /dev/null
+++ b/examples/basic.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Map - University of Southampton</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    <link rel="stylesheet" href="../src/sum.css" />
+    <link rel="stylesheet" href="../resources/leaflet/dist/leaflet.css" />
+
+    <style>
+        body {
+          padding: 0;
+          margin: 0;
+        }
+
+        html, body, #map {
+          height: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+
+    <script src="../resources/leaflet/dist/leaflet-src.js"></script>
+
+    <script src="../src/sum.js"></script>
+
+    <script type="text/javascript">
+        SUM.dataPath = '../data.json';
+
+        var map = SUM.map('map');
+    </script>
+</body>
+</html>
diff --git a/examples/buildingsearch.html b/examples/buildingsearch.html
new file mode 100644
index 0000000..7ee8f40
--- /dev/null
+++ b/examples/buildingsearch.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+
+    <link rel="stylesheet" href="../src/leaflet-soton.css" />
+    <link rel="stylesheet" href="../resources/leaflet/dist/leaflet.css" />
+
+<style type="text/css">
+
+html { height: 100% }
+body { height: 100%; margin: 0px; padding: 0px }
+#top_bar {
+  height: 10%;
+  width:100%;
+  height:5%;
+  border-bottom: 1px solid #000;
+  overflow:hidden;
+  background-color:#ccc
+}
+
+#map_canvas { height: 90% }
+
+.info_photo {
+    float:right;
+    padding: 0em 0em 0.3em 1em;
+}
+.info {
+    font-family: sans-serif;
+    width: 400px;
+    height: 200px;
+    overflow-y: auto;
+}
+.info_label {
+    font-weight: bold;
+    font-size: 130%;
+}
+.info_n {
+    font-size: 200%;
+}
+.info_link {
+    margin-bottom: 1em;
+    font-size: small;
+}
+.info_txt {
+    margin-bottom: 0.5em;
+}
+#resultsDiv {
+    padding-bottom: 2em;
+}
+#resultsDiv a {
+    display: block;
+    padding-top: 0.3em;
+    padding-left: 5%;
+    padding-right: 5%;
+}
+#resultsDiv a .n {
+    padding-right: 0.5em;
+    display: block;
+    float: right;
+    font-size: 90%;
+}
+#resultsDiv a .label {
+    display: block;
+    padding-left: 0.5em;
+    border-bottom: solid 1px #ccc;
+    padding-bottom: 0.3em;
+    font-size: 120%;
+}
+
+#searchBox {
+    text-align: center;
+    width: 90%;
+    font-size: 140%;
+    padding: 0.1em;
+    border: solid 1px #000;
+}
+
+</style>
+
+</head>
+<body>
+<div id="top_bar">
+<div style='font-size:40px;padding:5px 5px 3px 5px;'>
+    Building Search
+</div>
+</div>
+<div id="map" style="width:70%; height:95%; float:right"></div>
+
+<div style='height:95%;overflow-y:auto;border-right:1px solid #000'>
+
+    <div style='padding-bottom:0.5em;border-bottom:solid 1px #000;margin-bottom:0.5em'>
+
+        <div style='margin:0.3em;text-align:center;clear:both;'>
+            <input id='searchBox' />
+        </div>
+        <div style='text-align:center'>
+            <label>
+                <input id='res' type='checkbox' name='res' value='yes' />
+                Include Halls and Residential Buildings
+            </label>
+        </div>
+        <div style='text-align:center;margin-top:0.3em;font-size:80%'>
+            Type "b12." to search for a specific building number.
+        </div>
+    </div>
+
+    <div id='resultsDiv'>
+    </div>
+</div>
+
+<script src="../resources/leaflet/dist/leaflet.js"></script>
+<script src="../src/leaflet-soton.js"></script>
+<script type="text/javascript">
+    LS.imagePath = '../resources/images/';
+    LS.dataPath = '../data.json';
+
+    var map = LS.map('map');
+
+    LS.on("dataload", function(data) {
+        var searchBox = document.getElementById("searchBox");
+        var residentialTickBox = document.getElementById("res");
+        var resultsDiv = document.getElementById("resultsDiv");
+
+        var buildings = data.buildings.features.sort(function(a, b) {
+            return a.properties.name.localeCompare(b.properties.name);
+        });
+
+        function filter() {
+            var searchText = searchBox.value.toLowerCase();
+
+            resultsDiv.innerHTML = "";
+
+            var results = [];
+
+            buildings.forEach(function(building) {
+                var name = building.properties.name;
+
+                if (name.length === 0)
+                    return;
+
+                if (name.toLowerCase().indexOf(searchText) !== -1) {
+                    var a = document.createElement("a");
+                    a.href = "#";
+
+                    a.onclick = function() {
+                        map.showPopupByURI(building.properties.uri);
+                    };
+
+                    var label = document.createElement("span");
+                    label.textContent = name;
+                    label.className = "label";
+                    a.appendChild(label);
+
+                    var n = document.createElement("span");
+                    n.textContent = building.properties.loc_ref;
+                    n.className = "n";
+                    a.appendChild(n);
+
+                    resultsDiv.appendChild(a);
+
+                    results.push(building.properties.uri);
+                }
+            });
+
+            if (results.length === 1) {
+                map.showPopupByURI(results[0]);
+            }
+        }
+
+        searchBox.onkeyup = filter;
+
+        filter();
+    });
+</script>
+</body>
+</html>
diff --git a/examples/full.html b/examples/full.html
new file mode 100644
index 0000000..02d1c96
--- /dev/null
+++ b/examples/full.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Workstations - University of Southampton</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    <link rel="stylesheet" href="../resources/leaflet-locatecontrol/src/L.Control.Locate.css" />
+    <link rel="stylesheet" href="../resources/leaflet/dist/leaflet.css" />
+
+    <link rel="stylesheet" href="../src/leaflet-soton.css" />
+
+    <style>
+        body {
+          padding: 0;
+          margin: 0;
+        }
+
+        html, body, #map {
+          height: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+
+    <script src="../resources/leaflet/dist/leaflet.js"></script>
+    <script src="../resources/leaflet-markercluster/dist/leaflet.markercluster.js"></script>
+    <script src="../resources/leaflet-locatecontrol/src/L.Control.Locate.js"></script>
+    <script src="../resources/leaflet-hash/leaflet-hash.js"></script>
+
+    <script src="../src/leaflet-soton.js"></script>
+
+    <script type="text/javascript">
+        LS.imagePath = '../resources/images/';
+        LS.dataPath = '../data.json';
+
+        var map = LS.map('map', {
+            workstations: true,
+            indoor: true
+        });
+
+        L.control.locate().addTo(map);
+    </script>
+</body>
+</html>
diff --git a/examples/index.html b/examples/index.html
new file mode 100644
index 0000000..997e65d
--- /dev/null
+++ b/examples/index.html
@@ -0,0 +1,372 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Leaflet Soton - Documentation</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    <style>
+/* Adapted from a stylesheet by Edward O'Connor */
+/* http://edward.oconnor.cx/ */
+
+/* Undo default HTML styling of some elements */
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: normal;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+}
+
+/* Basic layout */
+
+body {
+  margin: 1.3125em auto 0 auto;
+  padding: 0;
+  width: 80em;
+  max-width: 98%;
+  hyphens: auto;
+}
+
+p {
+  font-size: large;
+  margin: 1.3125em 0;
+  padding: 0;
+}
+
+li {
+  font-size: large;
+  padding: 0;
+}
+
+/* Typography */
+
+/*  6pt = 0.375em
+ *  7pt = 0.4375em
+ *  8pt = 0.5em
+ *  9pt = 0.5625em
+ * 10pt = 0.625em
+ * 11pt = 0.6875em
+ * 12pt = 0.75em
+ * 14pt = 0.875em
+ * 16pt = 1em
+ * 18pt = 1.125em
+ * 21pt = 1.3125em
+ * 24pt = 1.5em
+ * 36pt = 2.25em
+ * 48pt = 3em
+ * 60pt = 3.75em
+ * 72pt = 4.5em
+ */
+
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 100%;
+  line-height: 1.625;
+}
+
+h1 { font-size: 2.25em;   line-height: 1.167; margin-bottom: .75em}
+h2 { font-size: 2em;      line-height: 3; margin-bottom: .75em}
+h3 { font-size: 1.3125em; line-height: 2; margin-bottom: .75em}
+h4 { font-size: 1.25em;   line-height: 1.05; }
+h5 { font-size: 1.125em;  line-height: 1.167; }
+h6 { font-size: 1em;      line-height: 1.3125; }
+    </style>
+
+    <link rel="stylesheet" href="../src/leaflet-soton.css" />
+
+    <link rel="stylesheet" href="../resources/leaflet/dist/leaflet.css" />
+
+    <script type="text/javascript" src="../resources/syntaxhighlighter/pkg/scripts/shCore.js"></script>
+    <script type="text/javascript" src="../resources/syntaxhighlighter/pkg/scripts/shBrushJScript.js"></script>
+    <script type="text/javascript" src="../resources/syntaxhighlighter/pkg/scripts/shBrushXml.js"></script>
+    <link type="text/css" rel="stylesheet" href="../resources/syntaxhighlighter/pkg/styles/shCoreDefault.css"/>
+    <script type="text/javascript">SyntaxHighlighter.all();</script>
+</head>
+<body>
+    <h1>An Introduction to OpenStreetMap and the University of Southampton</h1>
+
+    <h2>OpenStreetMap</h2>
+    <table>
+        <tr>
+            <td>
+                <p>
+
+                The OpenStreetMap project was started in 2004 with the aim of
+                creating a free map of the world. The core, but perhaps less
+                obvious output from the project is the data. You can see an
+                example of some OSM data, represented in XML on the right.
+
+                </p>
+                <p>
+
+                This abreviated data describes the Zepler building on Highfield
+                Campus. You can see in the tags, that the building name,
+                number, and uri are present.
+
+                </p>
+            </td>
+            <td>
+                <script type="syntaxhighlighter" class="brush: xml"><![CDATA[
+                <?xml version='1.0' encoding='UTF-8'?>
+                <osm version='0.6'>
+                    <node id='304648094' lat='50.9371225' lon='-1.397536' />
+                    <node id='304648184' lat='50.9375162' lon='-1.3976054' />
+                    ...
+                    <node id='2628668610' lat='50.9371174' lon='-1.3976749' />
+                    <way id='27743656'>
+                        <nd ref='1550130370' />
+                        ...
+                        <nd ref='1550130274' />
+                        <nd ref='1550130370' />
+                        <tag k='building' v='yes' />
+                        <tag k='loc_ref' v='59' />
+                        <tag k='name' v='Zepler' />
+                        <tag k='uri' v='http://id.southampton.ac.uk/building/59' />
+                    </way>
+                </osm>
+                ]]></script>
+            </td>
+        </tr>
+    </table>
+
+    <h2>Slippy Maps</h2>
+    <table>
+        <tr>
+            <td>
+                <img src="http://a.tile.openstreetmap.org/16/32513/21958.png" />
+            </td>
+            <td>
+                <h3>Data to Images (or Tiles)</h3>
+                <p>
+
+                XML is perhaps not the best way to view the data if you want to
+                use if for navigation, so this data can be rendered in to
+                images for use in a map. Shown here is the "Standard" rendering
+                of part of Highfield campus.
+
+                </p>
+                <p>
+
+                This tile has been downloaded from the OpenStreetMap tile
+                servers. A tileserver is normally composed of a database
+                (usually postgresql with postgis), a tile rendering stack
+                (e.g.  renderd and mapnik) and a webserver (e.g. apache with
+                mod_tile).
+
+                </p>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <h3>Leaflet</h3>
+                <p>
+
+                There are a few libraries that can handle displaying a "slippy"
+                map, the one in use here is called leaflet. Tiles like the one
+                shown above are combined together in to a grid that can be
+                moved with the mouse.
+
+                </p>
+                <p>
+
+                The javascript used to create the map seen on the right is shown below.
+
+                </p>
+
+                <pre class="brush: js;">
+                var map1 = L.map('zepler-osm');
+
+                map1.setView([50.93733, -1.39779], 19);
+
+                L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+                    maxZoom: 19
+                }).addTo(map1);
+                </pre>
+            </td>
+            <td>
+                <div id="zepler-osm" style="height: 500px; width: 100%;"></div>
+            </td>
+        </tr>
+    </table>
+    <h2>Custom Maps for the University</h2>
+    <table>
+        <tr>
+            <td>
+                <div id="sum-carto" style="height: 500px; width: 600px;"></div>
+            </td>
+            <td>
+                <h3>Custom Rendering (sum-carto)</h3>
+                <p>
+
+                Jumping back to tileservers, the rendering stack decides how to
+                display the data as an image. Mapnik, which is commonly used
+                has an xml stylesheet that it uses, this can be (and in the
+                case of the "Standard" OSM style, is)  generated from another
+                CSS like language called carto.
+
+                </p>
+                <p>
+
+                The "Standard" OSM rendering has some disadvantages for the
+                University. Probably the biggest is that it shows some
+                irelevent things, e.g. housenumbers for the surrounding
+                residential area, it also does not show relevent things e.g.
+                building numbers, cycle parking, ...
+
+                </p>
+                <p>
+
+                To the left, you can see the same view as before, but this
+                time, the data has been rendered according to a different
+                stylesheet.  Notice that the buildings number is displayed
+                below the name, and that some cycle parking is shown just to
+                the top right of the Zepler building (green P).
+
+                </p>
+                <p>
+
+                Currently there are two tileservers hosting this University
+                specific tileset. Inside ECS there is
+                kanga-cb15g11.ecs.soton.ac.uk, which is updated daily. Outside
+                of ECS, there is altair.cbaines.net, which is rarely updated.
+
+                </p>
+                <pre class="brush: js;">
+                var map2 = L.map('sum-carto');
+
+                map2.setView([50.93733, -1.39779], 19);
+
+                L.tileLayer('http://kanga-cb15g11.ecs.soton.ac.uk/sum/{z}/{x}/{y}.png', {
+                    maxZoom: 19
+                }).addTo(map2);
+                </pre>
+            </td>
+        </tr>
+    </table>
+    <h2>Interactivity</h2>
+    <table>
+        <tr>
+            <td>
+                <h2>sum</h2>
+                <p>
+
+                So far we have seen static maps, and slippy maps. But extra
+                interactivty can be used to enhance slippy maps with more data
+                where available. The University is off to a good start with
+                this data, and some of it can be interacted with through the
+                map.
+
+                </p>
+                <p>
+
+                The sum (TODO: Find better name) library allows you to add this
+                interactivity to the map with ease, its mainly clientside, with
+                a small server side component. It handles everything from
+                setting up Leaflet, to advanced interactive components.
+
+                </p>
+                <p>
+
+                Try clicking on the buildings and the bicycle parking.
+
+                </p>
+                <pre class="brush: js;">
+                var map3 = LS.map('sum-basic');
+                </pre>
+            </td>
+            <td>
+                <div id="sum-basic" style="width: 100%; height: 500px;"></div>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <div id="sum-workstations" style="width: 100%; height: 500px;"></div>
+            </td>
+            <td>
+                <h3>Workstations</h3>
+                <p>
+
+                One of the very useful pieces of information published by the
+                University is the workstation use data. On the left you can see
+                this being displayed on the map.
+
+                </p>
+                <p>
+
+                As you zoom in and out, the workstation markers will group
+                together and split apart to keep the data visible. All markers
+                are also interactive and display more data in a popup when
+                clicked on.
+
+                </p>
+                <pre class="brush: js;">
+                var map4 = LS.map('sum-workstations', {
+                    workstations: true
+                });
+                </pre>
+            </td>
+        </tr>
+    </table>
+    <h2> Future Experimental Features</h2>
+    <table>
+        <tr>
+            <td>
+                <h3>Indoor Maps</h3>
+                <p>
+
+                Navigating around the University is slightly different from
+                navigating around a city, e.g. Southampton or London. Most of
+                navigation for students and staff of the university involves
+                moving between rooms.
+
+                </p>
+                <p>
+
+                The sum library also has an experimental indoor feature, you
+                can see a view of the library (level 2) on the left.
+
+                </p>
+            </td>
+            <td>
+                <div id="sum-indoor" style="width: 600px; height: 500px;"></div>
+            </td>
+        </tr>
+    </table>
+
+    <script src="../resources/leaflet/dist/leaflet-src.js"></script>
+    <script src="../resources/leaflet-markercluster/dist/leaflet.markercluster.js"></script>
+
+    <script src="../src/leaflet-soton.js"></script>
+
+    <script type="text/javascript">
+        LS.dataPath = '../data.json';
+        LS.imagePath = '../resources/images/';
+
+        var map1 = L.map('zepler-osm').setView([50.93733, -1.39779], 19);
+
+        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+            maxZoom: 19
+        }).addTo(map1);
+
+        var map2 = L.map('sum-carto').setView([50.93733, -1.39779], 19);
+
+        L.tileLayer('http://kanga-cb15g11.ecs.soton.ac.uk/sum/{z}/{x}/{y}.png', {
+            maxZoom: 22
+        }).addTo(map2);
+
+        var map3 = LS.map('sum-basic');
+
+        var map4 = LS.map('sum-workstations', {
+            workstations: true
+        });
+
+        var map5 = LS.map('sum-indoor', {
+            workstations: true,
+            indoor: true,
+            center: [50.93471, -1.3957],
+            zoom: 20,
+            level: "2"
+        });
+    </script>
+</body>
+</html>
diff --git a/examples/indoor.html b/examples/indoor.html
new file mode 100644
index 0000000..0e46409
--- /dev/null
+++ b/examples/indoor.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Map - University of Southampton</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    <link rel="stylesheet" href="../src/leaflet-soton.css" />
+    <link rel="stylesheet" href="../resources/leaflet/dist/leaflet.css" />
+
+    <style>
+        body {
+          padding: 0;
+          margin: 0;
+        }
+
+        html, body, #map {
+          height: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+
+    <script src="../resources/leaflet/dist/leaflet-src.js"></script>
+
+    <script src="../src/leaflet-soton.js"></script>
+
+    <script type="text/javascript">
+        LS.dataPath = '../data.json';
+        LS.imagePath = '../resources/images/';
+
+        var map = LS.map('map', {
+            indoor: true
+        });
+    </script>
+</body>
+</html>
diff --git a/examples/search.html b/examples/search.html
new file mode 100644
index 0000000..85e8d80
--- /dev/null
+++ b/examples/search.html
@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+
+    <link rel="stylesheet" href="../src/leaflet-soton.css" />
+    <link rel="stylesheet" href="../resources/leaflet/dist/leaflet.css" />
+
+<style type="text/css">
+
+html { height: 100% }
+body { height: 100%; margin: 0px; padding: 0px }
+#top_bar {
+  height: 10%;
+  width:100%;
+  height:5%;
+  border-bottom: 1px solid #000;
+  overflow:hidden;
+  background-color:#ccc
+}
+
+#map_canvas { height: 90% }
+
+.info_photo {
+    float:right;
+    padding: 0em 0em 0.3em 1em;
+}
+.info {
+    font-family: sans-serif;
+    width: 400px;
+    height: 200px;
+    overflow-y: auto;
+}
+.info_label {
+    font-weight: bold;
+    font-size: 130%;
+}
+.info_n {
+    font-size: 200%;
+}
+.info_link {
+    margin-bottom: 1em;
+    font-size: small;
+}
+.info_txt {
+    margin-bottom: 0.5em;
+}
+#resultsDiv {
+    padding-bottom: 2em;
+}
+#resultsDiv a {
+    display: block;
+    padding-top: 0.3em;
+    padding-left: 5%;
+    padding-right: 5%;
+}
+#resultsDiv a .n {
+    padding-right: 0.5em;
+    display: block;
+    float: right;
+    font-size: 90%;
+}
+#resultsDiv a .label {
+    display: block;
+    padding-left: 0.5em;
+    border-bottom: solid 1px #ccc;
+    padding-bottom: 0.3em;
+    font-size: 120%;
+}
+
+#searchBox {
+    text-align: center;
+    width: 90%;
+    font-size: 140%;
+    padding: 0.1em;
+    border: solid 1px #000;
+}
+
+</style>
+
+</head>
+<body>
+<div id="top_bar">
+<div style='font-size:40px;padding:5px 5px 3px 5px;'>
+    Search
+</div>
+</div>
+<div id="map" style="width:70%; height:95%; float:right"></div>
+
+<div style='height:95%;overflow-y:auto;border-right:1px solid #000'>
+
+    <div style='padding-bottom:0.5em;border-bottom:solid 1px #000;margin-bottom:0.5em'>
+
+        <div style='margin:0.3em;text-align:center;clear:both;'>
+            <input id='searchBox' />
+        </div>
+        <div style='text-align:center'>
+            <label>
+                <input id='res' type='checkbox' name='res' value='yes' />
+                Include Halls and Residential Buildings
+            </label>
+        </div>
+        <div style='text-align:center;margin-top:0.3em;font-size:80%'>
+            Type "b12." to search for a specific building number.
+        </div>
+    </div>
+
+    <div id='resultsDiv'>
+    </div>
+</div>
+
+<script src="../resources/leaflet/dist/leaflet.js"></script>
+<script src="../src/leaflet-soton.js"></script>
+<script type="text/javascript">
+    LS.imagePath = '../resources/images/';
+    LS.dataPath = '../data.json';
+
+    var map = LS.map('map', {
+        indoor: true
+    });
+
+    LS.on("dataload", function(data) {
+
+        var buildingsByRef = {};
+        var buildingRoomsByRef = {};
+
+        data.buildings.features.forEach(function(building) {
+            if ("loc_ref" in building.properties) {
+                buildingsByRef[building.properties.loc_ref] = building;
+            }
+        });
+
+        data.buildingParts.features.forEach(function(part) {
+            if (part.properties.buildingPart === "room" && "ref" in part.properties) {
+                buildingRoomsByRef[part.properties.ref] = part;
+            }
+        });
+
+        function matchSlashSeperated(searchText) {
+
+            var parts = searchText.split("/");
+
+            if (parts.length !== 2)
+                return null;
+
+            var building = parts[0].trim();
+            var room = parts[1].trim();
+
+            if (building in buildingsByRef) {
+                if (room in buildingRoomsByRef[building]) {
+                    return buildingsRoomsByRef[building][room];
+                } else {
+                    return buildingsByRef[building];
+                }
+            } else {
+                return null;
+            }
+        }
+
+        var searchBox = document.getElementById("searchBox");
+        var residentialTickBox = document.getElementById("res");
+        var resultsDiv = document.getElementById("resultsDiv");
+
+        var buildings = data.buildings.features.sort(function(a, b) {
+            return a.properties.name.localeCompare(b.properties.name);
+        });
+
+        function filter() {
+            var searchText = searchBox.value.toLowerCase();
+
+            resultsDiv.innerHTML = "";
+
+            var matchingBuildings = [];
+            var matchingBuildingRooms = {};
+
+            buildings.forEach(function(building) {
+                var name = building.properties.name;
+                var loc_ref = building.properties.loc_ref;
+
+                if (name.length === 0)
+                    return;
+
+                if (name.toLowerCase().indexOf(searchText) !== -1 ||
+                    loc_ref.indexOf(searchText) !== -1) {
+
+                    matchingBuildings.push(building);
+                }
+            });
+
+            matchingBuildings.forEach(function(building) {
+                var a = document.createElement("a");
+                a.href = "#";
+
+                a.onclick = function() {
+                    map.showPopupByURI(building.properties.uri);
+                };
+
+                var label = document.createElement("span");
+                label.textContent = building.properties.name;
+                label.className = "label";
+                a.appendChild(label);
+
+                var n = document.createElement("span");
+                n.textContent = building.properties.loc_ref;
+                n.className = "n";
+                a.appendChild(n);
+
+                resultsDiv.appendChild(a);
+            });
+
+            /*if (results.length === 1) {
+                map.showPopupByURI(results[0]);
+            }*/
+        }
+
+        searchBox.onkeyup = filter;
+
+        filter();
+    });
+</script>
+</body>
+</html>
diff --git a/examples/workstations.html b/examples/workstations.html
new file mode 100644
index 0000000..819c41b
--- /dev/null
+++ b/examples/workstations.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Workstations - University of Southampton</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    <link rel="stylesheet" href="../src/leaflet-soton.css" />
+
+    <link rel="stylesheet" href="../resources/leaflet/dist/leaflet.css" />
+
+    <style>
+        body {
+          padding: 0;
+          margin: 0;
+        }
+
+        html, body, #map {
+          height: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+
+    <script src="../resources/leaflet/dist/leaflet.js"></script>
+    <script src="../resources/leaflet-markercluster/dist/leaflet.markercluster.js"></script>
+
+    <script src="../src/leaflet-soton.js"></script>
+
+    <script type="text/javascript">
+        LS.imagePath = '../resources/images/';
+        LS.dataPath = '../data.json';
+
+        var map = LS.map('map', {
+            workstations: true
+        });
+    </script>
+</body>
+</html>
diff --git a/examples/zepler.html b/examples/zepler.html
new file mode 100644
index 0000000..4caf762
--- /dev/null
+++ b/examples/zepler.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Zepler (Building 59)</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    <link rel="stylesheet" href="../src/leaflet-soton.css" />
+
+    <link rel="stylesheet" href="../resources/leaflet/dist/leaflet.css" />
+
+    <style>
+        body {
+          padding: 0;
+          margin: 0;
+        }
+
+        html, body, #map {
+          height: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+
+    <script src="../resources/leaflet/dist/leaflet.js"></script>
+    <script src="../resources/leaflet-markercluster/dist/leaflet.markercluster.js"></script>
+
+    <script src="../src/leaflet-soton.js"></script>
+
+    <script type="text/javascript">
+        LS.imagePath = '../resources/images/';
+        LS.dataPath = '../data.json';
+
+        var map = LS.map('map', {
+            indoor: true,
+            zoom: 20,
+            center: [50.93732, -1.39774],
+            highlight: {
+              "http://id.southampton.ac.uk/building/59": true
+            }
+        });
+    </script>
+</body>
+</html>
author	Christopher Baines <cb15g11@soton.ac.uk>	2014-02-19 22:32:59 +0000
committer	Christopher Baines <cb15g11@soton.ac.uk>	2014-02-19 22:32:59 +0000
commit	e4d1c918444c15e2e1480ecb332e61ec8feb7629 (patch)
tree	d1ca58de732b894ab015a8b5df4581d6ec3be495 /examples
download	leaflet-soton-e4d1c918444c15e2e1480ecb332e61ec8feb7629.tar leaflet-soton-e4d1c918444c15e2e1480ecb332e61ec8feb7629.tar.gz