diff --git a/petmap.html b/petmap.html index 8b75a0e..b82ff0b 100644 --- a/petmap.html +++ b/petmap.html @@ -16,8 +16,25 @@ - - :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: `
${emoji}
`, + 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 - ? `${item.emoji} ${item.title}
${item.location}
🕒 ${item.workHours}
📞 ${item.contact}` - : `${item.emoji} ${item.title}
${item.location}
📞 ${item.contact}`; + ? `${item.emoji || '📍'} ${item.title}
${item.location}
🕒 ${item.workHours}
📞 ${item.contact}` + : `${item.emoji || '📍'} ${item.title}
${item.location}
📞 ${item.contact}`; marker.bindPopup(popupContent); marker.on('click', () => showPreview(item)); markers.push(marker);