kokjan/backend/modules/gis/views/map/map.php

<?php

use common\models\GisBase;
use yii\helpers\Url;

$this->title = 'แผนที่';
?>
<!-- Leaflet -->
<?php $this->registerCssFile("https://unpkg.com/leaflet/dist/leaflet.css") ?>
<?php $this->registerJsFile("https://unpkg.com/leaflet/dist/leaflet.js") ?>
<!-- Leaflet Draw -->
<?php $this->registerCssFile("https://unpkg.com/leaflet-draw/dist/leaflet.draw.css") ?>
<?php $this->registerJsFile("https://unpkg.com/leaflet-draw/dist/leaflet.draw.js") ?>

<?php $this->registerCssFile("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css") ?>



<h5><i class="bi bi-layers"></i> เลือกชั้นข้อมูล</h5>
<select id="layerSelector" class="form-select form-select-sm mt-2">
    <option value="">-- กรุณาเลือก --</option>
    <?php foreach (GisBase::find()->all() as $base) { ?>
        <option value="<?= $base->id ?>"><?= $base->name ?></option>
    <?php } ?>
</select>

<div id="map" style="height: 800px;"></div>



<style>
    #map {
        height: 800px;
        border-radius: 0.5rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border: 1px solid #ccc;
    }

    .map-wrapper {
        padding: 1rem;
    }
</style>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const map = L.map("map").setView([15.233509, 104.325743], 14);
        const geoLayerGroup = L.layerGroup().addTo(map);

        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
            attribution: "© OpenStreetMap contributors"
        }).addTo(map);

        const layerSelector = document.getElementById("layerSelector");

        function loadGeoLayer(gis_base_id = "") {
            geoLayerGroup.clearLayers();

            let url = '<?= Url::to(['/map/map/geojson']) ?>';
            if (gis_base_id) {
                url += '?GisGeoFeatures[gis_base_id]=' + encodeURIComponent(gis_base_id);
            }

            fetch(url)
                .then(res => res.json())
                .then(data => {
                    L.geoJSON(data, {
                        /*pointToLayer: function(feature, latlng) {
                            const color = feature.properties?.color || '#dc3545';

                            return L.circleMarker(latlng, {
                                radius: 8,
                                fillColor: color,
                                color: '#000',
                                weight: 1,
                                opacity: 1,
                                fillOpacity: 0.8
                            });
                        },*/
                        pointToLayer: function(feature, latlng) {
                            const color = feature.properties?.color || '#007bff';

                            const icon = L.divIcon({
                                className: 'custom-div-icon',
                                html: `<div style="background:${color}; width:12px; height:12px; border-radius:50%; border:2px solid white;"></div>`,
                                iconSize: [16, 16],
                                iconAnchor: [8, 8]
                            });

                            return L.marker(latlng, {
                                icon
                            });
                        },
                        style: function(feature) {
                            return {
                                color: feature.properties?.color || '#0d6efd',
                                weight: 2,
                                fillOpacity: 0.3
                            };
                        },
                        onEachFeature: function(feature, layer) {
                            if (feature.properties.interactive === false) {
                                // ✅ ปิดการคลิกเฉพาะ feature นี้
                                layer.options.interactive = false;
                                layer.off(); // remove all event listeners
                            } else {
                                const name = feature.properties?.name || 'ไม่มีชื่อ';
                                layer.bindPopup(`<b>${name}</b>`);
                            }

                        }
                    }).addTo(geoLayerGroup);
                });
        }

        // โหลดทั้งหมดตอนเริ่ม
        loadGeoLayer();

        // เมื่อเปลี่ยน dropdown
        layerSelector.addEventListener('change', function() {
            const selected = this.value;
            loadGeoLayer(selected);
        });
    });
</script>

<?php if(false){?>
<div class="card">
    <div class="card-header">
        <h4 class="card-title">รายการข้อมูล</h4>
    </div>
    <div class="card-body">

    </div>
</div>
<?php }?>