Перейти к содержанию

Widget:KidsMap

Материал из Город на ладошках

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

<style> .emoji-marker {

   background: white;
   border-radius: 50%;
   border: 2px solid #2e7d32;
   text-align: center;
   font-size: 18px;
   line-height: 28px;
   width: 28px !important;
   height: 28px !important;
   box-shadow: 0 2px 4px rgba(0,0,0,0.2);

} </style>

<script> var map = L.map('map').setView([59.9343, 30.3351], 12); L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {

   maxZoom: 19,
   attribution: '© OpenStreetMap'

}).addTo(map);

// ============================================== // ДЕТСКИЕ МЕСТА (только одобренные) // ============================================== var allObjectsKids = [

   {
       "page": "Исаакиевский_собор",
       "name": "Исаакиевский собор",
       "address": "Исаакиевская пл., 4",
       "lat": 59.9340,
       "lon": 30.3065,
       "type": "Церковь",
       "approved": 1,
       "description": "Это Исаакиевский собор. Я люблю здесь бывать летом, когда белые ночи. В соборе есть колокольня с обзорной площадкой, с которой можно сверху увидеть, какие крыши у петербургских домов"
   },

{

       "page": "Этнографический музей",
       "name": "Этнографический музей",
       "address": "Инженерная ул., д.4/1",
       "lat": 59.938009,
       "lon": 30.335191,
       "type": "Музей",
       "approved": 1,
       "description": "В Российском этнографическом музее есть тихий музейный двор, о котором знают мало кто знает. В этот дворик экскурсии устраиваются редко, например один раз год в ночь музее, а также специальные дни (летом в белые ночи). Если удастся его посетить - не пожалеете!!!"
   }
];

function getIconByType(type) {

   const icons = {
       'Парк': '🌳', 'Памятник': '🗿', 'Музей': '🏛️', 'Церковь': '⛪',
       'Школа': '🏫', 'Кафе': '☕', 'Мост': '🌉', 'Фонтан': '⛲',
       'Театр': '🎭', 'Библиотека': '📚', 'Стадион': '⚽', 'Аквапарк': '💦',
       'Зоопарк': '🐘', 'Кинотеатр': '🎬', 'Торговый центр': '🛍️',
       'Вокзал': '🚂', 'Гостиница': '🏨', 'Ресторан': '🍽️', 'Другое': '📍'
   };
   return L.divIcon({
       html: icons[type] || '📍',
       iconSize: [28, 28],
       className: 'emoji-marker',
       popupAnchor: [0, -14]
   });

}

function drawMarkers() {

   document.getElementById('loading-message').style.display = 'block';
   setTimeout(() => {
       map.eachLayer(layer => {
           if (layer instanceof L.Marker) map.removeLayer(layer);
       });
       
       let filtered = allObjectsKids.filter(obj => obj.approved == 1);
       
       filtered.forEach(obj => {
           if (!obj.lat || !obj.lon) return;
           let icon = getIconByType(obj.type);
           let popupHtml = '' + obj.name + '
' + 'Тип: ' + obj.type + '
' + obj.address + '
'; if (obj.description) popupHtml += 'Описание: ' + obj.description + '
'; if (obj.page) popupHtml += '<a href="/index.php/' + encodeURIComponent(obj.page) + '" target="_blank">📖 Читать подробнее</a>'; L.marker([obj.lat, obj.lon], {icon: icon}).addTo(map).bindPopup(popupHtml); }); document.getElementById('loading-message').style.display = 'none'; if (filtered.length === 0) { document.getElementById('loading-message').innerHTML = '😕 Нет мест. Скоро здесь появятся первые открытия!'; document.getElementById('loading-message').style.display = 'block'; setTimeout(() => { document.getElementById('loading-message').innerHTML = 'Загрузка маркеров...'; document.getElementById('loading-message').style.display = 'none'; }, 2000); } }, 50);

}

drawMarkers();

var attributionControl = map.attributionControl; if (attributionControl) {

   attributionControl.setPrefix();
   var style = document.createElement('style');
   style.innerHTML = '.leaflet-attribution-flag { display: none !important; }';
   document.head.appendChild(style);

} </script>