-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
120 lines (85 loc) · 4.87 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>whichhood.org</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.3"></script>
<script type="text/javascript" src="scripts/whichhood.js"></script>
<LINK href="style.css" rel="stylesheet" type="text/css"></LINK>
<LINK href="leaflet/leaflet.css" rel="stylesheet" type="text/css"></LINK>
</head>
<body>
<div id='submission-wide'>
<h1>Whichhood</h1>
<p id="start"><a href="#">Start...</a> <a href="#" class="help">More info.</a></p>
<div id="nabeform">
<form id="neighborhood">
What neighborhood is this location in?
<input type="text" class="bigtext" id="nabearea" name="neighborhood" value="neighborhood" onFocus="this.value='';"></input>
<input type="hidden" name="block" value="" ></input>
<input type="submit" class="bigbutton" value="Name it!" >
<input type="button" class="bigbutton" id="skip" value="Not sure, skip it."> <span id="locked-warning"><em>(viewfinder is locked)</em></span>
<span id="spinner"><em>loading...</em></span> <a href="view.html">Explore results</a>. <a href="#" class="help">More info.</a></p>
</form>
</div>
</div>
<div id='map'></div>
<div id="about">
<p>WhichHood.org is an experimental sketch for a collaborative neighborhood mapping tool.</p>
<p>High-quality neighborhood boundaries could form the basis for many civic apps -- news, issue reporting, local retail, planning, etc. But those maps don't exist. Any available data typically represent an administrative or real estate focused view. The "official" boundaries don't adapt and grow as rapidly as neighborhoods do in our daily use. What if a community data source existed, generated from thousands of individual contributions? What if adding data to that resource was kinda fun? Maybe a bit competitive? A game?</p>
<p>Drawing actual boundaries for neighborhoods is hard: you don't always know the other side of a neighborhood edge, only the one closest to you. Instead, whichhood.org asks you to identify neighborhoods block by block.</p>
<p>whichhood.org was created by <a href="http://holobiont.org">Holobiont</a> at the Great Urban Hack, November 6/7, 2010. <a href="https://github.com/fkh/whichhood">Source on github</a>. Feedback invited to <a href="twitter.com/fkh">@fkh</a>.</p>
<p><a href="#" class="help">Hide this section.</a></p>
</div>
<!--
<div id='credits'>
Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.
</div>
-->
<script type="text/javascript">
var map = new L.Map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 1, maxZoom: 16, attribution: osmAttrib});
// custom icon
var locationIcon = L.icon({
iconUrl: 'marker.png',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
// stamen toner tiles!
var toner = new L.StamenTileLayer('toner');
map.addLayer(toner);
map.setView(new L.LatLng(40.75, -73.9), 11);
// map.addLayer(osm);
markers.addLayer(geojsonLayer);
map.addLayer(markers);
map.on('viewreset', function() {
lockZoom();
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19558271-1']);
_gaq.push(['_setDomainName', 'whichhood.org']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>