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>