-
Notifications
You must be signed in to change notification settings - Fork 0
/
test_map.html
118 lines (107 loc) · 3.97 KB
/
test_map.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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script type="text/javascript" src="community_areas.geojson"></script>
<script type="text/javascript" src="rainbow-vis.js"></script>
<script type="text/javascript" src="L.Map.Sync.js"></script>
</head>
<body>
<div id="crime-map" style="width: 400px; height: 600px; float: left">
</div>
<div id="spacer" style="width: 20px; margin: 20px; float: left">
</div>
<div id="media-map" style="width: 400px; height: 600px; float: left">
</div>
<div style="clear: both">
</div>
</body>
<script>
function osm() {
var osmUrl = "http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png";
var osmAttrib = 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
return new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 12, attribution: osmAttrib});
};
function communityAreasLayer() {
var layer = L.geoJSON(geojson);
var styles = { color: "#000000", weight: 1, fillOpacity: 0.6 };
layer.setStyle(styles);
return layer;
};
function maxValue(obj) {
var max = 0;
for (prop in obj) {
if (obj[prop] > max) {
max = obj[prop];
}
};
return max;
};
function rainbow(color, max) {
var newRainbow = new Rainbow();
newRainbow.setSpectrum("#f7f7f7", endColor(color));
newRainbow.setNumberRange(0, max);
return newRainbow;
};
function endColor(name) {
switch(name) {
case "purple": return "5e3c99"; break;
case "orange": return "e66101"; break;
}
};
function createMap(id) {
var map = L.map(id).setView([41.85, -87.65], 11);
map.addLayer(osm());
return map;
};
function fillCommunityAreas(data, color) {
var maxCrimeCount = maxValue(data.crimeCounts);
var fillRainbow = rainbow(color, maxCrimeCount);
var areasLayer = communityAreasLayer();
areasLayer.eachLayer(function(layer) {
var crimeCount = data.crimeCounts[layer.feature.properties.area_num_1] || 0;
var color = fillRainbow.colourAt(crimeCount);
layer.setStyle({ fillColor: "#" + color });
});
return areasLayer;
};
function addPopups(areasLayer, data, dataDescription) {
areasLayer.eachLayer(function(layer) {
var areaName = layer.feature.properties.community;
var areaNumber = layer.feature.properties.area_num_1;
var crimeCount = data.crimeCounts[areaNumber] || 0;
var popupText = "<p><h4>" + areaName + "</h4></p>" + "<p><b>" +
data.crimeType + " (" + dataDescription + "):</b> " +
crimeCount;
layer.bindPopup(popupText);