admin/templates/map.html - master - zimaaadev/Parser

admin/templates/map.html
77 строк3 KB
Иван
upload files
28 ноя 2025, 17:43
28 ноя 2025, 17:43f7878f3
<!-- templates/map.html -->
{% extends "base.html" %}

{% block title %}Карта объявлений{% endblock %}

{% block content %}
<h2 class="mb-4"><i class="fas fa-map-marked-alt"></i> Объявления на карте</h2>
<p class="text-muted">Показаны последние 100 объявлений с координатами.</p>

<div id="map" style="height: 70vh; border-radius: 10px; border: 1px solid #dee2e6; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"></div>

<!-- Leaflet CSS & JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<style>
    #map {
        z-index: 1;
    }
    .leaflet-popup-content {
        font-size: 0.9em;
    }
    .leaflet-popup-content a {
        font-weight: bold;
    }
</style>

{% block scripts %}
<script>
    // Инициализация карты (центр — Майкоп)
    const map = L.map('map').setView([44.6085, 40.1036], 12); // Майкоп

    // Подложка: OpenStreetMap
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // Данные из Flask
    const items = {{ items | tojson }};

    // Иконка метки
    const listingIcon = L.icon({
        iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [0, -41]
    });

    // Добавляем метки
    items.forEach(item => {
        if (item.lat && item.lng) {
            const popupContent = `
                <b><a href="${item.url}" target="_blank">${item.title}</a></b><br>
                💰 ${item.price ? (item.price.toLocaleString() + ' ₽') : '—'}<br>
                📍 ${item.location || '—'}<br>
                🏘️ Район: ${item.district || '—'}<br>
                ⏰ ${item.parsed_at.slice(0, 16)}
            `;
            L.marker([item.lat, item.lng], { icon: listingIcon })
                .bindPopup(popupContent)
                .addTo(map);
        }
    });

    // Автофокус на метки
    if (items.some(i => i.lat && i.lng)) {
        const group = new L.featureGroup(
            items
                .filter(i => i.lat && i.lng)
                .map(i => L.marker([i.lat, i.lng]))
        );
        map.fitBounds(group.getBounds(), { padding: [50, 50] });
    }
</script>
{% endblock %}
{% endblock %}