@extends('master')
@section('title', 'Peta')
@section('header-konten')
    <!-- Page header -->
    <div class="page-header page-header-light shadow">
        <div class="page-header-content d-lg-flex">
            <div class="d-flex">
                <h4 class="page-title mb-0">
                    Halaman - <span class="fw-normal">Peta</span>
                </h4>

                <a href="#page_header"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>
        <div class="page-header-content d-lg-flex border-top">
            <div class="d-flex">
                <div class="breadcrumb py-2">
                    <a href="/" class="breadcrumb-item"><i class="ph-house"></i></a>
                    <span class="breadcrumb-item active">Peta</span>
                </div>

                <a href="#breadcrumb_elements"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>
    </div>
@endsection

@section('konten')
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Peta</h5>
        </div>

        <div class="card-body">
            <p class="mb-3">Peta Perumahan Secara Keseluruhan</p>

            <div id="map" style="height: 500px;"></div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin="">
    </script>
	<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
    
        <script>
            $(document).ready(function() {
                var layer1 = [];
                var layer3 = [];

                @foreach ($layers1 as $key1 => $f1)
                    layer1.push(L.geoJSON(@json($f1))
                        .bindPopup('<a href="'+ @json($f1)[1] +'" class="btn btn-outline-primary">'+@json($f1)[2]+'</a>')
                        .openPopup()
                    );
                @endforeach

                var greenIcon = new L.Icon({
                    iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
                    shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
                    iconSize: [25, 41],
                    iconAnchor: [12, 41],
                    popupAnchor: [1, -34],
                    shadowSize: [41, 41]
                });

                var redIcon = new L.Icon({
                    iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
                    shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
                    iconSize: [25, 41],
                    iconAnchor: [12, 41],
                    popupAnchor: [1, -34],
                    shadowSize: [41, 41]
                });

                @foreach ($rtlh as $r)
                    @if($r->x & $r->x)
                        var popRtlh =  `<div class="row">
                                            <div class="col-md-12">
                                                <table class="table table-striped table-bordered table-hover">
                                                    <tr>
                                                        <td>Nama</td>
                                                        <td>{{ $r->nama }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Alamat</td>
                                                        <td>{{ $r->alamat }}, {{ $r->desa->nama_desa ?? '' }}, {{ $r->kecamatan->nama_kecamatan ?? '' }}</td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>`;
                        layer3.push(L.marker([{{ $r->x }}, {{ $r->y }}], {icon: greenIcon}).bindPopup(popRtlh));
                    @endif
                @endforeach
                
                var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    maxZoom: 22,
                    'zIndex': 800
                });

                var ewi = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                    maxZoom: 19,
                    'zIndex': 800
                });
                
                var lokal = L.tileLayer('http://sinar.ngodingyuks.com/storage/tiled/{z}/{x}/{y}.jpg', {
                    maxZoom: 22,
                });

                var batas = L.layerGroup(layer1);
                var rtlhs = L.layerGroup(layer3);
                var rbencana = L.layerGroup();

                var pola = L.layerGroup();
                var karangploso = L.layerGroup();
                var kepanjen = L.layerGroup();
                var lawang = L.layerGroup();
                var singosari = L.layerGroup();
                var tumpang = L.layerGroup();

                var map = L.map('map', {
                    center: [-7.829946175292262, 112.52901913507618],
                    zoom: 17,
                    layers: [osm, batas, rtlhs]
                });

                function warnaPola (zona){
                    return zona == 'Bandara' ? '#00FFFF' :
                            zona == 'Danau/Waduk' ? '#305496' :
                            zona == 'Hutan Lindung' ? '#548235' :
                            zona == 'Hutan Rawa' ? '#A9D08E' :
                            zona == 'Kawasan Industri' ? '#808080' :
                            zona == 'Kawasan Komersial' ? '#FF33CC' :
                            zona == 'Kebun' ? '#00B050' :
                            zona == 'Pengembangan Kawasan Industri' ? '#161616' :
                            zona == 'Pengembangan Permukiman Perkotaan' ? '#FFC000' :
                            zona == 'Perikanan' ? '#00B0F0' :
                            zona == 'Permukiman' ? '#2F75B5' :
                            zona == 'Sawah Irigasi' ? '#00FF99' :
                            zona == 'Sawah Tadah Hujan' ? '#92D050' :
                            zona == 'Tegalan' ? '#BF8F00' : '#E31A1C';
                }
                function warnaPloso (zona){
                    return zona == 'Badan Air' ? '#00B0F0' :
                        zona == 'Rimba Kota' ? '#548235' :
                        zona == 'Taman Kecamatan' ? '#548235' :
                        zona == 'Taman Kelurahan' ? '#548235' :
                        zona == 'Taman RW' ? '#548235' :
                        zona == 'Tanaman Pangan' ? '#548235' :
                        zona == 'Perkebunan' ? '#548235' :
                        zona == 'Pemakaman' ? '#FFC000' :
                        zona == 'Cagar Budaya' ? '#FFC000' :
                        zona == 'Badan Jalan' ? '#C65911' :
                        zona == 'Hutan Produksi Tetap' ? '#375623' :
                        zona == 'Kawasan Peruntukan Industri' ? '#808080' :
                        zona == 'Pariwisata' ? '#7030A0' :
                        zona == 'Perumahan Kepadatan Tinggi' ? '#FFFF00' :
                        zona == 'Perumahan Kepadatan Sedang' ? '#FFFF00' :
                        zona == 'SPU Skala Kota' ? '#FFC000' :
                        zona == 'SPU Skala Kecamatan' ? '#FFC000' :
                        zona == 'SPU Skala Kelurahan' ? '#FFC000' :
                        zona == 'SPU Skala RW' ? '#FFC000' :
                        zona == 'Instalasi Pengolahan Air Limbah (IPAL)' ? '#FFC000' :
                        zona == 'Pengelolaan Persampahan' ? '#2F75C65911B5' :
                        zona == 'Campuran Intensitas Tinggi' ? '#C65911' :
                        zona == 'Campuran Intensitas Menengah/Sedang' ? '#C65911' :
                        zona == 'Perdagangan dan Jasa Skala Kota' ? '#FF33CC' :
                        zona == 'Perdagangan dan Jasa Skala WP' ? '#FF33CC' :
                        zona == 'Perdagangan dan Jasa Skala SWP' ? '#FF33CC' :
                        zona == 'Perkantoran' ? '#FF33CC' :
                        zona == 'Pertahanan dan Keamanan' ? '#BF8F00' :
                        zona == 'Perikanan Budi Daya' ? '#4472C4' :
                        zona == 'Perumahan Kepadatan Rendah' ? '#FFFF00' :
                        zona == 'Perumahan Kepadatan Sangat Rendah' ? '#FFFF00' :
                        zona == 'Transportasi' ? '#00FFFF' :
                        zona == 'Peternakan' ? '#BF8F00' : '#E31A1C';
                }
                function warnaKepanjen (zona){
                    return  zona == 'Zona Industri' ? '#808080' :
                            zona == 'Zona Sarana Pelayanan Umum' ? '#7030A0' :
                            zona == 'Zona RTH' ? '#548235' :
                            zona == 'Zona Peruntukan Khusus' ? '#FF0000' :
                            zona == 'Zona Perdagangan Dan Jasa' ? '#FF33CC' :
                            zona == 'Zona Perkantoran' ? '#FF33CC' :
                            zona == 'Perdagangan Dan Jasa' ? '#FF33CC' :
                            zona == 'Zona Peruntukan Lainnya' ? '#FFFFFF' :
                            zona == 'Zona Perlindungan Setempat' ? '#375623' :
                            zona == 'Zona Perumahan' ? '#BF8F00' : '#FFFF00';
                }
                function warnaLawang (zona){
                    return  zona == 'Perkebunan' ? '#548235' :
                            zona == 'Badan Jalan' ? '#ED7D31' :
                            zona == 'Taman Kota' ? '#548235' :
                            zona == 'Perumahan Kepadatan Tinggi' ? '#FFFF00' :
                            zona == 'Badan Air' ? '#305496' :
                            zona == 'Taman Kelurahan' ? '#548235' :
                            zona == 'SPU Skala Kota' ? '#F4B084' :
                            zona == 'Tanaman Pangan' ? '#548235' :
                            zona == 'Perkebunan Rakyat' ? '#548235' :
                            zona == 'Perumahan Kepadatan Sedang' ? '#FFFF00' :
                            zona == 'Pertahanan dan Keamanan' ? '#FF0000' :
                            zona == 'Perdagangan dan Jasa Skala WP' ? '#FF33CC' :
                            zona == 'Kawasan Peruntukan Industri' ? '#808080' :
                            zona == 'Pariwisata' ? '#FF33CC' :
                            zona == 'Perdagangan dan Jasa Skala SWP' ? '#FF33CC' :
                            zona == 'SPU Skala Kelurahan' ? '#F4B084' :
                            zona == 'Pemakaman' ? '#548235' :
                            zona == 'Perkantoran' ? '#FF33CC' :
                            zona == 'SPU Skala Kecamatan' ? '#F4B084' :
                            zona == 'SPU Skala RW' ? '#F4B084' :
                            zona == 'Pergudangan' ? '#808080' :
                            zona == 'Pembangkitan Tenaga Listrik' ? '#808080' :
                            zona == 'Campuran Intensitas Tinggi' ? '#808080' :
                            zona == 'Jalur Hijau' ? '#548235' :
                            zona == 'Hutan Produksi Tetap' ? '#548235' :
                            zona == 'Perdagangan dan Jasa Skala Kota' ? '#FF33CC' :
                            zona == 'Campuran Intensitas Menengah/Sedang' ? '#808080' :
                            zona == 'Transportasi' ? '#ED7D31' :
                            zona == 'Taman Kecamatan' ? '#548235' :
                            zona == 'Cagar Budaya' ? '#ED7D31' : '#E31A1C';
                }
                function warnaSingosari (zona){
                    return  zona == 'Zona Ruang Terbuka Hijau' ? '#548235' :
                            zona == 'Zona Sarana Pelayanan Umum' ? '#C65911' :
                            zona == 'Zona Perlindungan Setempat' ? '#FFC000' :
                            zona == 'Zona Peruntukan Lainnya' ? '#FFFFFF' :
                            zona == 'Zona Perumahan' ? '#FFFF00' :
                            zona == 'Zona Industri' ? '#808080' :
                            zona == 'Zona Perkantoran' ? '#FF33CC' :
                            zona == 'Zona Peruntukan Khusus' ? '#7030A0' :
                            zona == 'Zona Perdagangan dan Jasa' ? '#FF33CC' :
                            zona == 'Zona Suaka Alam dan Cagar Budaya' ? '#548235' : '#FFFF00';
                }
                function warnaTumpang (zona){
                    return  zona == 'Badan Air' ? '#00B0F0' :
                            zona == 'Badan Jalan' ? '#C65911' :
                            zona == 'Hortikultura' ? '#375623' :
                            zona == 'Perkebunan' ? '#375623' :
                            zona == 'Hutan Produksi Tetap' ? '#375623' :
                            zona == 'Jalur Hijau' ? '#548235' :
                            zona == 'Pemakaman' ? '#375623' :
                            zona == 'Perdagangan dan Jasa Skala SWP' ? '#FF33CC' :
                            zona == 'Perkantoran' ? '#FF33CC' :
                            zona == 'Perlindungan Setempat' ? '#C65911' :
                            zona == 'Perumahan Kepadatan Sedang' ? '#FFFF00' :
                            zona == 'Perumahan Kepadatan Tinggi' ? '#FFFF00' :
                            zona == 'SPU Skala Kecamatan' ? '#F4B084' :
                            zona == 'SPU Skala Kelurahan' ? '#F4B084' :
                            zona == 'Hutan Lindung' ? '#548235' :
                            zona == 'Pariwisata' ? '#7030A0' :
                            zona == 'Perumahan Kepadatan Rendah' ? '#FFFF00' :
                            zona == 'Peternakan' ? '#548235' :
                            zona == 'Taman Kelurahan' ? '#548235' :
                            zona == 'Taman Nasional' ? '#548235' :
                            zona == 'Pergudangan' ? '#808080' :
                            zona == 'Tanaman Pangan' ? '#548235' :
                            zona == 'Kawasan Peruntukan Industri' ? '#808080' :
                            zona == 'Perdagangan dan Jasa Skala WP' ? '#FF33CC' :
                            zona == 'Pertahanan dan Keamanan' ? '#C65911' :
                            zona == 'SPU Skala Kota' ? '#F4B084' :
                            zona == 'Transportasi' ? '#00FFFF' :
                            zona == 'Taman Kecamatan' ? '#548235' :
                            zona == 'Instalasi Pengolahan Air Minum (IPAM)' ? '#00B0F0' : '#E31A1C';
                }

                @foreach ($geojson as $geo)
                    @if ($geo->peta == 'Pola Ruang')
                        @if ($geo->file != null)
                            var url_geo = "{{ url('storage/files/peta/'.$geo->file) }}";
                            $.ajax({
                                beforeSend: function(xhr) {
                                    if (xhr && xhr.overrideMimeType) {
                                        xhr.overrideMimeType('application/json;charset=utf-8');
                                    }
                                },
                                dataType: "json",
                                url: url_geo,
                                success: function(dtPola) {
                                    var highlgPola;
                                    var clearHighlightPola = function() {
                                        if (highlgPola) {
                                            vctrPola.resetFeatureStyle(highlgPola);
                                        }
                                        highlgPola = null;
                                    };
                                    
                                    var vctrPola = L.vectorGrid.slicer(dtPola, {
                                        rendererFactory: L.svg.tile,
                                        zIndex: 900,
                                        vectorTileLayerStyles: {
                                            sliced: function(properties, zoom) {
                                                var p = properties.ZONA;
                                                return {
                                                    fillColor: warnaPola(p),
                                                    fillOpacity: 0.5,
                                                    stroke: true,
                                                    fill: true,
                                                    color: warnaPola(p),
                                                    weight: 1,
                                                    opacity: 1,
                                                }
                                            }
                                        },
                                        maxZoom: 22,
                                        interactive: true,
                                        getFeatureId: function(f) {
                                            return f.properties.NEWFIELD1;
                                        },
                                    }).on('click', function(e) {
                                        var properties = e.layer.properties;
                                        var stringe = `<table class="table table-bordered border-primary">
                                                            <tr>
                                                                <td class="text-dark">Zona</td>
                                                                <td class="text-dark">${properties.ZONA}</td>
                                                            </tr>
                                                        </table>`;
                                        L.popup()
                                            .setContent(stringe)
                                            .setLatLng(e.latlng)
                                            .openOn(map);

                                        clearHighlightPola();
                                        highlgPola = properties.NEWFIELD1;

                                        var p = properties.ZONA;
                                        var style = {
                                            fillColor: warnaPola(p),
                                            fillOpacity: 0.8,
                                            stroke: true,
                                            fill: true,
                                            color: warnaPola(p),
                                            opacity: 1,
                                            weight: 2,
                                        };

                                        vctrPola.setFeatureStyle(properties.NEWFIELD1, style);
                                        L.DomEvent.stopPropagation(e);
                                    });
                                    pola.addLayer( vctrPola );
                                    map.on('click', clearHighlightPola);
                                }
                            });
                        @endif
                    @elseif ($geo->peta == 'RDTR Karangploso')
                        @if ($geo->file != null)
                            var url_geo = "{{ url('storage/files/peta/'.$geo->file) }}";
                            $.ajax({
                                beforeSend: function(xhr) {
                                    if (xhr && xhr.overrideMimeType) {
                                        xhr.overrideMimeType('application/json;charset=utf-8');
                                    }
                                },
                                dataType: "json",
                                url: url_geo,
                                success: function(dtKarangploso) {
                                    var highlgKarang;
                                    var clearHighlightKarang = function() {
                                        if (highlgKarang) {
                                            vctrKarang.resetFeatureStyle(highlgKarang);
                                        }
                                        highlgKarang = null;
                                    };
                                    
                                    var vctrKarang = L.vectorGrid.slicer(dtKarangploso, {
                                        rendererFactory: L.svg.tile,
                                        zIndex: 1000,
                                        vectorTileLayerStyles: {
                                            sliced: function(properties, zoom) {
                                                var p = properties.ZONA;
                                                return {
                                                    fillColor: warnaPloso(p),
                                                    fillOpacity: 0.5,
                                                    stroke: true,
                                                    fill: true,
                                                    color: warnaPloso(p),
                                                    weight: 1,
                                                    opacity: 0.5,
                                                }
                                            }
                                        },
                                        maxZoom: 22,
                                        interactive: true,
                                        getFeatureId: function(f) {
                                            return f.properties.OBJECTID;
                                        },
                                    }).on('click', function(e) {
                                        var properties = e.layer.properties;
                                        var stringe = `<table class="table table-bordered border-primary">
                                                            <tr>
                                                                <td class="text-dark">Zona</td>
                                                                <td class="text-dark">${properties.ZONA}</td>
                                                            </tr>
                                                        </table>`;
                                        L.popup()
                                            .setContent(stringe)
                                            .setLatLng(e.latlng)
                                            .openOn(map);

                                        clearHighlightKarang();
                                        highlgKarang = properties.OBJECTID;

                                        var p = properties.ZONA;
                                        var style = {
                                            fillColor: warnaPloso(p),
                                            fillOpacity: 0.8,
                                            stroke: true,
                                            fill: true,
                                            color: warnaPloso(p),
                                            opacity: 0.8,
                                            weight: 2,
                                        };

                                        vctrKarang.setFeatureStyle(properties.OBJECTID, style);
                                        L.DomEvent.stopPropagation(e);
                                    });
                                    karangploso.addLayer( vctrKarang );
                                    map.on('click', clearHighlightKarang);
                                }
                            });
                        @endif
                    @elseif ($geo->peta == 'RDTR Kepanjen')
                        @if ($geo->file != null)
                            var url_geo = "{{ url('storage/files/peta/'.$geo->file) }}";
                            $.ajax({
                                beforeSend: function(xhr) {
                                    if (xhr && xhr.overrideMimeType) {
                                        xhr.overrideMimeType('application/json;charset=utf-8');
                                    }
                                },
                                dataType: "json",
                                url: url_geo,
                                success: function(dtKepanjen) {
                                    var highlgKepanjen;
                                    var clearHighlightKepanjen = function() {
                                        if (highlgKepanjen) {
                                            vctrKepanjen.resetFeatureStyle(highlgKepanjen);
                                        }
                                        highlgKepanjen = null;
                                    };
                                    
                                    var vctrKepanjen = L.vectorGrid.slicer(dtKepanjen, {
                                        rendererFactory: L.svg.tile,
                                        zIndex: 1000,
                                        vectorTileLayerStyles: {
                                            sliced: function(properties, zoom) {
                                                var p = properties.ZONA;
                                                return {
                                                    fillColor: warnaKepanjen(p),
                                                    fillOpacity: 0.5,
                                                    stroke: true,
                                                    fill: true,
                                                    color: warnaKepanjen(p),
                                                    weight: 1,
                                                    opacity: 0.5,
                                                }
                                            }
                                        },
                                        maxZoom: 22,
                                        interactive: true,
                                        getFeatureId: function(f) {
                                            return f.properties.LUAS;
                                        },
                                    }).on('click', function(e) {
                                        var properties = e.layer.properties;
                                        var stringe = `<table class="table table-bordered border-primary">
                                                            <tr>
                                                                <td class="text-dark">Zona</td>
                                                                <td class="text-dark">${properties.ZONA}</td>
                                                            </tr>
                                                        </table>`;
                                        L.popup()
                                            .setContent(stringe)
                                            .setLatLng(e.latlng)
                                            .openOn(map);

                                        clearHighlightKepanjen();
                                        highlgKepanjen = properties.LUAS;

                                        var p = properties.ZONA;
                                        var style = {
                                            fillColor: warnaKepanjen(p),
                                            fillOpacity: 0.8,
                                            stroke: true,
                                            fill: true,
                                            color: warnaKepanjen(p),
                                            opacity: 0.8,
                                            weight: 2,
                                        };

                                        vctrKepanjen.setFeatureStyle(properties.LUAS, style);
                                        L.DomEvent.stopPropagation(e);
                                    });
                                    kepanjen.addLayer( vctrKepanjen );
                                    map.on('click', clearHighlightKepanjen);
                                }
                            });
                        @endif
                    @elseif ($geo->peta == 'RDTR Lawang')
                        @if ($geo->file != null)
                            var url_geo = "{{ url('storage/files/peta/'.$geo->file) }}";
                            $.ajax({
                                beforeSend: function(xhr) {
                                    if (xhr && xhr.overrideMimeType) {
                                        xhr.overrideMimeType('application/json;charset=utf-8');
                                    }
                                },
                                dataType: "json",
                                url: url_geo,
                                success: function(dtLawang) {
                                    var highlgLawang;
                                    var clearHighlightLawang = function() {
                                        if (highlgLawang) {
                                            vctrLawang.resetFeatureStyle(highlgLawang);
                                        }
                                        highlgLawang = null;
                                    };
                                    
                                    var vctrLawang = L.vectorGrid.slicer(dtLawang, {
                                        rendererFactory: L.svg.tile,
                                        zIndex: 1000,
                                        vectorTileLayerStyles: {
                                            sliced: function(properties, zoom) {
                                                var p = properties.ZONA;
                                                return {
                                                    fillColor: warnaLawang(p),
                                                    fillOpacity: 0.5,
                                                    stroke: true,
                                                    fill: true,
                                                    color: warnaLawang(p),
                                                    weight: 1,
                                                    opacity: 0.5,
                                                }
                                            }
                                        },
                                        maxZoom: 22,
                                        interactive: true,
                                        getFeatureId: function(f) {
                                            return f.properties.OBJECTID;
                                        },
                                    }).on('click', function(e) {
                                        var properties = e.layer.properties;
                                        var stringe = `<table class="table table-bordered border-primary">
                                                            <tr>
                                                                <td class="text-dark">Zona</td>
                                                                <td class="text-dark">${properties.ZONA}</td>
                                                            </tr>
                                                        </table>`;
                                        L.popup()
                                            .setContent(stringe)
                                            .setLatLng(e.latlng)
                                            .openOn(map);

                                        clearHighlightLawang();
                                        highlgLawang = properties.OBJECTID;

                                        var p = properties.ZONA;
                                        var style = {
                                            fillColor: warnaLawang(p),
                                            fillOpacity: 0.8,
                                            stroke: true,
                                            fill: true,
                                            color: warnaLawang(p),
                                            opacity: 0.8,
                                            weight: 2,
                                        };

                                        vctrLawang.setFeatureStyle(properties.OBJECTID, style);
                                        L.DomEvent.stopPropagation(e);
                                    });
                                    lawang.addLayer( vctrLawang );
                                    map.on('click', clearHighlightLawang);
                                }
                            });
                        @endif
                    @elseif ($geo->peta == 'RDTR Singosari')
                        @if ($geo->file != null)
                            var url_geo = "{{ url('storage/files/peta/'.$geo->file) }}";
                            $.ajax({
                                beforeSend: function(xhr) {
                                    if (xhr && xhr.overrideMimeType) {
                                        xhr.overrideMimeType('application/json;charset=utf-8');
                                    }
                                },
                                dataType: "json",
                                url: url_geo,
                                success: function(dtSingosari) {
                                    var highlgSingosari;
                                    var clearHighlightSingosari = function() {
                                        if (highlgSingosari) {
                                            vctrSingosari.resetFeatureStyle(highlgSingosari);
                                        }
                                        highlgSingosari = null;
                                    };
                                    
                                    var vctrSingosari = L.vectorGrid.slicer(dtSingosari, {
                                        rendererFactory: L.svg.tile,
                                        zIndex: 1000,
                                        vectorTileLayerStyles: {
                                            sliced: function(properties, zoom) {
                                                var p = properties.ZONA;
                                                return {
                                                    fillColor: warnaSingosari(p),
                                                    fillOpacity: 0.5,
                                                    stroke: true,
                                                    fill: true,
                                                    color: warnaSingosari(p),
                                                    weight: 1,
                                                    opacity: 0.5,
                                                }
                                            }
                                        },
                                        maxZoom: 22,
                                        interactive: true,
                                        getFeatureId: function(f) {
                                            return f.properties.OBJECTID_1;
                                        },
                                    }).on('click', function(e) {
                                        var properties = e.layer.properties;
                                        var stringe = `<table class="table table-bordered border-primary">
                                                            <tr>
                                                                <td class="text-dark">Zona</td>
                                                                <td class="text-dark">${properties.ZONA}</td>
                                                            </tr>
                                                        </table>`;
                                        L.popup()
                                            .setContent(stringe)
                                            .setLatLng(e.latlng)
                                            .openOn(map);

                                        clearHighlightSingosari();
                                        highlgSingosari = properties.OBJECTID_1;

                                        var p = properties.ZONA;
                                        var style = {
                                            fillColor: warnaSingosari(p),
                                            fillOpacity: 0.8,
                                            stroke: true,
                                            fill: true,
                                            color: warnaSingosari(p),
                                            opacity: 0.8,
                                            weight: 2,
                                        };

                                        vctrSingosari.setFeatureStyle(properties.OBJECTID_1, style);
                                        L.DomEvent.stopPropagation(e);
                                    });
                                    singosari.addLayer( vctrSingosari );
                                    map.on('click', clearHighlightSingosari);
                                }
                            });
                        @endif
                    @elseif ($geo->peta == 'RDTR Tumpang')
                        @if ($geo->file != null)
                            var url_geo = "{{ url('storage/files/peta/'.$geo->file) }}";
                            $.ajax({
                                beforeSend: function(xhr) {
                                    if (xhr && xhr.overrideMimeType) {
                                        xhr.overrideMimeType('application/json;charset=utf-8');
                                    }
                                },
                                dataType: "json",
                                url: url_geo,
                                success: function(dtTumpang) {
                                    var highlgTumpang;
                                    var clearHighlightTumpang = function() {
                                        if (highlgTumpang) {
                                            vctrTumpang.resetFeatureStyle(highlgTumpang);
                                        }
                                        highlgTumpang = null;
                                    };
                                    
                                    var vctrTumpang = L.vectorGrid.slicer(dtTumpang, {
                                        rendererFactory: L.svg.tile,
                                        zIndex: 1000,
                                        vectorTileLayerStyles: {
                                            sliced: function(properties, zoom) {
                                                var p = properties.ZONA;
                                                return {
                                                    fillColor: warnaTumpang(p),
                                                    fillOpacity: 0.5,
                                                    stroke: true,
                                                    fill: true,
                                                    color: warnaTumpang(p),
                                                    weight: 1,
                                                    opacity: 0.5,
                                                }
                                            }
                                        },
                                        maxZoom: 22,
                                        interactive: true,
                                        getFeatureId: function(f) {
                                            return f.properties.OBJECTID;
                                        },
                                    }).on('click', function(e) {
                                        var properties = e.layer.properties;
                                        var stringe = `<table class="table table-bordered border-primary">
                                                            <tr>
                                                                <td class="text-dark">Zona</td>
                                                                <td class="text-dark">${properties.ZONA}</td>
                                                            </tr>
                                                        </table>`;
                                        L.popup()
                                            .setContent(stringe)
                                            .setLatLng(e.latlng)
                                            .openOn(map);

                                        clearHighlightTumpang();
                                        highlgTumpang = properties.OBJECTID;

                                        var p = properties.ZONA;
                                        var style = {
                                            fillColor: warnaTumpang(p),
                                            fillOpacity: 0.8,
                                            stroke: true,
                                            fill: true,
                                            color: warnaTumpang(p),
                                            opacity: 0.8,
                                            weight: 2,
                                        };

                                        vctrTumpang.setFeatureStyle(properties.OBJECTID, style);
                                        L.DomEvent.stopPropagation(e);
                                    });
                                    tumpang.addLayer( vctrTumpang );
                                    map.on('click', clearHighlightTumpang);
                                }
                            });
                        @endif
                    @endif
                @endforeach

                @foreach($bencana as $bcn)
                    @if($bcn->x != null && $bcn->y != null)
                        var pop =  `<div class="row">
                                        <div class="col-md-12">
                                            <table class="table table-striped table-bordered table-hover">
                                                <tr>
                                                    <td>Nama</td>
                                                    <td>{{ $bcn->nama }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Alamat</td>
                                                    <td>{{ $bcn->alamat }}, {{ $bcn->Tokecamatan->nama_kecamatan }}, {{ $bcn->Todesa->nama_desa }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Tahun</td>
                                                    <td>{{ $bcn->tahun }}</td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" class="text-center"><a href="{{url('storage/public/images/bencana/'.$bcn->id.'/'.$bcn->foto)}}" target="_blank"><img src="{{url('storage/public/images/bencana/'.$bcn->id.'/'.$bcn->foto)}}" alt="Gambar Rumah" height="200" width="300"></a></td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>`;
                        var mrk = L.marker([{{$bcn->x}}, {{$bcn->y}}], {icon: redIcon}).bindPopup(pop,{minWidth: 600}).addTo(rbencana);
                        mrk.on('click', function(e) {
                            map.flyTo(e.latlng, 18);
                        });
                    @endif
                @endforeach

                var baseLayers = {
                    'OpenStreetMap': osm,
                    'World Imagery' : ewi,
                    'Lokal': lokal,
                };

                var overlays = {
                    'Batas': batas,
                    'RTLH': rtlhs,
                    'Rumah Bencana': rbencana,
                    'Pola Ruang': pola,
                    // 'RDTR Karangploso': karangploso,
                    // 'RDTR Kepanjen': kepanjen,
                    // 'RDTR Lawang': lawang,
                    // 'RDTR Singosari': singosari,
                    // 'RDTR Tumpang': tumpang,
                };

                var layerControl = L.control.layers(baseLayers, overlays, {
                    'autoZIndex': false
                }).addTo(map);
            });
        </script>
@endsection