Skip to content

Commit c34cfc7

Browse files
danpdanp
committed
update
1 parent 9a1df96 commit c34cfc7

3 files changed

Lines changed: 145 additions & 1 deletion

File tree

‎data.geojson‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎index.html‎

Lines changed: 143 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,143 @@
1-
hello
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Halifax Sidewalk Snow Clearing</title>
7+
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
8+
<style>
9+
/* Ensure the map is fully responsive */
10+
#map {
11+
width: 100%;
12+
height: 90vh;
13+
}
14+
15+
/* Header for priorities */
16+
.header {
17+
padding: 10px;
18+
background-color: #f4f4f4;
19+
border-bottom: 1px solid #ddd;
20+
font-family: Arial, sans-serif;
21+
font-size: 14px;
22+
display: flex;
23+
align-items: center;
24+
gap: 20px;
25+
}
26+
27+
.priority-item {
28+
display: flex;
29+
align-items: center;
30+
gap: 10px;
31+
}
32+
33+
.priority-square {
34+
width: 30px;
35+
height: 30px;
36+
display: flex;
37+
justify-content: center;
38+
align-items: center;
39+
font-weight: bold;
40+
font-size: 16px;
41+
color: white;
42+
border-radius: 4px;
43+
}
44+
45+
.priority-1 .priority-square {
46+
background-color: #D55E00;
47+
}
48+
49+
.priority-2 .priority-square {
50+
background-color: #E69F00;
51+
}
52+
53+
.priority-3 .priority-square {
54+
background-color: #F7C843;
55+
}
56+
57+
.priority-deadline {
58+
font-size: 14px;
59+
color: #333;
60+
}
61+
</style>
62+
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
63+
</head>
64+
<body>
65+
<div class="header" id="priorities-header"></div>
66+
<div id="map"></div>
67+
68+
<script>
69+
// Initialize the map
70+
var map = L.map('map');
71+
72+
// Add a basemap (OpenStreetMap)
73+
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
74+
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
75+
}).addTo(map);
76+
77+
// Define a function to style the GeoJSON features
78+
function getStyle(feature) {
79+
const colors = {
80+
'1': '#D55E00', // High priority: Dark Orange
81+
'2': '#E69F00', // Medium priority: Medium Orange
82+
'3': '#F7C843' // Low priority: Light Orange
83+
};
84+
85+
return {
86+
color: colors[feature.properties.priority] || '#CCCCCC', // Default to grey
87+
weight: 6,
88+
opacity: 1
89+
};
90+
}
91+
92+
// Format the deadline to show weekday and time (e.g., Wed 3:30 PM)
93+
function formatDeadline(deadline) {
94+
const deadlineDate = new Date(deadline);
95+
return deadlineDate.toLocaleString('en-US', {
96+
weekday: 'short',
97+
hour: 'numeric',
98+
minute: '2-digit'
99+
});
100+
}
101+
102+
// Load GeoJSON data
103+
fetch('data.geojson')
104+
.then(response => response.json())
105+
.then(data => {
106+
// Add GeoJSON to the map
107+
var geojsonLayer = L.geoJSON(data, {
108+
style: getStyle,
109+
onEachFeature: function(feature, layer) {
110+
layer.bindPopup(`
111+
${feature.properties.title || 'Unknown'}<br>
112+
<strong>Priority:</strong> ${feature.properties.priority || 'Unknown'}<br>
113+
<strong>Deadline:</strong> ${feature.properties.deadline || 'Unknown'}<br>
114+
<strong>Timeline:</strong> ${feature.properties.timeline || 'Unknown'}
115+
`);
116+
}
117+
}).addTo(map);
118+
119+
// Auto-center map to the GeoJSON layer
120+
map.fitBounds(geojsonLayer.getBounds());
121+
})
122+
.catch(error => console.error('Error loading GeoJSON:', error));
123+
124+
// Load priorities.json
125+
fetch('priorities.json')
126+
.then(response => response.json())
127+
.then(priorities => {
128+
const prioritiesHeader = document.getElementById('priorities-header');
129+
130+
// Generate horizontal list of priorities
131+
prioritiesHeader.innerHTML = Object.entries(priorities)
132+
.map(([priority, details]) => `
133+
<div class="priority-item priority-${priority}">
134+
<div class="priority-square">${priority}</div>
135+
<div class="priority-deadline">${formatDeadline(details.Deadline)}</div>
136+
</div>
137+
`)
138+
.join('');
139+
})
140+
.catch(error => console.error('Error loading priorities:', error));
141+
</script>
142+
</body>
143+
</html>

‎priorities.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"1":{"Timeline":43200000000000,"Deadline":"2024-12-25T15:30:00-04:00"},"2":{"Timeline":64800000000000,"Deadline":"2024-12-25T21:30:00-04:00"},"3":{"Timeline":129600000000000,"Deadline":"2024-12-26T15:30:00-04:00"}}

0 commit comments

Comments
 (0)