Medet/sozday-pezu-obuenie-vaybkodi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PetMap: разные иконки для типов маркеров (потерян, найден, помощь, дом, клиники)

Browse Source
This commit is contained in:
Medet 2026-08-07 06:38:11 +00:00
parent 1bc1041267
commit be8ca53b7b
1 changed files with 62 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
petmap.html
View File

@ -18,6 +18,23 @@
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<style>
/* Кастомные иконки для маркеров */
.custom-marker {
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.marker-lost { filter: drop-shadow(0 2px 4px rgba(230,57,70,0.4)); }
.marker-found { filter: drop-shadow(0 2px 4px rgba(42,157,143,0.4)); }
.marker-help { filter: drop-shadow(0 2px 4px rgba(244,162,97,0.4)); }
.marker-home { filter: drop-shadow(0 2px 4px rgba(78,205,196,0.4)); }
.marker-vet { filter: drop-shadow(0 2px 4px rgba(42,157,143,0.4)); }
.marker-shelter { filter: drop-shadow(0 2px 4px rgba(244,162,97,0.4)); }
.marker-petshop { filter: drop-shadow(0 2px 4px rgba(255,107,107,0.4)); }
</style>
:root {
--primary: #ff6b6b;
--primary-dark: #ee5a5a;
@ -908,6 +925,45 @@
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Иконки для разных типов маркеров
function getMarkerIcon(item) {
const itemType = item.type || item.cat;
let emoji = item.emoji || '📍';
let className = 'custom-marker';
// Разные смайлики для разных типов
if (itemType === 'lost') {
emoji = '👀'; // Глаза — ищут, потерян
className += ' marker-lost';
} else if (itemType === 'found' || itemType === 'sighting') {
emoji = '👁️'; // Глаз — видел на улице
className += ' marker-found';
} else if (itemType === 'needs_help' || itemType === 'help') {
emoji = '🆘'; // SOS — нужна помощь
className += ' marker-help';
} else if (itemType === 'seeking_home' || itemType === 'home') {
emoji = '🏠'; // Дом — ищет дом
className += ' marker-home';
} else if (itemType === 'vet') {
emoji = '🏥'; // Больница — ветклиника
className += ' marker-vet';
} else if (itemType === 'shelter') {
emoji = '🏡'; // Приют
className += ' marker-shelter';
} else if (itemType === 'petshop') {
emoji = '🛒'; // Магазин
className += ' marker-petshop';
}
return L.divIcon({
className: className,
html: `<div style="font-size:32px;background:white;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.2);">${emoji}</div>`,
iconSize: [44, 44],
iconAnchor: [22, 22],
popupAnchor: [0, -22]
});
}
const markers = [];
function addMarkers(filter = 'all') {
markers.forEach(m => map.removeLayer(m));
@ -925,10 +981,11 @@
const lng = item.lng || CITIES[item.city]?.lng;
if (!lat || !lng) return;
const marker = L.marker([lat, lng]).addTo(map);
const icon = getMarkerIcon(item);
const marker = L.marker([lat, lng], { icon: icon }).addTo(map);
const popupContent = item.workHours
? `<b>${item.emoji} ${item.title}</b><br>${item.location}<br>🕒 ${item.workHours}<br>📞 ${item.contact}`
: `<b>${item.emoji} ${item.title}</b><br>${item.location}<br>📞 ${item.contact}`;
? `<b>${item.emoji || '📍'} ${item.title}</b><br>${item.location}<br>🕒 ${item.workHours}<br>📞 ${item.contact}`
: `<b>${item.emoji || '📍'} ${item.title}</b><br>${item.location}<br>📞 ${item.contact}`;
marker.bindPopup(popupContent);
marker.on('click', () => showPreview(item));
markers.push(marker);