-
Notifications
You must be signed in to change notification settings - Fork 0
/
mapv2.html
161 lines (129 loc) · 5.27 KB
/
mapv2.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
<!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>
<body class="helvetica">
<div id="map" class="vh-100 vw-100 bg-near-white"></div>
<div id="legend" class="bg-white fixed top-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>
<button id="geolocation-button">Get Current Location</button>
<style>
#geolocation-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
}
</style>
<div?\>
</div>
<script>
var map = L.map('map', {
zoomControl: false, // Add zoom control separately below
center: [34.05, -118.24], // Initial map center
zoom: 10, // Initial zoom level
attributionControl: false, // Instead of default attribution, we add custom at the bottom of script
scrollWheelZoom: false
})
// Add zoom in/out buttons to the top-right
L.control.zoom({position: 'topright'}).addTo(map)
// 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 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)
// Read data from CSV file
$.get('./data/data.csv', function(csvString) {
// Use PapaParse to transform file into arrays
var data = Papa.parse(csvString.trim()).data.filter(
function(row) { return row.length === 2 }
).map(function(a) {
return [ parseFloat(a[0]), parseFloat(a[1]) ]
})
// Add all points into a heat layer
var heat = L.heatLayer(data, {
radius: 5,
blur: 8,
})
// Add the heatlayer to the map
heat.addTo(map)
// Define a function to update the heatmap layer with new data
function updateHeatmap(columnIndex) {
var newDataPoints = []; // Initialize empty array for new data points
for (var i = 0; i < data.length; i++) {
newDataPoints.push([data[i][0], data[i][columnIndex]]); // Extract the lat/long and column value for the selected column
}
heat.setLatLngs(newDataPoints); // Update the heatmap layer with the new data points
}
// Add a UI element to let the user toggle between different columns
var columnSelect = document.getElementById('column-select');
columnSelect.addEventListener('change', function() {
var columnIndex = parseInt(this.value); // Get the index of the selected column
updateHeatmap(columnIndex); // Update the heatmap layer with the selected column
});
})
// Add custom attribution
L.control.attribution({
prefix: '<a href="https://github.com/HandsOnDataViz/leaflet-heatmap">View data and code</a> \
by <a href="https://handsondataviz.org" target="_blank">HandsOnDataViz</a>'
}).addTo(map)
// Get a reference to the geolocation button
var geolocationButton = document.getElementById('geolocation-button');
// 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.setCenter(new google.maps.LatLng(lat, lng));
}, function(error) {
// Handle any errors that occur
console.error(error);
});
});
</script>
</body>
</html>
<style>
#geolocation-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
}
</style>