forked from cityhubla/git_your_map_here
-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
75 lines (70 loc) · 3.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
<!DOCTYPE html>
<html>
<head>
<title>Maptime LA: Neighborhood Council Map</title>
<meta charset="utf-8" />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<!-- Requiring the libraries we are using: Leaflet.js, Leaflet.css, jQuery.js and our own CSS file -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="map"></div>
<div id="info">
<h1>Map of Los Angeles Neighborhood Councils</h1>
<p>Made by Vectoria, the Maptime bear</p>
<p>This map shows the boundaries of the neighborhood councils (NC) as well as the meeting locations for each council</p>
<p>Data from <a href="data.lacity.org">Los Angeles Open Data:</a> <a href="https://data.lacity.org/A-Well-Run-City/Neighborhood-Councils-Certified-/fu65-dz2f">NC Boundaries</a> <a href="https://data.lacity.org/A-Well-Run-City/Neighborhood-Council-Office-Location-Map/nnrh-gpbn">NC Meeting Locations</a></p>
<p>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://www.openstreetmap.org/copyright">ODbL</a>.</p>
<p>Find out how this map was made and make your own on <a href="https://github.com/maptimeLA/git_your_map_here">GitHub</a> and from our <a href="git_your_map_here/slides.html">slide deck</a>.</p>
</div>
<script>
// Adds Leaflet map to div with id, 'map'
// Centers the view at: [34.052234, -118.243685] with zoom level, 10:
var map = L.map('map').setView([34.052234, -118.243685], 10);
// Adds tile layer to map with id, 'map'
var myTileLayer = L.tileLayer('http://{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png').addTo(map);
// Creates variables for the file path of our .geojson files, in the /data/ folder
var nc_boundaries_file = "data/nc_boundaries.geojson";
var nc_locations_file = "data/nc_locations.geojson";
// Makes a GET request to the file at nc_boundaries
// In the call-back success method,
// adds the returned geoJSON features as orange areas with dark orange borders to the map
var addBoundaries = $.getJSON(nc_boundaries_file, function(data) {
L.geoJson(data, {
style: {
fillColor : "#ff7f00",
color : "#ff7f00",
weight : 1,
opacity : 1,
fillOpacity : 0.2,
clickable : false
}
}).addTo(map).bringToBack();
});
// Makes a GET request to the file at nc_locations
// In the call-back success method,
// adds the returned geoJSON features as orange circles to the map
// Then, adds a pop-up window with `features.properties` from each
// geoJSON feature to each marker.
var addLocations = $.getJSON(nc_locations_file, function(data) {
L.geoJson(data, {
style: {
radius : 5,
fillColor :"#ff7f00",
color : "#000",
weight : 0,
opacity : 0,
fillOpacity : 0.8
},
pointToLayer: function(feature, latlon) {
return L.circleMarker(latlon).bindPopup(
"<h2>" + feature.properties.neighborhood_council_name + "</h2>" + feature.properties.meeting_location);
}
}).addTo(map)
});
</script>
</body>
</html>