forked from socal760/neighborhoods
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
134 lines (112 loc) · 5.41 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<html>
<head>
<title>Neighborhood Haikus</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="http://code.jquery.com/jquery-latest.min.js " ></script>
<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<script src='leaflet-pip.min.js'></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
var map, neighborhoods;
// We'll keep track of our counts per neighborhood here
var haikuCounts = {};
$(document).ready(function(){
L.mapbox.accessToken = 'pk.eyJ1IjoibWFwdGltZWxhb21hciIsImEiOiJjaWd3MWVxYzYwcnpzdmttNXF0YnMyNGNpIn0.j-U_d3YrKY3uXqmVXN2RWA';
// Build our map, center it on LA City Hall and set the Zoom to 11
map = L.mapbox.map('map', 'mapbox.streets').setView([34.0536, -118.2430], 11);;
// Now we want to draw some neighborhoods on the map!
//
// We snatched the neighborhood boundaries from the The LA Times
//
// First thing is to fetch the neighborhood geojson file which defines
// the shape and other attributes of the neighborhoods like the
// neighborhood's name.
$.getJSON('la-county-neighborhoods-current.geojson', function(contentsOfGeoJsonFile) {
// How to color the neighborhood outlines
var neighborhoodStyle = {
"color": "dodgerBlue",
"weight": 1,
"opacity": 0.6,
"fillOpacity": 0.1
};
// How to color the neighborhood outlines
// once you click on it
var highlightStyle = {
"color": "dodgerBlue",
"weight": 1,
"opacity": 0.6,
"fillOpacity": 0.4
};
// Define some behavior for the neighborhood drawn on the map
//
// "neighborhoodFeature" is the data from the geoJson file
// "neighborhoodLayer" is how that data will be presented on our map
function onEachNeighborhood(neighborhoodFeature, neighborhoodLayer) {
// Show the neighborhood's name when you click on it
neighborhoodLayer.bindPopup(neighborhoodFeature.properties.name);
// Highlight that neighborhood when you click on it
// using the styles above
neighborhoodLayer.on('click', function(event) {
neighborhoodLayer.setStyle(highlightStyle);
});
// Unhighlight the neighborhood once the popup closes
neighborhoodLayer.on('popupclose', function(event) {
neighborhoodLayer.setStyle(neighborhoodStyle);
});
}
// Add the fetched data to our map with the styles and
// behaviors we defined above.
neighborhoods = L.geoJson(contentsOfGeoJsonFile, {
"style": neighborhoodStyle,
onEachFeature: onEachNeighborhood
}).addTo(map);
// Now we want to plot haikus on the map
//
// Add a marker for each haiku in our haiku CSV
var pointsLayer = omnivore.csv('haikus.csv').on('ready', function() {
// Some things we want to do for each haiku marker
pointsLayer.eachLayer(function(point) {
// Attach a popup to each marker with the haiku and a "by" line
point.bindPopup(
point.feature.properties.haiku + "<br /><br /> by <a target='_blank' href='http://github.com/" + point.feature.properties.github + "' >" + point.feature.properties.github + "</a>"
);
// Figure out what neighborhood the point is in and tally up
// the haiku count for that neighborhood
var neighborhood = leafletPip.pointInLayer(point.getLatLng(), neighborhoods, true);
if (neighborhood[0]) {
neighborhoodName = neighborhood[0].feature.properties.name;
incrementHaikuCounts(neighborhoodName);
} else {
console.log(point.getLatLng() + " falls outside of any known neighborhoods");
}
});
}).addTo(map);
});
});
// Add's one to the haiku count for the given neighborhood name
// and re-renders the haiku count list.
function incrementHaikuCounts(neighborhoodName) {
if (haikuCounts[neighborhoodName]) {
haikuCounts[neighborhoodName] = haikuCounts[neighborhoodName] + 1;
} else {
haikuCounts[neighborhoodName] = 1;
}
countItems = '';
$.each(haikuCounts, function(name, count) {
countItems += "<li>" + name + ": " + count + "</li>";
});
$('.haiku-counts').html( countItems );
}
</script>
</head>
<body>
<div id="map">
<div class="overlay">
<h1 class="map-header">Neighborhood Haiku Counts</h1>
<ul class="haiku-counts"></ul>
</div>
</div>
</body>
</html>