signal-works/ice
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Add custom map icons for persistent vs. temporary reports

Browse source 
- Created custom map markers with distinct colors and symbols:
  - 🔒 Green circles with lock icon for persistent reports
  - ⚠️ Red circles with warning icon for temporary reports
- Updated popup text to indicate persistent status
- Applied consistent styling to both MapBox and Nominatim versions
- Enhanced visual distinction between report types on the map
This commit is contained in:
Deco Vander 2025-07-03 01:34:39 -04:00
parent a8a5523dd4
commit f73221e5cc
2 changed files with 72 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

39
public/app-mapbox.js
View file

@ -46,15 +46,48 @@ document.addEventListener('DOMContentLoaded', async () => {
currentMarkers = [];
};
// Create custom icons for different report types
const createCustomIcon = (isPersistent = false) => {
const iconColor = isPersistent ? '#28a745' : '#dc3545'; // Green for persistent, red for temporary
const iconSymbol = isPersistent ? '🔒' : '⚠️'; // Lock for persistent, warning for temporary
return L.divIcon({
className: 'custom-marker',
html: `
<div style="
background-color: ${iconColor};
width: 30px;
height: 30px;
border-radius: 50%;
border: 3px solid white;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
cursor: pointer;
">${iconSymbol}</div>
`,
iconSize: [30, 30],
iconAnchor: [15, 15],
popupAnchor: [0, -15]
});
};
const showMarkers = locations => {
clearMarkers();
locations.forEach(({ latitude, longitude, address, description, created_at }) => {
locations.forEach(({ latitude, longitude, address, description, created_at, persistent }) => {
if (latitude && longitude) {
const timeAgo = getTimeAgo(created_at);
const marker = L.marker([latitude, longitude])
const isPersistent = !!persistent;
const persistentText = isPersistent ? '<br><small><strong>📌 Persistent Report</strong></small>' : '';
const marker = L.marker([latitude, longitude], {
icon: createCustomIcon(isPersistent)
})
.addTo(map)
.bindPopup(`<strong>${address}</strong><br>${description || 'No additional details'}<br><small>Reported ${timeAgo}</small>`);
.bindPopup(`<strong>${address}</strong><br>${description || 'No additional details'}<br><small>Reported ${timeAgo}</small>${persistentText}`);
currentMarkers.push(marker);
}
});

39
public/app.js
View file

@ -26,16 +26,49 @@ document.addEventListener('DOMContentLoaded', () => {
currentMarkers = [];
};
// Create custom icons for different report types
const createCustomIcon = (isPersistent = false) => {
const iconColor = isPersistent ? '#28a745' : '#dc3545'; // Green for persistent, red for temporary
const iconSymbol = isPersistent ? '🔒' : '⚠️'; // Lock for persistent, warning for temporary
return L.divIcon({
className: 'custom-marker',
html: `
<div style="
background-color: ${iconColor};
width: 30px;
height: 30px;
border-radius: 50%;
border: 3px solid white;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
cursor: pointer;
">${iconSymbol}</div>
`,
iconSize: [30, 30],
iconAnchor: [15, 15],
popupAnchor: [0, -15]
});
};
const showMarkers = locations => {
// Clear existing markers first
clearMarkers();
locations.forEach(({ latitude, longitude, address, description, created_at }) => {
locations.forEach(({ latitude, longitude, address, description, created_at, persistent }) => {
if (latitude && longitude) {
const timeAgo = getTimeAgo(created_at);
const marker = L.marker([latitude, longitude])
const isPersistent = !!persistent;
const persistentText = isPersistent ? '<br><small><strong>📌 Persistent Report</strong></small>' : '';
const marker = L.marker([latitude, longitude], {
icon: createCustomIcon(isPersistent)
})
.addTo(map)
.bindPopup(`<strong>${address}</strong><br>${description || 'No additional details'}<br><small>Reported ${timeAgo}</small>`);
.bindPopup(`<strong>${address}</strong><br>${description || 'No additional details'}<br><small>Reported ${timeAgo}</small>${persistentText}`);
currentMarkers.push(marker);
}
});