<?php 
session_start();
//echo "hello" ;
?>

<style type="text/css">
    #map{
        width: 100%;
        height: 100vh;
    }
    .map-info-box {
        background-color: #fff;
        border: 1px solid #d3d3d3;
        width: 250px;
        padding: 10px;
        border-radius: 12px;
        z-index: 500;
        position: absolute;
        right: 8px;
        top: 8px;
        cursor: auto;
        display: none; /* Initially hide the info box */
    }
    .close {
        font-size: 25px;
        font-weight: 600;
        cursor: pointer;
        float: right;
    }
</style>

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src = "module/ground_water_ex/js/leaflet-providers.js"></script>

<div id="cover-spin"></div>

<div id="map" style="width: 100%; height: 600px">
   
    <div id="map-dis" class="map-info-box">
        <span class="close" onclick="closeMapInfoBox()">&times;</span>
        <div id="pointer"></div>
    </div>
</div>

<?php 
//select DISTINCT( A.STATION_ID),B.LATITUDE,B.LONGITUDE FROM climatology_tbl A  LEFT JOIN sw_station_tbl B ON A.STATION_ID = B.STATION_ID where 1=1
// foreach($obj->View_column_details_By_Cond_hydro("climatology_tbl A  LEFT JOIN sw_station_tbl B ON A.STATION_ID = B.STATION_ID","DISTINCT( A.STATION_ID),B.LATITUDE,B.LONGITUDE ","1=1") as $district){
//     print_r( $district);
//   }






$districts = [
    ['name' => 'Dhaka', 'lat' => 23.8103, 'lon' => 90.4125],
    ['name' => 'Chittagong', 'lat' => 22.3569, 'lon' => 91.7832],
    // Add more districts with their respective coordinates here
    // ...
];
?>
<!-- <script>
    var osmMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data © OpenStreetMap contributors'
    });

    var stamenMap = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
        attribution: 'Map data © Stamen'
    });

    var imageryMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        attribution: 'Map data © Esri'
    });

    var baseMaps = {
        "OSM": osmMap,
        'Stamen Watercolor': stamenMap,
        'World Imagery': imageryMap
    };

    var geoServerIPPort = 'localhost:8085';
    var geoServerWorkspace = 'GIS';
    var stateLayerName = 'GIS:bd_st';

    var indStateLayer = L.tileLayer.wms(
        "http://" + geoServerIPPort + "/geoserver/" + geoServerWorkspace + "/wms",
        {
            layers: stateLayerName,
            format: "image/png",
            transparent: true,
            version: "1.1.0",
            tiled: true,
        }
    );php

    var overlayMaps = {
        "Bangladesh States": indStateLayer,
    };

    var map = L.map('map', {
        center: [23.684994, 90.356331],
        zoom: 8, // Adjust zoom level to show the entire country
        layers: [osmMap, indStateLayer] // Add OSM as the default base map
    });

    var mapLayers = L.control.layers(baseMaps, overlayMaps).addTo(map);
</script> -->

<script>
    // Initialize the map
    //icon part
    var map = L.map('map').setView([23.8103, 90.4125], 7, {icon: greenIcon});
    var greenIcon = L.icon({
        iconUrl: 'http://www.hydrology.bwdb.gov.bd/map_icons/green.png',
        iconSize:     [15, 25], // size of the icon		
	});

    // Add the OpenStreetMap tile layer to the map
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        // attribution: 'Map data © OpenStreetMap contributors',
        maxZoom: 18
    }).addTo(map);

    // Common coordinates for the markers

    // Add markers for each district with popups on hover
    var districts = <?php echo json_encode($districts); ?>;
    var mapInfoBox = document.getElementById('map-dis');
    var pointer = document.getElementById('pointer');

    for (var i = 0; i < districts.length; i++) {
        var district = districts[i];
        var marker = L.marker([district.lat, district.lon], {icon: greenIcon}).addTo(map);

        // Create and bind a popup to the marker
        marker.bindPopup("<h4>"+district.name+"</h4><p> This is the trail Popup</p>", { autoPan: false });
        
        // Function to show the map-info-box on marker hover
        marker.on('mouseover', function(e) {
            mapInfoBox.style.display = 'block'; // Show the info box
            pointer.innerHTML = this.getPopup().getContent();
        });
        marker.off('click');
        marker.on('click', function() {return;});


    }
    
    // Function to close the map-info-box
    function closeMapInfoBox() {
        mapInfoBox.style.display = 'none';
    }
</script>

