Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Bangladesh GIS Map</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <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 { | |
| height: 70vh; | |
| width: 100%; | |
| position: relative; | |
| border-radius: 1rem; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .legend { | |
| padding: 10px; | |
| background: white; | |
| border-radius: 5px; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); | |
| } | |
| .legend i { | |
| width: 18px; | |
| height: 18px; | |
| float: left; | |
| margin-right: 8px; | |
| opacity: 0.7; | |
| } | |
| .district-boundary { | |
| stroke: #555; | |
| weight: 1; | |
| opacity: 0.7; | |
| fillColor: "#0000ff"; | |
| fillOpacity: 0.1; | |
| dashArray: '3' | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-green-800 mb-2">Bangladesh GIS Map</h1> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Interactive map showing geographical features, districts, and major cities of Bangladesh</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md mb-8"> | |
| <div id="map"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="font-semibold text-lg text-green-700 mb-3">Geographical Overview</h3> | |
| <p class="text-gray-700">Bangladesh is located in South Asia between latitudes 20°34'N to 26°38'N and longitudes 88°01'E to 92°41'E.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="font-semibold text-lg text-green-700 mb-3">Administrative Divisions</h3> | |
| <p class="text-gray-700">Bangladesh is divided into 8 divisions, 64 districts, and 495 upazilas (sub-districts).</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="font-semibold text-lg text-green-700 mb-3">Key Features</h3> | |
| <ul class="text-gray-700 list-disc pl-5"> | |
| <li>Riverine delta</li> | |
| <li>Coastal plain</li> | |
| <li>Chittagong Hill Tracts</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h2 class="text-xl font-semibold text-green-800 mb-4">Map Controls</h2> | |
| <div class="flex flex-wrap gap-4"> | |
| <button onclick="toggleDistricts()" id="districtToggle" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition"> | |
| Hide District Boundaries | |
| </button> | |
| <button onclick="focusOnCapital()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"> | |
| Focus on Dhaka | |
| </button> | |
| <button onclick="showRiverNetwork()" class="px-4 py-2 bg-teal-600 text-white rounded hover:bg-teal-700 transition"> | |
| Show Major Rivers | |
| </button> | |
| <div class="relative"> | |
| <select onchange="zoomToDivision(this)" class="block appearance-none bg-gray-100 border border-gray-200 text-gray-700 py-2 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"> | |
| <option value="">Zoom to Division...</option> | |
| <option value="Dhaka">Dhaka</option> | |
| <option value="Chittagong">Chittagong</option> | |
| <option value="Rajshahi">Rajshahi</option> | |
| <option value="Khulna">Khulna</option> | |
| <option value="Barisal">Barisal</option> | |
| <option value="Sylhet">Sylhet</option> | |
| <option value="Rangpur">Rangpur</option> | |
| <option value="Mymensingh">Mymensingh</option> | |
| </select> | |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> | |
| <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize the map centered on Bangladesh | |
| const map = L.map('map').setView([23.6850, 90.3563], 7); | |
| // Add OpenStreetMap base layer | |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' | |
| }).addTo(map); | |
| // Variables to store our layers | |
| let districtLayer, riverLayer; | |
| // Load QGIS-generated GeoJSON files | |
| let bangladeshDistricts; | |
| // Fetch district boundaries (exported from QGIS) | |
| fetch('data/bangladesh_districts.geojson') // Update this path to your actual exported QGIS file | |
| .then(response => response.json()) | |
| .then(data => { | |
| bangladeshDistricts = data; | |
| addDistricts(); | |
| }) | |
| .catch(error => console.error('Error loading districts:', error)); | |
| // Function to add district boundaries with QGIS-style | |
| function addDistricts() { | |
| districtLayer = L.geoJSON(bangladeshDistricts, { | |
| style: function(feature) { | |
| // Style based on QGIS symbology | |
| return { | |
| fillColor: getDivisionColor(feature.properties.division), | |
| weight: 1, | |
| opacity: 1, | |
| color: 'white', | |
| dashArray: '3', | |
| fillOpacity: 0.7 | |
| }; | |
| }, | |
| onEachFeature: function(feature, layer) { | |
| layer.bindPopup(`<b>District:</b> ${feature.properties.name}<br><b>Division:</b> ${feature.properties.division}`); | |
| } | |
| }).addTo(map); | |
| } | |
| // Function to toggle district boundaries | |
| function toggleDistricts() { | |
| const btn = document.getElementById('districtToggle'); | |
| if (map.hasLayer(districtLayer)) { | |
| map.removeLayer(districtLayer); | |
| btn.textContent = 'Show District Boundaries'; | |
| btn.classList.remove('bg-green-600'); | |
| btn.classList.add('bg-gray-600'); | |
| } else { | |
| if (!districtLayer) { | |
| addDistricts(); | |
| } else { | |
| map.addLayer(districtLayer); | |
| } | |
| btn.textContent = 'Hide District Boundaries'; | |
| btn.classList.remove('bg-gray-600'); | |
| btn.classList.add('bg-green-600'); | |
| } | |
| } | |
| // Add districts initially | |
| addDistricts(); | |
| // Function to focus on the capital (Dhaka) | |
| function focusOnCapital() { | |
| map.setView([23.8103, 90.4125], 11); | |
| // Add a marker for Dhaka | |
| L.marker([23.8103, 90.4125]).addTo(map) | |
| .bindPopup("<b>Dhaka</b><br>Capital of Bangladesh") | |
| .openPopup(); | |
| } | |
| // Helper function for division colors (matching QGIS) | |
| function getDivisionColor(division) { | |
| const colors = { | |
| 'Dhaka': '#1f78b4', | |
| 'Chittagong': '#33a02c', | |
| 'Rajshahi': '#e31a1c', | |
| 'Khulna': '#ff7f00', | |
| 'Barisal': '#6a3d9a', | |
| 'Sylhet': '#b15928', | |
| 'Rangpur': '#a6cee3', | |
| 'Mymensingh': '#fb9a99' | |
| }; | |
| return colors[division] || '#cccccc'; | |
| } | |
| // Function to show QGIS-generated rivers | |
| function showRiverNetwork() { | |
| if (riverLayer) { | |
| map.removeLayer(riverLayer); | |
| riverLayer = null; | |
| return; | |
| } | |
| // Load QGIS-generated river data | |
| fetch('data/bangladesh_rivers.geojson') // Update this path to your actual exported QGIS file | |
| .then(response => response.json()) | |
| .then(data => { | |
| riverLayer = L.geoJSON(data, { | |
| style: { | |
| color: "#3182ce", | |
| weight: 3, | |
| opacity: 0.7 | |
| }, | |
| onEachFeature: function(feature, layer) { | |
| layer.bindPopup(`<b>River:</b> ${feature.properties.name || 'Unnamed River'}`); | |
| } | |
| }).addTo(map); | |
| }) | |
| .catch(error => console.error('Error loading rivers:', error)); | |
| riverLayer = L.geoJSON(majorRivers, { | |
| style: { | |
| color: "#3182ce", | |
| weight: 3, | |
| opacity: 0.7 | |
| }, | |
| onEachFeature: function(feature, layer) { | |
| layer.bindPopup(`<b>River:</b> ${feature.properties.name}`); | |
| } | |
| }).addTo(map); | |
| } | |
| // Function to zoom to a division | |
| function zoomToDivision(select) { | |
| const division = select.value; | |
| if (!division) return; | |
| // In a real app, you would have proper bounding boxes for each division | |
| switch(division) { | |
| case "Dhaka": | |
| map.setView([23.8103, 90.4125], 9); | |
| break; | |
| case "Chittagong": | |
| map.setView([22.3569, 91.7832], 9); | |
| break; | |
| case "Rajshahi": | |
| map.setView([24.3745, 88.6042], 9); | |
| break; | |
| case "Khulna": | |
| map.setView([22.8088, 89.2467], 9); | |
| break; | |
| case "Barisal": | |
| map.setView([22.7010, 90.3535], 9); | |
| break; | |
| case "Sylhet": | |
| map.setView([24.8949, 91.8687], 9); | |
| break; | |
| case "Rangpur": | |
| map.setView([25.7439, 89.2752], 9); | |
| break; | |
| case "Mymensingh": | |
| map.setView([24.7471, 90.4203], 9); | |
| break; | |
| } | |
| // Reset the select box | |
| select.value = ""; | |
| } | |
| // Add scale control | |
| L.control.scale().addTo(map); | |
| // Add legend (simplified) | |
| const legend = L.control({position: 'bottomright'}); | |
| legend.onAdd = function() { | |
| const div = L.DomUtil.create('div', 'legend'); | |
| div.innerHTML = ` | |
| <h4 class="font-semibold mb-2">Legend</h4> | |
| <div class="flex items-center mb-1"> | |
| <i class="border border-gray-500 bg-blue-100"></i> | |
| <span>Districts</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="border border-blue-500 bg-blue-500 w-4 h-2"></i> | |
| <span>Rivers</span> | |
| </div> | |
| `; | |
| return div; | |
| }; | |
| legend.addTo(map); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=thenoobman69/map" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |