ÿþ<!DOCTYPE html> <html> <head> <title>Turkmenistan Map</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"> <style> body { margin: 20px; font-family: Arial; } #map { height: 600px; width: 100%; border: 2px solid #ccc; } h1 { text-align: center; color: #2c3e50; } </style> </head> <body> <h1>Turkmenistan - Cities & Attractions</h1> <div id="map"></div> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> <script> // Create map var map = L.map('map').setView([39.0, 59.0], 6); // Add map tiles L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'OpenStreetMap' }).addTo(map); // Cities var cities = [ {name: "Ashgabat", lat: 37.9600, lng: 58.3269, desc: "Capital city"}, {name: "Turkmenabat", lat: 39.0833, lng: 63.6000, desc: "Second largest city"}, {name: "Turkmenbasy", lat: 40.0167, lng: 52.9667, desc: "Port city on Caspian Sea"}, {name: "Dasoguz", lat: 41.8333, lng: 59.9667, desc: "Northern city"}, {name: "Mary", lat: 37.6000, lng: 61.8333, desc: "Near ancient Merv"}, {name: "Balkanabat", lat: 39.5167, lng: 54.3667, desc: "Balkan Region capital"} ]; // Attractions var attractions = [ {name: "Ancient Merv", lat: 37.6630, lng: 62.1750, desc: "UNESCO World Heritage Site"}, {name: "Kunya-Urgench", lat: 42.3167, lng: 59.1583, desc: "UNESCO World Heritage Site"}, {name: "Darvaza Crater", lat: 40.2525, lng: 58.4395, desc: "Door to Hell gas crater"}, {name: "Yangykala Canyon", lat: 41.3333, lng: 54.9333, desc: "Colorful desert canyon"}, {name: "Awaza Resort", lat: 38.2800, lng: 56.9700, desc: "Caspian Sea resort zone"} ]; // Add cities (red markers) cities.forEach(function(city) { L.marker([city.lat, city.lng]) .addTo(map) .bindPopup("<b>" + city.name + "</b><br>" + city.desc + "<br>Coordinates: " + city.lat + ", " + city.lng); }); // Add attractions (blue markers) attractions.forEach(function(attraction) { L.marker([attraction.lat, attraction.lng]) .addTo(map) .bindPopup("<b>" + attraction.name + "</b><br>" + attraction.desc + "<br>Coordinates: " + attraction.lat + ", " + attraction.lng); }); // Add legend var legend = L.control({position: 'bottomright'}); legend.onAdd = function(map) { var div = L.DomUtil.create('div', 'legend'); div.innerHTML = '<h4>Legend</h4>' + '<p>Red markers: Cities</p>' + '<p>Blue markers: Attractions</p>'; div.style.background = 'white'; div.style.padding = '10px'; div.style.border = '1px solid #ccc'; return div; }; legend.addTo(map); </script> </body> </html>