summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--examples/teachingrooms.html231
1 files changed, 231 insertions, 0 deletions
diff --git a/examples/teachingrooms.html b/examples/teachingrooms.html
new file mode 100644
index 0000000..36ab2a1
--- /dev/null
+++ b/examples/teachingrooms.html
@@ -0,0 +1,231 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Teaching Rooms - 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%;
+ }
+
+ .mycluster {
+ width: 40px;
+ height: 40px;
+ background-color: greenyellow;
+ text-align: center;
+ font-size: 24px;
+ }
+ </style>
+</head>
+<body>
+ <div id="map"></div>
+
+ <script src="../resources/leaflet/dist/leaflet-src.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="../resources/leaflet-route/leaflet-route.js"></script>
+
+ <script src="../src/leaflet-soton.js"></script>
+
+ <script type="text/javascript">
+ LS.imagePath = '../resources/images/';
+ LS.dataPath = '../data.json';
+
+ (function() {
+ function renderThingSet(set, map, options, close) {
+ var content_ids = Object.keys( set );
+ var content = document.createElement( 'div' );
+ content_ids.forEach(function(thing_id) {
+ var info = set[thing_id];
+ var div = document.createElement('div');
+
+ if (info.geo) {
+ var link = document.createElement("a");
+ link.href = "#";
+ div.appendChild(link);
+ link.textContent = info.label
+
+ link.onclick = function() {
+ var feature = LS.getFeatureByURI(info.uri);
+
+ close();
+
+ map.panByURI(info.uri, 20, {
+ animate: true
+ });
+ };
+ } else {
+ var span = document.createElement("span");
+ span.textContent = info.label + " ";
+
+ div.appendChild(span);
+
+ var link = document.createElement('a');
+ link.setAttribute('href', info.uri);
+ link.setAttribute('target', '_blank');
+ link.className = 'ls-popup-uri';
+ link.textContent = "(Full Information)";
+
+ div.appendChild(link);
+ }
+
+ content.appendChild(div);
+ });
+ return content;
+ }
+
+ LS.infoTemplates.building = function(properties, options, map, close) {
+ var content = document.createDocumentFragment();
+
+ var floors = {};
+ var rooms = properties.rooms;
+
+ for (var level in rooms) {
+ var levelRooms = rooms[level];
+
+ levelRooms.sort(function(a, b) {
+ if (a > b) {
+ return 1;
+ }
+ return -1;
+ });
+
+ levelRooms.forEach(function(uri) {
+ var room = LS.getFeatureByURI(uri);
+
+ if (room === null) {
+ console.error("Unable to find room " + uri);
+ return;
+ }
+
+ if (!room.properties.teaching) {
+ return;
+ }
+
+ var info = {
+ label: room.properties.ref,
+ uri: uri,
+ geo: ("center" in room.properties)
+ };
+
+ if ("name" in room.properties) {
+ info.label += ": " + room.properties.name;
+ }
+
+ if(!(level in floors)) {
+ floors[level] = {};
+ }
+
+ floors[level][uri] = info;
+ });
+ }
+
+ var floor_ids = Object.keys(floors);
+
+ floor_ids.sort(function(a, b) {
+ if (a === "Unknown") return 1;
+ if (b === "Unknown") return -1;
+
+ a = parseInt(a, 10);
+ b = parseInt(b, 10);
+
+ if (a < b) {
+ return -1;
+ }
+ return 1;
+ });
+
+ floor_ids.forEach(function(floor_id) {
+ var h4 = document.createElement( "h4" );
+ content.appendChild(h4);
+ h4.textContent = "Floor "+floor_id;
+ content.appendChild(renderThingSet(floors[floor_id], map, options, close) );
+ });
+
+ return content;
+ };
+
+ var map = LS.map('map', {
+ workstations: false,
+ indoor: true
+ });
+
+ LS.getData(function(data) {
+ var markers = L.markerClusterGroup({
+ iconCreateFunction: function (cluster) {
+ var markers = cluster.getAllChildMarkers();
+
+ var n = 0;
+
+ markers.forEach(function(marker) {
+ n += marker.number;
+ });
+
+ return L.divIcon({
+ html: n,
+ className: 'mycluster',
+ iconSize: L.point(40, 40)
+ });
+ },
+ spiderfyOnMaxZoom: false,
+ showCoverageOnHover: false,
+ zoomToBoundsOnClick: false,
+ singleMarkerMode: true
+ });
+
+ data.buildings.features.forEach(function(building) {
+ var roomsMissing = 0;
+
+ if (!("rooms" in building.properties)) {
+ return;
+ }
+
+ var rooms = building.properties.rooms;
+
+ for (var level in rooms) {
+ var levelRooms = rooms[level];
+
+ levelRooms.forEach(function(roomURI) {
+ room = LS.getFeatureByURI(roomURI);
+
+ if (!room.properties.teaching) {
+ return;
+ }
+
+ if (!("center" in room.properties)) {
+ roomsMissing += 1;
+ }
+ });
+ }
+
+ if (roomsMissing != 0) {
+ var m = L.marker(building.properties.center, {
+ title: building.properties["loc_ref"]
+ });
+
+ m.number = roomsMissing;
+ markers.addLayer(m);
+ }
+ });
+
+ map.addLayer(markers);
+ });
+
+ L.control.locate().addTo(map);
+ })();
+ </script>
+</body>
+</html>