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

petmap.html

@@ -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.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.contact}`;
         marker.bindPopup(popupContent);
         marker.on('click', () => showPreview(item));
         markers.push(marker);