diff options
| -rw-r--r-- | examples/doors.html | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/examples/doors.html b/examples/doors.html new file mode 100644 index 0000000..a4fb41d --- /dev/null +++ b/examples/doors.html @@ -0,0 +1,150 @@ +<!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="../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 { + height: 100%; + } + + #map, #data { + height: 50%; + } + + #data { + overflow-y: scroll + } + </style> +</head> +<body> + <div id="map"></div> + + <div id="data"></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="../resources/leaflet-indoor/leaflet-indoor.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, + zoom: 20 + }); + + var div = document.getElementById("data"); + + LS.getData(function(data) { + // first index the entrances, as they cannot be looked up easily, + // as they do not have uri's + var entrances = {}; + data.buildingParts.features.forEach(function(part) { + if (part.properties.buildingpart === "entrance") { + entrances[part.id] = part; + } + }); + + var buildingRooms = {}; + + // Find the building rooms (probably something that the library + // should help with, but it does not (yet) + data.buildingParts.features.forEach(function(part) { + if (part.properties.buildingpart === "room") { + if (!("building" in part.properties)) { + console.log(part); + return; + } + + var building = part.properties.building; + + if (building in buildingRooms) { + buildingRooms[building].push(part); + } else { + buildingRooms[building] = [ part ]; + } + } + }); + + console.log(buildingRooms); + + data.buildings.features.forEach(function(building) { + // if the building has some entrances in the data + if ("entrances" in building.properties) { + + var title = document.createElement("h2"); + title.textContent = building.properties.name; + + if (building.properties.uri in buildingRooms) { + var rooms = buildingRooms[building.properties.uri]; + + var roomLocations = rooms.map(function(room) { + return L.GeoJSON.coordsToLatLng(room.properties.center); + }); + } + + var entranceLocations = building.properties.entrances.map(function(entrance_id) { + var entrance = entrances[entrance_id]; + return L.GeoJSON.coordsToLatLng(entrance.geometry.coordinates); + }); + + div.appendChild(title); + + // create the list of entrances + var ul = document.createElement("ul"); + + building.properties.entrances.forEach(function(entrance_id, index) { + var entrance = entrances[entrance_id]; + + var a = document.createElement("a"); + a.textContent = entrance_id + " (level " + entrance.properties.level + ")"; + a.href = "#"; + + // when the entrance is clicked + a.onclick = function() { + var coordinates = entranceLocations[index]; + + console.log(rooms); + + // pan to the entrance + map.panTo(coordinates); + + // display the relevant level + map.setLevel(entrance.properties.level); + + return false; + }; + + var li = document.createElement("li"); + li.appendChild(a); + + ul.appendChild(li); + }); + + div.appendChild(ul); + } + }); + }); + + L.control.locate().addTo(map); + </script> +</body> +</html> |