diff options
| 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/search.html | |
| download | leaflet-soton-e4d1c918444c15e2e1480ecb332e61ec8feb7629.tar leaflet-soton-e4d1c918444c15e2e1480ecb332e61ec8feb7629.tar.gz | |
Initial commit
Diffstat (limited to 'examples/search.html')
| -rw-r--r-- | examples/search.html | 222 |
1 files changed, 222 insertions, 0 deletions
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> |