/
index.html
executable file
·101 lines (83 loc) · 4.59 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Maps</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- CSS concatenated and minified via ant build script-->
<link rel="stylesheet" href="css/controls.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/map-styles.css">
<!-- end CSS-->
<script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>
<div id="container">
<header>
<div class="player">
<a href="#" class="stop" title="Stop the player all together and remove any overlay."></a>
<a href="#" class="next" title="Go to next in feed."></a>
<a href="#" class="play-pause pausing" title="Press to fly through the map, stopping on random art in SF."></a>
<a href="#" class="prev" title="Go to previous in feed."></a>
</div>
<h1>Public Art in San Francisco</h1>
</header>
<div id="map" role="main">
</div>
<footer>
<div id="instructions" style="display:none;">
<p><strong>The map</strong><br> Pan around the map to search for art around San Francisco. Roll over points to see the title of art, and click on the points to get all the information about the art pieces.</p>
<p><strong>The player</strong><br> Use the player controls in the top right to fly around the map. As you fly through you will see the title and an image of the art if it's available. Use the stop button to remove the overlay.</p>
</div>
<div id="about" style="display:none;">
<p><strong>Data</strong><br> All the data on this map is open, public data from the city of San Francisco found at <a href="http://datasf.org/">datasf.org</a>. Data including
<a href="http://datasf.org/story.php?title=physical-features-elevation-contours-">elevation lines</a>,
<a href="http://datasf.org/story.php?title=publicly-accessible-open-spaces">parks and open spaces</a>,
<a href="http://datasf.org/story.php?title=water-bodies-in-san-francisco-">bodies of water</a>, and
<a href="http://datasf.org/story.php?title=publically-sited-artworks-in-the-civic-art-collection">public art</a>.</p>
<p><strong>The code</strong><br> Get the code on <a href="http://github.com/zzolo/maps">Github</a>.</p>
<p><strong>Giants</strong><br> Lost of great people's work was used to make this including
<a href="http://mapbox.com/tilemill/">TileMill</a>,
<a href="http://mapbox.com/tilestream/">TileStream</a>,
<a href="https://github.com/stamen/modestmaps-js">Modest Maps</a>,
<a href="http://mapbox.com/wax/">Wax</a>,
<a href="http://mapbox.com/easey/">Easey</a>,
<a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>,
<a href="http://tango.freedesktop.org/Tango_Icon_Library">Tango Icons</a>.</p>
</div>
<a href="#" class="instructions-go">Instructions</a>
<a href="#" class="about-go">About</a>
</footer>
</div> <!--! end of #container -->
<div class="map-overlay-container">
<div class="map-overlay map-overlay-top"></div>
<div class="map-overlay map-overlay-left"></div>
<div class="map-overlay map-overlay-right"></div>
<div class="map-overlay map-overlay-bottom"></div>
</div>
<script src="js/libs/jquery-1.6.2.min.js"></script>
<script defer src="js/libs/jquery.timers-1.2.js"></script>
<script defer src="js/libs/modestmaps.min.js"></script>
<script defer src="js/libs/wax.mm.min.js"></script>
<script defer src="js/libs/easey.js"></script>
<script defer src="js/maps.js"></script>
<!-- end scripts-->
<script>
// Change UA-XXXXX-X to be your site's ID
// window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
// Modernizr.load({
// load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
// });
</script>
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
</body>
</html>