From e4d1c918444c15e2e1480ecb332e61ec8feb7629 Mon Sep 17 00:00:00 2001 From: Christopher Baines Date: Wed, 19 Feb 2014 22:32:59 +0000 Subject: Initial commit --- examples/basic.html | 34 ++++ examples/buildingsearch.html | 177 ++++++++++++++++++++ examples/full.html | 45 ++++++ examples/index.html | 372 +++++++++++++++++++++++++++++++++++++++++++ examples/indoor.html | 37 +++++ examples/search.html | 222 ++++++++++++++++++++++++++ examples/workstations.html | 39 +++++ examples/zepler.html | 44 +++++ 8 files changed, 970 insertions(+) create mode 100644 examples/basic.html create mode 100644 examples/buildingsearch.html create mode 100644 examples/full.html create mode 100644 examples/index.html create mode 100644 examples/indoor.html create mode 100644 examples/search.html create mode 100644 examples/workstations.html create mode 100644 examples/zepler.html (limited to 'examples') diff --git a/examples/basic.html b/examples/basic.html new file mode 100644 index 0000000..161ecaa --- /dev/null +++ b/examples/basic.html @@ -0,0 +1,34 @@ + + + + Map - University of Southampton + + + + + + + + +
+ + + + + + + + diff --git a/examples/buildingsearch.html b/examples/buildingsearch.html new file mode 100644 index 0000000..7ee8f40 --- /dev/null +++ b/examples/buildingsearch.html @@ -0,0 +1,177 @@ + + + + + + + + + + + + +
+
+ Building Search +
+
+
+ +
+ +
+ +
+ +
+
+ +
+
+ Type "b12." to search for a specific building number. +
+
+ +
+
+
+ + + + + + diff --git a/examples/full.html b/examples/full.html new file mode 100644 index 0000000..02d1c96 --- /dev/null +++ b/examples/full.html @@ -0,0 +1,45 @@ + + + + Workstations - University of Southampton + + + + + + + + + + +
+ + + + + + + + + + + diff --git a/examples/index.html b/examples/index.html new file mode 100644 index 0000000..997e65d --- /dev/null +++ b/examples/index.html @@ -0,0 +1,372 @@ + + + + Leaflet Soton - Documentation + + + + + + + + + + + + + + + +

An Introduction to OpenStreetMap and the University of Southampton

+ +

OpenStreetMap

+ + + + + +
+

+ + The OpenStreetMap project was started in 2004 with the aim of + creating a free map of the world. The core, but perhaps less + obvious output from the project is the data. You can see an + example of some OSM data, represented in XML on the right. + +

+

+ + This abreviated data describes the Zepler building on Highfield + Campus. You can see in the tags, that the building name, + number, and uri are present. + +

+ 		+ +
+ +

Slippy Maps

+ + + + + + + + + +
+ + +

Data to Images (or Tiles)

+

+ + XML is perhaps not the best way to view the data if you want to + use if for navigation, so this data can be rendered in to + images for use in a map. Shown here is the "Standard" rendering + of part of Highfield campus. + +

+

+ + This tile has been downloaded from the OpenStreetMap tile + servers. A tileserver is normally composed of a database + (usually postgresql with postgis), a tile rendering stack + (e.g. renderd and mapnik) and a webserver (e.g. apache with + mod_tile). + +

+
+

Leaflet

+

+ + There are a few libraries that can handle displaying a "slippy" + map, the one in use here is called leaflet. Tiles like the one + shown above are combined together in to a grid that can be + moved with the mouse. + +

+

+ + The javascript used to create the map seen on the right is shown below. + +

+ + 
+                var map1 = L.map('zepler-osm');
+
+                map1.setView([50.93733, -1.39779], 19);
+
+                L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+                    maxZoom: 19
+                }).addTo(map1);
+
+ 		+
+
+

Custom Maps for the University

+ + + + + +
+
+ 		+

