aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.gitignore4
-rw-r--r--.gitmodules15
-rw-r--r--Gruntfile.js113
-rw-r--r--LICENCE19
-rw-r--r--README45
-rw-r--r--index.html238
m---------libraries/bootstrap0
m---------libraries/jquery0
m---------libraries/leaflet-soton0
m---------libraries/list.js0
m---------libraries/typeahead.js0
-rw-r--r--package.json12
-rw-r--r--scripts.js296
-rw-r--r--style.css172
14 files changed, 914 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..f789c72
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+dist/
+*.swp
+*~
+node_modules/
diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000..c758ebf
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,15 @@
+[submodule "libraries/leaflet-soton"]
+ path = libraries/leaflet-soton
+ url = git://git.cbaines.net/leaflet-soton
+[submodule "libraries/typeahead.js"]
+ path = libraries/typeahead.js
+ url = https://github.com/twitter/typeahead.js.git
+[submodule "libraries/list.js"]
+ path = libraries/list.js
+ url = https://github.com/javve/list.js.git
+[submodule "libraries/jquery"]
+ path = libraries/jquery
+ url = https://github.com/jquery/jquery.git
+[submodule "libraries/bootstrap"]
+ path = libraries/bootstrap
+ url = https://github.com/twbs/bootstrap.git
diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 0000000..ee4e1c7
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,113 @@
+module.exports = function(grunt) {
+
+ grunt.initConfig({
+ pkg: grunt.file.readJSON('package.json'),
+ concat: {
+ js: {
+ options: {
+ separator: ';'
+ },
+ src: [
+ 'libraries/jquery/dist/jquery.js',
+ 'libraries/bootstrap/dist/js/bootstrap.js',
+ 'libraries/typeahead.js/dist/typeahead.bundle.js',
+ 'libraries/list.js/dist/list.js',
+ 'libraries/leaflet-soton/resources/leaflet/dist/leaflet.js',
+ 'libraries/leaflet-soton/resources/leaflet-markercluster/dist/leaflet.markercluster.js',
+ 'libraries/leaflet-soton/resources/leaflet-locatecontrol/src/L.Control.Locate.js',
+ 'libraries/leaflet-soton/resources/leaflet-hash/leaflet-hash.js',
+ 'libraries/leaflet-soton/resources/leaflet-indoor/leaflet-indoor.js',
+ 'libraries/leaflet-soton/resources/leaflet-route/leaflet-route.js',
+ 'libraries/leaflet-soton/src/leaflet-soton.js',
+ 'scripts.js'
+ ],
+ dest: 'dist/scripts.js',
+ nonull: true
+ },
+ css: {
+ src: [
+ 'libraries/bootstrap/dist/css/bootstrap.css',
+ 'libraries/leaflet-soton/resources/leaflet/dist/leaflet.css',
+ 'libraries/leaflet-soton/resources/leaflet-markercluster/dist/MarkerCluster.css',
+ 'libraries/leaflet-soton/resources/leaflet-locatecontrol/src/L.Control.Locate.css',
+ 'libraries/leaflet-soton/src/leaflet-soton.css',
+ 'style.css'
+ ],
+ dest: 'dist/css/style.css',
+ nonull: true
+ }
+ },
+ uglify: {
+ options: {
+ banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
+ },
+ dist: {
+ files: {
+ 'dist/scripts.js': ['<%= concat.js.dest %>']
+ }
+ }
+ },
+ cssmin: {
+ add_banner: {
+ options: {
+ banner: '/* My minified css file */'
+ },
+ files: {
+ 'dist/css/style.css': ['<%= concat.css.dest %>']
+ }
+ }
+ },
+ clean: {
+ build: ['dist']
+ },
+ copy: {
+ index: {
+ src: 'index.html',
+ dest: 'dist/index.html',
+ nonull: true
+ },
+ data: {
+ src: 'libraries/leaflet-soton/data.json',
+ dest: 'dist/data.json',
+ nonull: true
+ },
+ fonts: {
+ src: 'libraries/bootstrap/dist/fonts/*',
+ dest: 'dist/fonts/',
+ expand: 'false',
+ flatten: true,
+ nonull: true
+ },
+ images: {
+ src: 'libraries/leaflet-soton/resources/images/*',
+ dest: 'dist/images/',
+ flatten: true,
+ expand: 'false',
+ nonull: true
+ },
+ logos: {
+ src: 'libraries/leaflet-soton/resources/images/logos/*',
+ dest: 'dist/images/logos/',
+ flatten: true,
+ expand: 'false',
+ nonull: true
+ },
+ locateimage: {
+ src: 'libraries/leaflet-soton/resources/leaflet-locatecontrol/src/images/*',
+ dest: 'dist/css/images/',
+ flatten: true,
+ expand: 'false',
+ nonull: true
+ }
+ }
+ });
+
+ grunt.loadNpmTasks('grunt-contrib-uglify');
+ grunt.loadNpmTasks('grunt-contrib-cssmin');
+ grunt.loadNpmTasks('grunt-contrib-concat');
+ grunt.loadNpmTasks('grunt-contrib-clean');
+ grunt.loadNpmTasks('grunt-contrib-copy');
+
+ grunt.registerTask('default', ['clean:build', 'concat', 'copy']);
+ grunt.registerTask('release', ['clean:build', 'concat', 'uglify', 'cssmin', 'copy']);
+};
diff --git a/LICENCE b/LICENCE
new file mode 100644
index 0000000..5c0ce0e
--- /dev/null
+++ b/LICENCE
@@ -0,0 +1,19 @@
+Copyright (c) 2014 Christopher Baines
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README b/README
new file mode 100644
index 0000000..dc1eebb
--- /dev/null
+++ b/README
@@ -0,0 +1,45 @@
+
+# Building
+
+First build all the libraries, described below, then run:
+
+ grunt
+
+Or, to build for release (with smaller js and css files):
+
+ grunt release
+
+# Building the libraries
+
+## jquery
+
+ npm run build
+
+## bootstrap
+
+ npm install
+ grunt dist
+
+## leaflet-soton
+
+ git submodule update --init
+
+### leaflet
+
+ npm install -g jake
+ npm install
+
+This requires a local OSM database, and to setup config.json (use the template
+config.json.default).
+
+ ./create-data.js
+
+## list.js
+
+ npm install
+ grunt dist
+
+## typeahead.js
+
+ npm install
+ grunt
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b1a03db
--- /dev/null
+++ b/index.html
@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
+ <meta name="mobile-web-app-capable" content="yes">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <meta name="description" content="">
+ <meta name="author" content="Christopher Baines <cb15g11@soton.ac.uk>">
+ <title>Map - University of Southampton</title>
+
+ <link rel="stylesheet" href="css/style.css">
+ </head>
+
+ <body>
+ <div class="navbar-inverse navbar-fixed-top" role="navigation">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle visible-xs" onclick="$('.navbar-collapse').collapse('toggle'); return false;">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">Map<span class="hidden-xs"> - University of Southampton</span></a>
+ </div>
+ <div class="navbar-collapse collapse">
+ <form class="navbar-form navbar-right" role="search">
+ <div class="form-group has-feedback navbar-right">
+ <input id="searchbox" type="text" placeholder="Search" class="form-control">
+ <span id="searchicon" class="glyphicon glyphicon-search form-control-feedback"></span>
+ </div>
+ </form>
+ <ul class="nav navbar-nav">
+ <li>
+ <a href="#" data-toggle="collapse"
+ data-target=".navbar-collapse.in"
+ onclick="$('#linksModal').modal('show');
+ return false;">
+ More Maps
+ </a>
+ </li>
+ <li>
+ <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" onclick="$('#aboutModal').modal('show'); return false;">
+ About
+ </a>
+ </li>
+ <li id="navBuildingsLi">
+ <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="buildingsSidebarLink">
+ Buildings
+ </a>
+ </li>
+ <li id="navSitesLi">
+ <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="sitesSidebarLink">
+ Sites
+ </a>
+ </li>
+ </ul>
+ </div><!--/.navbar-collapse -->
+ </div>
+
+ <div id="container">
+ <div id="buildingsSidebar" style="display: none;">
+ <div class="sidebar-wrapper">
+ <div class="panel panel-default" style="margin: 0px; border: none;
+ border-radius: 0px; -webkit-box-shadow: none; box-shadow: none;"
+ id="buildings">
+ <div class="panel-heading">
+ <h3 class="panel-title">Buildings
+ <button id="buildingsSidebarHideButton"
+ type="button"
+ class="btn btn-xs btn-default pull-right"
+ style="margin-top: -2px;" >
+ <i class="glyphicon glyphicon-chevron-left"></i>
+ </button>
+ </h3>
+ </div>
+ <div class="panel-body">
+ <div class="row">
+ <div class="col-xs-8 col-md-8">
+ <input type="text" class="form-control search" placeholder="Filter" />
+ </div>
+ <div class="col-xs-4 col-md-4">
+ <button
+ type="button"
+ class="btn btn-primary pull-right sort"
+ data-sort="feature-name"
+ id="sort-btn">
+ <i class="glyphicon glyphicon-sort"></i>
+ &nbsp;&nbsp;Sort
+ </button>
+ </div>
+ </div>
+ </div>
+ <div class="sidebar-table">
+ <table class="table table-hover" id="buildingsList">
+ <thead class="hidden">
+ <tr>
+ <th>Ref</th>
+ <tr>
+ <tr>
+ <th>Name</th>
+ <tr>
+ <tr>
+ <th>Chevron</th>
+ <tr>
+ </thead>
+ <tbody class="list"></tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id="sitesSidebar" style="display: none;">
+ <div class="sidebar-wrapper">
+ <div class="panel panel-default" style="margin: 0px; border: none;
+ border-radius: 0px; -webkit-box-shadow: none; box-shadow: none;"
+ id="sites">
+ <div class="panel-heading">
+ <h3 class="panel-title">Sites
+ <button id="sitesSidebarHideButton"
+ type="button"
+ class="btn btn-xs btn-default pull-right"
+ style="margin-top: -2px;" >
+ <i class="glyphicon glyphicon-chevron-left"></i>
+ </button>
+ </h3>
+ </div>
+ <div class="panel-body">
+ <div class="row">
+ <div class="col-xs-8 col-md-8">
+ <input type="text" class="form-control search" placeholder="Filter" />
+ </div>
+ <div class="col-xs-4 col-md-4">
+ <button
+ type="button"
+ class="btn btn-primary pull-right sort"
+ data-sort="feature-name"
+ id="sort-btn">
+ <i class="glyphicon glyphicon-sort"></i>
+ &nbsp;&nbsp;Sort
+ </button>
+ </div>
+ </div>
+ </div>
+ <div class="sidebar-table">
+ <table class="table table-hover" id="sitesList">
+ <thead class="hidden">
+ <tr>
+ <th>Ref</th>
+ <tr>
+ <tr>
+ <th>Name</th>
+ <tr>
+ <tr>
+ <th>Chevron</th>
+ <tr>
+ </thead>
+ <tbody class="list"></tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div id="map"></div>
+ </div>
+
+ <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog">
+ <div class="modal-dialog modal-lg">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
+ <h4 class="modal-title">About</h4>
+ </div>
+ <div class="modal-body">
+ This application uses the following libraries and datasets.
+
+ <h5>Libraries</h5>
+ <ul>
+ <li>leaflet</li>
+ <li>leaflet-locatecontrol</li>
+ <li>leaflet-markercluster</li>
+ </ul>
+
+ <h5>Data</h5>
+ <ul>
+ <li>OpenStreetMap</li>
+ <li>University of Southampton</li>
+ <li>mfd-location</li>
+ <li>library data</li>
+ </ul>
+ </li>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <div class="modal fade" id="linksModal" tabindex="-1" role="dialog">
+ <div class="modal-dialog modal-lg">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
+ <h4 class="modal-title">More Maps</h4>
+ </div>
+ <div class="modal-body">
+ <p>The University currently has no 'official' digital mapping system. However, there are several systems produced by various people within the organisation.</p>
+ <p><a href="http://opendatamap.ecs.soton.ac.uk/">Open Data Map</a> by Colin Williams</p>
+ <p>Additionally, we have official printed maps available from our central website.</p>
+ <p><a href="http://www.southampton.ac.uk/visitus/campuses/">http://www.southampton.ac.uk/visitus/campuses/</a></p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <div class="modal fade" id="featureModal" tabindex="-1" role="dialog">
+ <div class="modal-dialog modal-lg">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
+ <h4 class="modal-title text-primary" id="feature-title"></h4>
+ </div>
+ <div class="modal-body" id="feature-info"></div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <script src="scripts.js"></script>
+ </body>
+</html>
diff --git a/libraries/bootstrap b/libraries/bootstrap
new file mode 160000
+Subproject c068162161154a4b85110ea1e7dd3d7897ce2b7
diff --git a/libraries/jquery b/libraries/jquery
new file mode 160000
+Subproject b807aedb7fee321fb3aa5d156a5a256ab0634e2
diff --git a/libraries/leaflet-soton b/libraries/leaflet-soton
new file mode 160000
+Subproject 47f0d35c5d1e7b210fce4928d62cdfe0ae5b596
diff --git a/libraries/list.js b/libraries/list.js
new file mode 160000
+Subproject 1ea294a7dde81f92d949bc056b52d175cbaad19
diff --git a/libraries/typeahead.js b/libraries/typeahead.js
new file mode 160000
+Subproject cc561bf1c6720e6664464fa065105143523c7e7
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..c987bec
--- /dev/null
+++ b/package.json
@@ -0,0 +1,12 @@
+{
+ "name": "maps.southampton.ac.uk",
+ "version": "0.1.0",
+ "devDependencies": {
+ "grunt": "~0.4.5",
+ "grunt-contrib-concat": "~0.5.0",
+ "grunt-contrib-uglify": "~0.5.0",
+ "grunt-contrib-cssmin": "~0.10.0",
+ "grunt-contrib-copy": "~0.5.0",
+ "grunt-contrib-clean": "~0.6.0"
+ }
+}
diff --git a/scripts.js b/scripts.js
new file mode 100644
index 0000000..982e2d7
--- /dev/null
+++ b/scripts.js
@@ -0,0 +1,296 @@
+(function() {
+ "use strict";
+
+ LS.imagePath = 'images/';
+ LS.dataPath = 'data.json';
+
+ var $buildingsSidebar = $('#buildingsSidebar');
+ var $sitesSidebar = $('#sitesSidebar');
+
+ var $navBuildingsLi = $('#navBuildingsLi');
+ var $navSitesLi = $('#navSitesLi');
+
+ function hideSitesSidebar() {
+ $sitesSidebar.hide();
+ $navSitesLi.removeClass("active");
+ }
+
+ function hideBuildingsSidebar() {
+ $buildingsSidebar.hide();
+ $navBuildingsLi.removeClass("active");
+ }
+
+ var buildingsSidebarLink = document.getElementById("buildingsSidebarLink")
+ buildingsSidebarLink.onclick = function() {
+ hideSitesSidebar();
+
+ $navBuildingsLi.toggleClass("active");
+ $buildingsSidebar.toggle();
+
+ map.invalidateSize();
+
+ return false;
+ };
+
+ var sitesSidebarLink = document.getElementById("sitesSidebarLink")
+ sitesSidebarLink.onclick = function() {
+ hideBuildingsSidebar();
+
+ $navSitesLi.toggleClass("active");
+ $sitesSidebar.toggle();
+
+ map.invalidateSize();
+
+ return false;
+ };
+
+ var buildingsSidebarHideButton = document.getElementById("buildingsSidebarHideButton");
+ buildingsSidebarHideButton.onclick = function() {
+ hideBuildingsSidebar();
+
+ map.invalidateSize();
+ return false;
+ };
+
+ var sitesSidebarHideButton = document.getElementById("sitesSidebarHideButton");
+ sitesSidebarHideButton.onclick = function() {
+ hideSitesSidebar();
+
+ map.invalidateSize();
+
+ return false;
+ };
+
+ var map = LS.map('map', {
+ workstations: true,
+ indoor: true,
+ popupWidth: 550,
+ popupHeight: 550,
+ zoomControl: false,
+ levelControlPosition: 'bottomleft'
+ });
+
+ map.showInfo = function(content, latlng, options) {
+ var $content = $(content);
+
+ var contentTitle = $content.children('h2');
+ var titleText = contentTitle.text();
+ contentTitle.remove();
+
+ $("#feature-title").html(titleText);
+ $("#feature-info").html(content);
+ $("#featureModal").modal("show");
+ };
+
+ map.closeInfo = function() {
+ $("#featureModal").modal("hide");
+ };
+
+ var zoomControl = L.control.zoom({
+ position: "bottomright"
+ }).addTo(map);
+
+ /* GPS enabled geolocation control set to follow the user's location */
+ var locateControl = L.control.locate({
+ position: "bottomright",
+ drawCircle: true,
+ follow: true,
+ setView: true,
+ keepCurrentZoomLevel: true,
+ markerStyle: {
+ weight: 1,
+ opacity: 0.8,
+ fillOpacity: 0.8
+ },
+ circleStyle: {
+ weight: 1,
+ clickable: false
+ },
+ icon: "icon-direction",
+ metric: false,
+ strings: {
+ title: "My location",
+ popup: "You are within {distance} {unit} from this point",
+ outsideMapBoundsMsg: "You seem located outside the boundaries of the map"
+ },
+ locateOptions: {
+ maxZoom: 18,
+ watch: true,
+ enableHighAccuracy: true,
+ maximumAge: 10000,
+ timeout: 10000
+ }
+ }).addTo(map);
+
+ /* Larger screens get expanded layer control and visible sidebar */
+ if (document.body.clientWidth <= 767) {
+ var isCollapsed = true;
+ } else {
+ var isCollapsed = false;
+ }
+
+ /* Highlight search box text on click */
+ $("#searchbox").click(function () {
+ $(this).select();
+ });
+
+ /* Typeahead search functionality */
+ LS.getData(function(data) {
+
+ function buildRow(first, second) {
+ var tr = document.createElement("tr");
+ tr.style = "cursor: pointer;"
+
+ var reftd = document.createElement("td");
+ reftd.className = "feature-ref";
+ reftd.style.verticalAlign = "middle";
+ reftd.appendChild(first);
+ tr.appendChild(reftd);
+
+ var featuretd = document.createElement("td");
+ featuretd.className = "feature-name";
+ featuretd.appendChild(second);
+ tr.appendChild(featuretd);
+
+ var arrowtd = document.createElement("td");
+ arrowtd.style.verticalAlign = "middle";
+ var i = document.createElement("i");
+ i.className = "glyphicon glyphicon-chevron-right pull-right";
+ arrowtd.appendChild(i);
+ tr.appendChild(arrowtd);
+
+ return tr;
+ }
+
+ function show(uri) {
+ return function() {
+ map.panByURI(uri);
+
+ /* Hide sidebars and go to the map on small screens */
+ if (document.body.clientWidth <= 767) {
+ hideSitesSidebar();
+ hideBuildingsSidebar();
+
+ map.invalidateSize();
+ }
+ };
+ }
+
+ var buildingstbody = $("#buildingsList tbody");
+
+ data.buildings.features.forEach(function(building) {
+ if (!("loc_ref" in building.properties) ||
+ building.properties.name.length === 0) {
+ return;
+ }
+
+ var loc_ref = document.createTextNode(building.properties.loc_ref);
+ var name = document.createTextNode(building.properties.name);
+ var tr = buildRow(loc_ref, name);
+
+ tr.onclick = show(building.properties.uri);
+
+ buildingstbody.append(tr);
+ });
+
+ var buildingsList = new List("buildings", {
+ valueNames: [
+ "feature-ref",
+ "feature-name"
+ ]
+ });
+ buildingsList.sort("feature-name", {
+ order:"asc"
+ });
+
+ buildingsList.on("filterStart", function() {
+ console.log("filterComplete");
+
+ console.log(buildingsList.matchingItems);
+ });
+
+ var sitestbody = $("#sitesList tbody");
+
+ data.sites.features.forEach(function(site) {
+ if (!("name" in site.properties)) {
+ return;
+ }
+
+ var loc_ref = document.createTextNode(site.properties.loc_ref);
+ var name = document.createTextNode(site.properties.name);
+ var tr = buildRow(loc_ref, name);
+
+ tr.onclick = show(site.properties.uri);
+
+ sitestbody.append(tr);
+ });
+
+ var sitesList = new List("sites", {valueNames: ["feature-ref", "feature-name"]});
+ sitesList.sort("feature-name", {order:"asc"});
+
+ var buildingsBH = new Bloodhound({
+ name: "Buildings",
+ datumTokenizer: function (d) {
+ return Bloodhound.tokenizers.whitespace(d.properties.loc_ref + " " + d.properties.name);
+ },
+ queryTokenizer: Bloodhound.tokenizers.whitespace,
+ local: data.buildings.features,
+ limit: 10
+ });
+
+ buildingsBH.initialize();
+
+ var sitesBH = new Bloodhound({
+ name: "Buildings",
+ datumTokenizer: function (d) {
+ return Bloodhound.tokenizers.whitespace(d.properties.loc_ref + " " +d.properties.name);
+ },
+ queryTokenizer: Bloodhound.tokenizers.whitespace,
+ local: data.sites.features,
+ limit: 10
+ });
+
+ sitesBH.initialize();
+
+ /* instantiate the typeahead UI */
+ $("#searchbox").typeahead({
+ minLength: 1,
+ highlight: true,
+ hint: false
+ }, {
+ name: "Buildings",
+ displayKey: "name",
+ source: buildingsBH.ttAdapter(),
+ templates: {
+ header: "<h4 class='typeahead-header'>Buildings</h4>",
+ suggestion: function(feature) {
+ return feature.properties.name + "<br>&nbsp;<small>" + feature.properties.loc_ref + "</small>";
+ }
+ }
+ }, {
+ name: "Sites",
+ displayKey: "name",
+ source: sitesBH.ttAdapter(),
+ templates: {
+ header: "<h4 class='typeahead-header'>Sites</h4>",
+ suggestion: function(feature) {
+ return feature.properties.name + "<br>&nbsp;<small>" + feature.properties.loc_ref + "</small>";
+ }
+ }
+ }).on("typeahead:selected", function (obj, feature) {
+ map.panByURI(feature.properties.uri);
+
+ if ($(".navbar-collapse").height() > 50) {
+ $(".navbar-collapse").collapse("hide");
+ }
+ }).on("typeahead:opened", function () {
+ $(".navbar-collapse.in").css("max-height", $(document).height() - $(".navbar-header").height());
+ $(".navbar-collapse.in").css("height", $(document).height() - $(".navbar-header").height());
+ }).on("typeahead:closed", function () {
+ $(".navbar-collapse.in").css("max-height", "");
+ $(".navbar-collapse.in").css("height", "");
+ });
+ $(".twitter-typeahead").css("position", "static");
+ $(".twitter-typeahead").css("display", "block");
+ });
+})();
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..71cf824
--- /dev/null
+++ b/style.css
@@ -0,0 +1,172 @@
+html, body, #container {
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+}
+
+body {
+ padding-top: 50px;
+}
+
+input[type="radio"], input[type="checkbox"] {
+ margin: 0;
+}
+
+#buildingsSidebar, #sitesSidebar, #busRoutesSidebar {
+ width: 250px;
+ height: 100%;
+ max-width: 100%;
+ float: left;
+ -webkit-transition: all 0.25s ease-out;
+ -moz-transition: all 0.25s ease-out;
+ transition: all 0.25s ease-out;
+}
+
+#map {
+ width: auto;
+ height: 100%;
+ box-shadow: 0 0 10px rgba(0,0,0,0.5);
+}
+
+.sidebar-wrapper {
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+
+.sidebar-table {
+ position: absolute;
+ width: 100%;
+ top: 100px;
+ bottom: 0px;
+ overflow: auto;
+}
+
+.table {
+ margin-bottom: 0px;
+}
+
+.navbar-inverse .navbar-brand {
+ font-weight: bold;
+ font-size: 25px;
+ color: white;
+}
+
+.navbar-nav > li > a {
+ color: white;
+}
+
+.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
+ background-color: #004462;
+ color: #fff;
+}
+
+.navbar-inverse .navbar-nav > li > a {
+ color: #fff;
+}
+
+.navbar-inverse {
+ background-color: #005c84;
+}
+
+.navbar-collapse.in {
+ overflow-y: hidden;
+}
+
+.navbar-header .navbar-icon-container {
+ margin-right: 15px;
+}
+
+.navbar-header .navbar-icon {
+ line-height: 50px;
+ height: 50px;
+}
+
+.navbar-header a.navbar-icon {
+ margin-left: 25px;
+}
+
+.navbar-header .navbar-toggle .icon-bar {
+ background-color: #ffffff;
+}
+
+.typeahead {
+ background-color: #FFFFFF;
+}
+
+.tt-dropdown-menu {
+ background-color: #FFFFFF;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 4px 4px 4px 4px;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ margin-top: 4px;
+ padding: 4px 0;
+ width: 100%;
+ max-height: 300px;
+ overflow: auto;
+}
+
+.tt-suggestion {
+ font-size: 14px;
+ line-height: 20px;
+ padding: 3px 10px;
+}
+
+.tt-suggestion.tt-cursor {
+ background-color: #0097CF;
+ color: #FFFFFF;
+ cursor: pointer;
+}
+
+.tt-suggestion p {
+ margin: 0;
+}
+
+.tt-suggestion + .tt-suggestion {
+ border-top: 1px solid #ccc;
+}
+
+.typeahead-header {
+ margin: 0 5px 5px 5px;
+ padding: 3px 0;
+ border-bottom: 2px solid #333;
+}
+
+.has-feedback .form-control-feedback {
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: block;
+ width: 34px;
+ height: 34px;
+ line-height: 34px;
+ text-align: center;
+}
+
+@media (max-width: 992px) {
+ .navbar .navbar-brand {
+ font-size: 18px;
+ }
+}
+
+@media (max-width: 767px){
+ .url-break {
+ word-break: break-all;
+ word-break: break-word;
+ -webkit-hyphens: auto;
+ hyphens: auto;
+ }
+ #sidebar {
+ display: none;
+ }
+}
+
+/* Print Handling */
+@media print {
+ .navbar {
+ display: none !important;
+ }
+ .leaflet-control-container {
+ display: none !important;
+ }
+}
generated by cgit v1.2.3 (git 2.45.0) at 2024-11-21 14:34:48 +0000