-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmain.html
205 lines (174 loc) · 6.86 KB
/
main.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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crime in Los Angeles – Leaflet Heatmap</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.11.1/tachyons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.heat/0.2.0/leaflet-heat.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.0/papaparse.min.js"></script>
</head>
<header>
<div class="banner">
<div class="banner-links">
<a href="main.html" class="banner-link">HeatMap</a>
<a href="iconic.html" class="banner-link">Incident Map</a>
</div>
<div class="banner-logo">
<a href="index.html"><img src="images/logo.png" alt="CrimeEye Logo"></a>
</div>
<div class="banner-links">
<a href="About Us.html" class="banner-link">About Us</a>
<a href="Contact Us.html" class="banner-link">Contact Us</a>
</div>
</div>
</header>
<body class="helvetica">
<div id="map" class="vh-100 vw-100 bg-near-white">
<button id="geolocation-button">Get Current Location</button>
</div>
<div id="legend" class="bg-white fixed bottom-0 left-0 pa2 mt2 ml2 br1 o-90" style="z-index: 999; width: 380px">
<h1 class="f3 mt0">Crime in Los Angeles</h1>
<p class="measure mb1">
This heatmap shows hotspots of crime in Los Angeles
from January 2020 - April 2023 according to the Metropolitan Police data.
</p>
</div>
<script>
var map = L.map('map', {
center: [34.05, -118.24], // Initial map center
zoom: 11, // Initial zoom level
attributionControl: false, // Instead of default attribution, we add custom at the bottom of script
scrollWheelZoom: true, // Enable scroll wheel zoom
dragging: true // Enable click and drag camera movement
});
// Add baselayer
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);
// Add geolocation button to top-right corner of map
var geolocationButton = document.getElementById('geolocation-button');
geolocationButton.style.position = 'absolute';
geolocationButton.style.bottom = '10px';
geolocationButton.style.right = '10px';
map.getContainer().appendChild(geolocationButton);
// Add a click event listener to the geolocation button
geolocationButton.addEventListener('click', function() {
// Get the user's location using the geolocation API
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
// Update the map's center with the user's coordinates
map.setView([lat, lng], 15);
// Add a marker to the map at the user's location
var marker = L.marker([lat, lng]).addTo(map);
// Update the marker's position as the user moves
navigator.geolocation.watchPosition(function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
marker.setLatLng([lat, lng]);
});
}, function(error) {
// Handle any errors that occur
console.error(error);
});
});
// Add geographical labels only layer on top of baselayer
var labels = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19,
pane: 'shadowPane' // always display on top
}).addTo(map)
// Create a heatmap layer for each crime type
var batteryHeatmap = L.heatLayer([], { radius: 10, gradient: { 0.2: 'blue', 0.4: 'cyan', 1: '#fff' } });
var vandalismHeatmap = L.heatLayer([], { radius: 10, gradient: { 0.4: 'green', 0.6: 'yellow', 1: 'white' } });
var burglaryHeatmap = L.heatLayer([], { radius: 10, gradient: { 0.4: 'red', 0.6: 'orange', 1: 'white' } });
var theftHeatmap = L.heatLayer([], { radius: 10, gradient: { 0.4: 'purple', 0.6: 'pink', 1: 'white' } });
var identityTheftHeatmap = L.heatLayer([], { radius: 10, gradient: { 0.4: 'black', 0.6: 'gray', 1: 'white' } });
var vehicleTheftHeatmap = L.heatLayer([], { radius: 10, gradient: { 0.4: 'brown', 0.6: 'tan', 1: 'white' } });
// Parse the CSV file and add the data points to the appropriate layer group
Papa.parse('./data/data.csv', {
header: true,
download: true,
dynamicTyping: true,
complete: function(results) {
var batteryCount = 0;
var vandalismCount = 0;
var burglaryCount = 0;
var theftCount = 0;
var identityTheftCount = 0;
var vehicleTheftCount = 0;
results.data.forEach(function(d) {
var lat = d.latitude;
var lng = d.longitude;
var type = d.type;
if (type === "BATTERY - SIMPLE ASSAULT") {
batteryHeatmap.addLatLng([lat, lng]);
} else if (type === "VANDALISM - FELONY (>$400)") {
vandalismHeatmap.addLatLng([lat, lng]);
} else if (type === "BURGLARY FROM VEHICLE") {
burglaryHeatmap.addLatLng([lat, lng]);
} else if (type === "BURGLARY") {
theftHeatmap.addLatLng([lat, lng]);
} else if (type === "THEFT OF IDENTITY") {
identityTheftHeatmap.addLatLng([lat, lng]);
} else if (type === "VEHICLE - STOLEN") {
vehicleTheftHeatmap.addLatLng([lat, lng]);
}
});
}
});
// Add the heatmap layers to the map
var overlayMaps = {
"Battery - Simple Assault": batteryHeatmap,
"Vandalism - Felony (>$400)": vandalismHeatmap,
"Burglary from Vehicle": burglaryHeatmap,
"Theft": theftHeatmap,
"Theft of Identity": identityTheftHeatmap,
"Vehicle - Stolen": vehicleTheftHeatmap
};
L.control.layers(null, overlayMaps).addTo(map);
// Add the Fullscreen control to the map
map.addControl(new L.Control.Fullscreen());
</script>
<style>
#geolocation-button {
position: absolute;
z-index: 9999;
}
.banner {
display: flex;
justify-content: space-around;
align-items: center;
background: linear-gradient(to bottom right, #292d3e, #746fb0);
height: 80px;
}
.banner-logo {
display: flex;
align-items: center;
}
.banner-logo img {
height: 50px;
margin-right: 10px;
}
.banner-links {
display: flex;
justify-content: space-around;
align-items: center;
width: 40%;
}
.banner-links a {
color: #fff;
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
</style>
</body>
</html>