index

[laylo909]

[5] <title>Mobil Moslashuvchan Xarita</title>

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

<style>
    /* Moslashuvchan dinamik maket */
    body, html {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        overflow: hidden; [6, 7]
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; [2]
    }

    #map {
        height: 100vh; /* Ekran balandligini to'liq egallash */
        width: 100%; [2]
    }

    /* Sensorli boshqaruv tugmasi (📍 MENING JOYLASHUVIM) */
    .locate-btn {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        background: #007bff;
        color: white;
        padding: 18px 0;
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.4);
        font-size: 16px;
        font-weight: bold;
        width: 85%; /* Mobil ekran uchun keng */
        cursor: pointer;
        transition: background 0.3s, transform 0.1s;
        -webkit-tap-highlight-color: transparent; [7, 8]
    }

    .locate-btn:active {
        background: #0056b3;
        transform: translateX(-50%) scale(0.98); [8, 9]
    }

    /* Planshet va noutbuklar uchun tugma o'lchamini o'zgartirish */
    @media (min-width: 768px) {
        .locate-btn {
            width: 300px;
            bottom: 40px;
            font-size: 14px; [10, 11]
        }
    }

    /* Zoom tugmalarini barmoq bilan bosishga moslash (44x44px) */
    .leaflet-touch .leaflet-bar a {
        width: 44px;
        height: 44px;
        line-height: 44px; [12]
    }
</style>

<!-- Joylashuvni aniqlash tugmasi -->
<button class="locate-btn" onclick="findMe()">📍 MENING JOYLASHUVIM</button> [3]

<!-- Xarita konteyneri -->
<div id="map"></div> [13]

<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
    // Xaritani sensorli boshqaruv sozlamalari bilan yaratish
    var map = L.map('map', {
        zoomControl: true,
        dragging: true,      // Barmoq bilan surish yoqilgan
        tap: true,          // Teginishga sezgirligi
        touchZoom: true,    // Pinch-zoom yoqilgan
        bounceAtZoomLimits: true [13-15]
    }).setView([41.55, 60.63], 13); [14]

    // OSM fon qatlamini qo'shish
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OSM'
    }).addTo(map); [14]

    // Zoom boshqaruvini o'ng tomonga o'tkazish (o'ng qo'l bosh barmog'i uchun)
    map.zoomControl.setPosition('topright'); [16]

    // Namunaviy nuqtalar
    var points = [
        { lat: 41.56, lng: 60.60, title: "Urganch asalarichilik markazi" },
        { lat: 41.52, lng: 60.65, title: "Fermer xo'jaligi - 1" },
        { lat: 41.54, lng: 60.70, title: "Xiva asalarichilik bog'i" }
    ]; [17]

    // Nuqtalarni xaritaga chiqarish va popup oynasini mobil uchun sozlash
    points.forEach(function(point) {
        L.marker([point.lat, point.lng])
        .addTo(map)
        .bindPopup(
            "<div style='min-width: 150px; font-size: 14px;'>" +
            "<b>" + point.title + "</b><br>" +
            "Mobil ekran uchun optimallashtirilgan." +
            "</div>",
            { closeButton: true, autoPanPadding: [18] } [18, 19]
        );
    });

    // Joylashuvni qidirish funksiyasi
    function findMe() {
        map.locate({
            setView: true,
            maxZoom: 16,
            enableHighAccuracy: true,
            timeout: 10000
        }); [4, 16]
    }

    // Joylashuv topilganda vizual ko'rsatish (marker va ko'k doira)
    map.on('locationfound', function(e) {
        // Eski natijalarni tozalash
        map.eachLayer(function(layer) {
            if (layer instanceof L.Marker || layer instanceof L.Circle) {
                // Faqat foydalanuvchi joylashuvini tozalash (namunaviy nuqtalarni emas)
                if(!layer.options.attribution) map.removeLayer(layer); 
            }
        });

        var radius = e.accuracy / 2;
        L.marker(e.latlng).addTo(map).bindPopup("Siz shu radius ichidasiz").openPopup(); [20, 21]

        L.circle(e.latlng, radius, {
            color: '#007bff',
            fillColor: '#007bff',
            fillOpacity: 0.2
        }).addTo(map); [21, 22]
    });

    // Xatolik yuz berganda ogohlantirish
    map.on('locationerror', function() {
        alert("Joylashuvni aniqlash imkonsiz bo'ldi."); [22]
    });
</script>