<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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/[email protected]/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>
