summaryrefslogtreecommitdiff
path: root/examples
diff options
context:
space:
mode:
Diffstat (limited to 'examples')
-rw-r--r--examples/doors.html150
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>