Custom Rendering (sum-carto)

+

+ + Jumping back to tileservers, the rendering stack decides how to + display the data as an image. Mapnik, which is commonly used + has an xml stylesheet that it uses, this can be (and in the + case of the "Standard" OSM style, is) generated from another + CSS like language called carto. + +

+

+ + The "Standard" OSM rendering has some disadvantages for the + University. Probably the biggest is that it shows some + irelevent things, e.g. housenumbers for the surrounding + residential area, it also does not show relevent things e.g. + building numbers, cycle parking, ... + +

+

+ + To the left, you can see the same view as before, but this + time, the data has been rendered according to a different + stylesheet. Notice that the buildings number is displayed + below the name, and that some cycle parking is shown just to + the top right of the Zepler building (green P). + +

+

+ + Currently there are two tileservers hosting this University + specific tileset. Inside ECS there is + kanga-cb15g11.ecs.soton.ac.uk, which is updated daily. Outside + of ECS, there is altair.cbaines.net, which is rarely updated. + +

+ 
+                var map2 = L.map('sum-carto');
+
+                map2.setView([50.93733, -1.39779], 19);
+
+                L.tileLayer('http://kanga-cb15g11.ecs.soton.ac.uk/sum/{z}/{x}/{y}.png', {
+                    maxZoom: 19
+                }).addTo(map2);
+
+
+

Interactivity

+ + + + + + + + + +
+

sum

+

+ + So far we have seen static maps, and slippy maps. But extra + interactivty can be used to enhance slippy maps with more data + where available. The University is off to a good start with + this data, and some of it can be interacted with through the + map. + +

+

+ + The sum (TODO: Find better name) library allows you to add this + interactivity to the map with ease, its mainly clientside, with + a small server side component. It handles everything from + setting up Leaflet, to advanced interactive components. + +

+

+ + Try clicking on the buildings and the bicycle parking. + +

+ 
+                var map3 = LS.map('sum-basic');
+
+ 		+
+
+
+ 		+

Workstations

+

+ + One of the very useful pieces of information published by the + University is the workstation use data. On the left you can see + this being displayed on the map. + +

+

+ + As you zoom in and out, the workstation markers will group + together and split apart to keep the data visible. All markers + are also interactive and display more data in a popup when + clicked on. + +

+ 
+                var map4 = LS.map('sum-workstations', {
+                    workstations: true
+                });
+
+
+

Future Experimental Features

+ + + + + +
+

Indoor Maps

+

+ + Navigating around the University is slightly different from + navigating around a city, e.g. Southampton or London. Most of + navigation for students and staff of the university involves + moving between rooms. + +

+

+ + The sum library also has an experimental indoor feature, you + can see a view of the library (level 2) on the left. + +

+ 		+
+
+ + + + + + + + + diff --git a/examples/indoor.html b/examples/indoor.html new file mode 100644 index 0000000..0e46409 --- /dev/null +++ b/examples/indoor.html @@ -0,0 +1,37 @@ + + + + Map - University of Southampton + + + + + + + + +
+ + + + + + + + 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 @@ + + + + + + + + + + + + +
+
+ Search +
+
+
+ +
+ +
+ +
+ +
+
+ +
+
+ Type "b12." to search for a specific building number. +
+
+ +
+
+
+ + + + + + diff --git a/examples/workstations.html b/examples/workstations.html new file mode 100644 index 0000000..819c41b --- /dev/null +++ b/examples/workstations.html @@ -0,0 +1,39 @@ + + + + Workstations - University of Southampton + + + + + + + + + +
+ + + + + + + + + diff --git a/examples/zepler.html b/examples/zepler.html new file mode 100644 index 0000000..4caf762 --- /dev/null +++ b/examples/zepler.html @@ -0,0 +1,44 @@ + + + + Zepler (Building 59) + + + + + + + + + +
+ + + + + + + + + -- cgit v1.2.3