-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
67 lines (59 loc) · 3.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<title>Subway station map</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.css" />
<link rel="stylesheet" href="Control.MiniMap.css" />
<style>
html, body, .tall {
height: 100%;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div class="container-fluid tall">
<div class="row tall">
<div class="col-md-4">
<h2>Subway station map</h2>
<p>Use the arrow keys to move arround; Shift+arrows to change the point of view.</p>
<h3>Why?</h3>
<p>It is hard to understand the layout of a subway station.
We rarely know the best entrance for our journey.
When we get out, we are disoriented and the first thing we do is
to find out where we are.</p>
<p>This prototype is a suggestion how to help making a
mental image of the places we cross every day.</p>
<h3>How?</h3>
<p>Data from <a href="https://www.openstreetmap.org">OpenStreetMap</a>.
The rendering is made with <a href="https://mapzen.com/documentation/tangram/">Tangram</a>.</p>
<p>More information and source code on <a href="https://github.com/Tristramg/parisfellowship">GitHub</a></p>
<h3>Next steps</h3>
<p>Nice 3D is hard and we probably pushed Tangram beyond than what is ment to do.</p>
<p>But even with the right tools, a good design is even harder and requires lots of efforts.</p>
<p>Gathering all the data is also a big issue.</p>
<h3>Who?</h3>
<p>I’m <a href="https://twitter.com/tristramg">Tristram</a> and made this experiment during
the <a href="https://summerfellowship.paris">Paris Summer Fellowship 2016</a> organized
by <a href="http://www.fivebyfive.io">Five by Five</a>.
</div>
<div class="col-md-8" id="map"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.js"></script>
<script src="https://mapzen.com/tangram/0.8/tangram.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
<script src="Control.MiniMap.js" type="text/javascript"></script>
<script src="leaflet-hash.js"></script>
<script src="main.js"></script>
</body>
</html>