@extends('layouts.app2')
@section('Home', 'active')
@section('title', 'Home')
@section('position', 'ml-auto')

@push('css')

    @php 
        $arrayMonth = array(
            "","JANUARI","FEBRUARI","MARET","APRIL","MEI","JUNI","JULI","AGUSTUS","SEPTEMBER","OKTOBER","NOPEMBER","DESEMBER"
        );
    @endphp 
    <style>
        p {
            margin-bottom: 0;
        }

        @media (max-width: 576px) {
            .img-icon {
                width: 100%;
            }
        }

        .demo-gallery>ul {
            margin-bottom: 0;
        }

        .demo-gallery>ul>li {
            float: left;

            width: 200px;
        }

        .demo-gallery>ul>li a {
            border: 3px solid #fff;
            border-radius: 3px;
            display: block;
            overflow: hidden;
            position: relative;
            float: left;
        }

        .demo-gallery>ul>li a>img {
            -webkit-transition: -webkit-transform 0.15s ease 0s;
            -moz-transition: -moz-transform 0.15s ease 0s;
            -o-transition: -o-transform 0.15s ease 0s;
            transition: transform 0.15s ease 0s;
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
            height: 100%;
            width: 100%;
        }

        .demo-gallery>ul>li a:hover>img {
            -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
        }

        .demo-gallery>ul>li a:hover .demo-gallery-poster>img {
            opacity: 1;
        }

        .demo-gallery>ul>li a .demo-gallery-poster {
            background-color: rgba(0, 0, 0, 0.1);
            bottom: 0;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            -webkit-transition: background-color 0.15s ease 0s;
            -o-transition: background-color 0.15s ease 0s;
            transition: background-color 0.15s ease 0s;
        }

        .demo-gallery>ul>li a .demo-gallery-poster>img {
            left: 50%;
            margin-left: -10px;
            margin-top: -10px;
            opacity: 0;
            position: absolute;
            top: 50%;
            -webkit-transition: opacity 0.3s ease 0s;
            -o-transition: opacity 0.3s ease 0s;
            transition: opacity 0.3s ease 0s;
        }

        .demo-gallery>ul>li a:hover .demo-gallery-poster {
            background-color: rgba(0, 0, 0, 0.5);
        }

        .demo-gallery .justified-gallery>a>img {
            -webkit-transition: -webkit-transform 0.15s ease 0s;
            -moz-transition: -moz-transform 0.15s ease 0s;
            -o-transition: -o-transform 0.15s ease 0s;
            transition: transform 0.15s ease 0s;
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
            height: 100%;
            width: 100%;
        }

        .demo-gallery .justified-gallery>a:hover>img {
            -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
        }

        .demo-gallery .justified-gallery>a:hover .demo-gallery-poster>img {
            opacity: 1;
        }

        .demo-gallery .justified-gallery>a .demo-gallery-poster {
            background-color: rgba(0, 0, 0, 0.1);
            bottom: 0;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            -webkit-transition: background-color 0.15s ease 0s;
            -o-transition: background-color 0.15s ease 0s;
            transition: background-color 0.15s ease 0s;
        }

        .demo-gallery .justified-gallery>a .demo-gallery-poster>img {
            left: 50%;
            margin-left: -10px;
            margin-top: -10px;
            opacity: 0;
            position: absolute;
            top: 50%;
            -webkit-transition: opacity 0.3s ease 0s;
            -o-transition: opacity 0.3s ease 0s;
            transition: opacity 0.3s ease 0s;
        }

        .demo-gallery .justified-gallery>a:hover .demo-gallery-poster {
            background-color: rgba(0, 0, 0, 0.5);
        }

        .demo-gallery .video .demo-gallery-poster img {
            height: 48px;
            margin-left: -24px;
            margin-top: -24px;
            opacity: 0.8;
            width: 48px;
        }

        .demo-gallery.dark>ul>li a {
            border: 3px solid #04070a;
        }

        .demo-gallery {
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        iframe {
            margin: 0;
        }

        .setengah {
            width: 100%;
            height: 80vh;
        }

        #exTab3 .nav-pills > li > a {
         border-radius: 4px 4px 0 0 ;
        }

        #exTab3 .tab-content {
            color : white;
            background-color: #428bca;
            padding : 5px 15px;
        }

    </style>
@endpush

@section('content')

    {{-- hero home --}}
    <div class="hero-home overflow-x">
        <div class="container">
            
            <div class="text-center">
                <div class="d-flex justify-content-center">
                    <br><br>
                    <h1 class="mb-3 mr-1" data-aos="fade-up">Sistem Informasi Kelautan dan Perikanan Provinsi DKI Jakarta</h1>
                </div>
                <br> <br>
                <!-- <div class="text-center">
                  <img src="{{asset('assets/img/logo_jack_ocean.png')}}" style='max-width:30%;' class="img-fluid">
                 </div>
                <br> <br> -->

                <div data-aos="fade-up">
                    <p class="text-white" style='font-size:1.3rem;'>Menciptakan informasi geospasial yang efektif dan efisien menuju ‘One Data–One Map Kelautan Provinsi DKI Jakarta’  </p>
                </div>
                <div class='row mt-2 '>
               
                    <div class='col-lg-12' style="text-align:center;">
                        <h3 class="mb-3 mr-1 text-center" data-aos="fade-up">Peta Wilayah Kelautan dan Perikanan Provinsi DKI Jakarta</h3>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="visibleLands" onChange=landsChanged(); value="Lands" checked>
                            <label class="form-check-label" for="visibleLands" style='color:white;'>Pulau</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="visibleZones" onChange=zonesChanged(); value="zones" checked>
                            <label class="form-check-label" for="visibleZones" style='color:white;'>Zona</label>
                        </div>
                        
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id='visibleEcosystemMangroves' values='ecosystem mangroves' onChange=ecosystemMangrovesChanged();  checked>
                            <label class="form-check-label" for="visibleEcosystemMangroves" style='color:white;'>Ekosistem Mangrove</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id='visibleEcosystemPadangLamuns' values='ecosystem coral reefs' onChange=ecosystemPadangLamunsChanged();  checked>
                            <label class="form-check-label" for="visibleEcosystemPadangLamuns" style='color:white;'>Ekosistem Padang Lamun</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id='visibleEcosystemCoralReefs' values='ecosystem coral reefs' onChange=ecosystemCoralReefsChanged();  checked>
                            <label class="form-check-label" for="visibleEcosystemCoralReefs" style='color:white;'>Ekosistem Terumbu Karang</label>
                        </div>
                       
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="visibleFishShelters" onChange=fishSheltersChanged(); value="FishShelters" checked>
                            <label class="form-check-label" for="visibleFishShelters" style='color:white;'>Fish Shelter</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="visibleFishFarmingLocations" onChange=fishFarmingChanged(); value="FishFarmingLocations" checked>
                            <label class="form-check-label" for="visibleFishFarmingLocations" style='color:white;'>Lokasi Budidaya Ikan</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="visibleRehabilitasiKarangs" onChange=rehabilitasiKarangChanged(); value="RehabilitasiKarangs" checked>
                            <label class="form-check-label" for="visibleRehabilitasiKarangs" style='color:white;'>Rehabilitasi Karang</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="visibleRehabilitasiMangroves" onChange=rehabilitasiMangroveChanged(); value="RehabilitasiMangroves" checked>
                            <label class="form-check-label" for="visibleRehabilitasiMangroves" style='color:white;'>Rehabilitasi Mangrove</label>
                        </div>
                        
                      

                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-lg-12">
                        <div id="mapAlokasiRuangLaut"  style="height: 700px; position: relative; overflow: hidden;"></div>
                    </div>
                </div>

             
               
               
            </div>
        </div>
    </div>
    

    
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJ7Ahny6BtFQGkH5dbIggyikKh2hZttBk&libraries=&v=weekly"  ></script>
    <script src="https://unpkg.com/@googlemaps/markerwithlabel/dist/index.min.js"></script>
    
    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js'></script>
    <script
src="https://www.gstatic.com/charts/loader.js">
</script>

    <script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
    <script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script>
    <script src="https://cdn.rawgit.com/sachinchoolur/lg-pager.js/master/dist/lg-pager.js"></script>
    <script src="https://cdn.rawgit.com/sachinchoolur/lg-autoplay.js/master/dist/lg-autoplay.js"></script>
    <script src="https://cdn.rawgit.com/sachinchoolur/lg-fullscreen.js/master/dist/lg-fullscreen.js"></script>
    <script src="https://cdn.rawgit.com/sachinchoolur/lg-zoom.js/master/dist/lg-zoom.js"></script>
    <script src="https://cdn.rawgit.com/sachinchoolur/lg-hash.js/master/dist/lg-hash.js"></script>
    <script src="https://cdn.rawgit.com/sachinchoolur/lg-share.js/master/dist/lg-share.js"></script>
    <script src="{{ asset('assets/js/lg-rotate.js') }}"></script>
    <script>
        var map;
        var arrayZones = [];
        var arrayZonesPolyline = [];
        var arrayLands = [];
        var arrayFishShelters = [];
        var arrayFishFarmingLocations = [];
        var arrayMarkerLabelZone = [];
        var arrayEcosystemMangroves = [];
        var arrayEcosystemPadangLamuns = [];
        var arrayEcosystemCoralReefs = [];
        var arrayRehabilitasiKarangs = [];
        var arrayRehabilitasiMangroves  = [];

        function ecosystemCoralReefsChanged(){
            for (let index = 0; index < arrayEcosystemCoralReefs.length; index++) {
                if (document.getElementById('visibleEcosystemCoralReefs').checked) {
                    arrayEcosystemCoralReefs[index].setVisible(true);
                } else {
                    arrayEcosystemCoralReefs[index].setVisible(false);
                }
            }
          
        }
        function ecosystemPadangLamunsChanged(){
            for (let index = 0; index < arrayEcosystemPadangLamuns.length; index++) {
                if (document.getElementById('visibleEcosystemPadangLamuns').checked) {
                    arrayEcosystemPadangLamuns[index].setVisible(true);
                } else {
                    arrayEcosystemPadangLamuns[index].setVisible(false);
                }
            }
          
        }
        function ecosystemMangrovesChanged(){
            for (let index = 0; index < arrayEcosystemMangroves.length; index++) {
                if (document.getElementById('visibleEcosystemMangroves').checked) {
                    arrayEcosystemMangroves[index].setVisible(true);
                } else {
                    arrayEcosystemMangroves[index].setVisible(false);
                }
            }
          
        }
        function zonesChanged(){
            for (let index = 0; index < arrayZones.length; index++) {
                if (document.getElementById('visibleZones').checked) {
                    arrayZones[index].setVisible(true);
                } else {
                    arrayZones[index].setVisible(false);
                }
            }
            for (let index = 0; index < arrayZonesPolyline.length; index++) {
                if (document.getElementById('visibleZones').checked) {
                    arrayZonesPolyline[index].setVisible(true);
                } else {
                    arrayZonesPolyline[index].setVisible(false);
                }
            }
          
        }
        function landsChanged(){
            for (let index = 0; index < arrayLands.length; index++) {
                if (document.getElementById('visibleLands').checked) {
                    arrayLands[index].setVisible(true);
                } else {
                    arrayLands[index].setVisible(false);
                }
            }
        }
        function fishSheltersChanged(){
            for (let index = 0; index < arrayFishShelters.length; index++) {
                if (document.getElementById('visibleFishShelters').checked) {
                    arrayFishShelters[index].setVisible(true);
                } else {
                    arrayFishShelters[index].setVisible(false);
                }
            }
        }

        function fishFarmingChanged(){
            for (let index = 0; index < arrayFishFarmingLocations.length; index++) {
                if (document.getElementById('visibleFishFarmingLocations').checked) {
                    arrayFishFarmingLocations[index].setVisible(true);
                } else {
                    arrayFishFarmingLocations[index].setVisible(false);
                }
            }
        }
        function rehabilitasiKarangChanged(){
            for (let index = 0; index < arrayRehabilitasiKarangs.length; index++) {
                if (document.getElementById('visibleRehabilitasiKarangs').checked) {
                    arrayRehabilitasiKarangs[index].setVisible(true);
                } else {
                    arrayRehabilitasiKarangs[index].setVisible(false);
                }
            }
        }

        function rehabilitasiMangroveChanged(){
            for (let index = 0; index < arrayRehabilitasiMangroves.length; index++) {
                if (document.getElementById('visibleRehabilitasiMangroves').checked) {
                    arrayRehabilitasiMangroves[index].setVisible(true);
                } else {
                    arrayRehabilitasiMangroves[index].setVisible(false);
                }
            }
        }
       
       
       

        $( document ).ready(function() {
            Chart.defaults.color = "#FFFFFF";
            lightGallery(document.getElementById("lightgallery"));
            // map = new google.maps.Map(document.getElementById('mapAlokasiRuangLaut'), {
            //     center: {
            //         lat: -5.685028, 
            //         lng: 106.573255
            //     },
            //     zoom: 11,
            //     mapTypeId: 'roadmap',
            //     streetViewControl: false,
            // });
            @php 
                $setCenterMap = 0;
                $arrayIdDiagramTutupanKarang = array();
            @endphp
            @foreach($lands as $land)
                
                            map = new google.maps.Map(document.getElementById('mapAlokasiRuangLaut'), {
                                center: {
                                    lat: ,
                                    lng: 
                                },
                                zoom: 10,
                                mapTypeId: google.maps.MapTypeId.SATELLITE,
                                streetViewControl: false,
                            });
                                            var markWilayah{{ $land->id }} = [
                    {{ implode(",",$listKordinat) }}
                ];
                var setMapWilayah{{ $land->id }} = new google.maps.Polygon({
                    paths: markWilayah{{ $land->id }},
                    strokeColor: '#000000',
                    strokeOpacity: 1,
                    strokeWeight: 2,
                    fillColor: '#FFFF00',
                    fillOpacity: 1,
                    zIndex : 100
                });
                // setMapWilayah{{ $land->id }}.setZIndex(1000);

                var infowindow{{ $land->id }} = new google.maps.InfoWindow();

                google.maps.event.addListener(setMapWilayah{{ $land->id }}, 'click', function (event) {
                    // detailArea({{ $land->id }});
                    infowindow{{ $land->id }}.opened = false;
                    var bounds = new google.maps.LatLngBounds();
                    for (var i = 0; i < setMapWilayah{{ $land->id }}.getPath().getLength(); i++) {
                    bounds.extend(setMapWilayah{{ $land->id }}.getPath().getAt(i));
                    }
                    infowindow{{ $land->id }}.setContent('<div class="p-2" style="min-width: 600px;"><div class="row mb-3"><div class="col-lg-6 text-left"><h4 style="color:black;"></h4></div><div class="col-lg-6 text-right"><button type="button" class="btn btn-sm btn-info" onClick=detailLand()>Detail</button></div><div class="col-lg-6 text-left"><div class="thumbnail text-left"><a onclick=preview("c3M=") style="cursor:pointer;" class="text-decoration-none text-white"><img src="https://getuikit.com/v2/docs/images/placeholder_600x400.svg" style="max-width:300px !important" class="img-responsive img-fluid" ></a></div></div><div class="col-lg-6 text-left"><div class="thumbnail text-left"></div></div></div></div>');
                    infowindow{{ $land->id }}.setPosition(bounds.getCenter());

                    infowindow{{ $land->id }}.open(map);
                    
                });
                google.maps.event.addListener(setMapWilayah{{ $land->id }}, 'mouseover', function (event) {
                    // infowindow{{ $land->id }}.opened = false;
                    // var bounds = new google.maps.LatLngBounds();
                    // for (var i = 0; i < setMapWilayah{{ $land->id }}.getPath().getLength(); i++) {
                    // bounds.extend(setMapWilayah{{ $land->id }}.getPath().getAt(i));
                    // }
                    // infowindow{{ $land->id }}.setContent('<div class="p-2" style="min-width: 600px;"><div class="row mb-3"><div class="col-lg-6 text-left"><h4 style="color:black;"></h4></div><div class="col-lg-6 text-right"><button type="button" class="btn btn-sm btn-info" onClick=detailLand()>Detail</button></div><div class="col-lg-6 text-left"><div class="thumbnail text-left"><a onclick=preview("c3M=") style="cursor:pointer;" class="text-decoration-none text-white"><img src="https://getuikit.com/v2/docs/images/placeholder_600x400.svg" style="max-width:300px !important" class="img-responsive img-fluid" ></a></div></div><div class="col-lg-6 text-left"><div class="thumbnail text-left"></div></div></div></div>');
                    // infowindow{{ $land->id }}.setPosition(bounds.getCenter());

                    // infowindow{{ $land->id }}.open(map);
                   
                });
                google.maps.event.addListener(setMapWilayah{{ $land->id }}, 'mouseout', function (event) {

                    // infowindow{{ $land->id }}.close();

                });
                setMapWilayah{{ $land->id }}.setMap(map);
                arrayLands.push(setMapWilayah{{ $land->id }});

            @endforeach

            @foreach($ecosystem_mangroves as $ecosystem_mangrove)
                                var markEcosystemMangrove{{ $ecosystem_mangrove->id }} = [
                    {{ implode(",",$listKordinat) }}
                ];
                var setMapEcosystemMangrove{{ $ecosystem_mangrove->id }} = new google.maps.Polygon({
                    paths: markEcosystemMangrove{{ $ecosystem_mangrove->id }},
                    strokeColor: '#000000',
                    strokeOpacity: 1,
                    strokeWeight: 2,
                    fillColor: '#b1dd6e',
                    fillOpacity: 1,
                    zIndex : 100
                });
                // setMapEcosystemMangrove{{ $ecosystem_mangrove->id }}.setZIndex(1000);

                var infowindow{{ $ecosystem_mangrove->id }} = new google.maps.InfoWindow();

                google.maps.event.addListener(setMapEcosystemMangrove{{ $ecosystem_mangrove->id }}, 'click', function (event) {
                    infowindow{{ $ecosystem_mangrove->id }}.opened = false;
                    var bounds = new google.maps.LatLngBounds();
                    for (var i = 0; i < setMapEcosystemMangrove{{ $ecosystem_mangrove->id }}.getPath().getLength(); i++) {
                    bounds.extend(setMapEcosystemMangrove{{ $ecosystem_mangrove->id }}.getPath().getAt(i));
                    }
                    infowindow{{ $ecosystem_mangrove->id }}.setContent('<div class="row mt-2"><div class="col-lg-12 text-left"><h6 style="color:black;">Ekosistem Mangrove</h6></div><div class="table-responsive"><table class="table table-hover table-striped table-bordered"><thead style="margin-left:10px;"><tr><th style="text-align:left;">Nama</th><th>:</th><th style="text-align:left;"></th></tr><tr><th style="text-align:left;">Luas</th><th>:</th><th style="text-align:left;"> </th></tr><tr><th style="text-align:left;">Keterangan</th><th>:</th><th style="text-align:left;"> </th></tr></thead></table></div></div>');
                    infowindow{{ $ecosystem_mangrove->id }}.setPosition(bounds.getCenter());

                    infowindow{{ $ecosystem_mangrove->id }}.open(map);
                    
                });
                google.maps.event.addListener(setMapEcosystemMangrove{{ $ecosystem_mangrove->id }}, 'mouseover', function (event) {
                   
                   
                });
                google.maps.event.addListener(setMapEcosystemMangrove{{ $ecosystem_mangrove->id }}, 'mouseout', function (event) {


                });
                setMapEcosystemMangrove{{ $ecosystem_mangrove->id }}.setMap(map);
                arrayEcosystemMangroves.push(setMapEcosystemMangrove{{ $ecosystem_mangrove->id }});

            @endforeach

            @foreach($ecosystem_padang_lamuns as $ecosystem_padang_lamun)
                                var markEcosystemPadangLamun{{ $ecosystem_padang_lamun->id }} = [
                    {{ implode(",",$listKordinat) }}
                ];
                var setMapEcosystemPadangLamun{{ $ecosystem_padang_lamun->id }} = new google.maps.Polygon({
                    paths: markEcosystemPadangLamun{{ $ecosystem_padang_lamun->id }},
                    strokeColor: '#000000',
                    strokeOpacity: 1,
                    strokeWeight: 2,
                    fillColor: '#00e535',
                    fillOpacity: 1,
                    zIndex : 100
                });
                // setMapEcosystemPadangLamun{{ $ecosystem_padang_lamun->id }}.setZIndex(1000);

                var infowindow{{ $ecosystem_padang_lamun->id }} = new google.maps.InfoWindow();

                google.maps.event.addListener(setMapEcosystemPadangLamun{{ $ecosystem_padang_lamun->id }}, 'click', function (event) {
                    infowindow{{ $ecosystem_padang_lamun->id }}.opened = false;
                    var bounds = new google.maps.LatLngBounds();
                    for (var i = 0; i < setMapEcosystemPadangLamun{{ $ecosystem_padang_lamun->id }}.getPath().getLength(); i++) {
                    bounds.extend(setMapEcosystemPadangLamun{{ $ecosystem_padang_lamun->id }}.getPath().getAt(i));
                    }
                    infowindow{{ $ecosystem_padang_lamun->id }}.setContent('<div class="row mt-2"><div class="col-lg-12 text-left"><h6 style="color:black;">Ekosistem Padang Lamun</h6></div><div class="table-responsive"><table class="table table-hover table-striped table-bordered"><thead style="margin-left:10px;"><tr><th style="text-align:left;">Nama</th><th>:</th><th style="text-align:left;"></th></tr><tr><th style="text-align:left;">Luas</th><th>:</th><th style="text-align:left;"> </th></tr><tr><th style="text-align:left;">Keterangan</th><th>:</th><th style="text-align:left;"> </th></tr></thead></table></div></div>');
                    infowindow{{ $ecosystem_padang_lamun->id }}.setPosition(bounds.getCenter());

                    infowindow{{ $ecosystem_padang_lamun->id }}.open(map);
                    
                });
                google.maps.event.addListener(setMapEcosystemPadangLamun{{ $ecosystem_padang_lamun->id }}, 'mouseover', function (event) {
                   
                   
                });
                google.maps.event.addListener(setMapEcosystemPadangLamun{{ $ecosystem_padang_lamun->id }}, 'mouseout', function (event) {


                });
                setMapEcosystemPadangLamun{{ $ecosystem_padang_lamun->id }}.setMap(map);
                arrayEcosystemPadangLamuns.push(setMapEcosystemPadangLamun{{ $ecosystem_padang_lamun->id }});

            @endforeach
            @foreach($ecosystem_coral_reefs as $ecosystem_coral_reef)
                                var markEcosystemCoralReef{{ $ecosystem_coral_reef->id }} = [
                    {{ implode(",",$listKordinat) }}
                ];
                var setMapEcosystemCoralReef{{ $ecosystem_coral_reef->id }} = new google.maps.Polygon({
                    paths: markEcosystemCoralReef{{ $ecosystem_coral_reef->id }},
                    strokeColor: '#000000',
                    strokeOpacity: 1,
                    strokeWeight: 2,
                    fillColor: '#FF0000',
                    fillOpacity: 1,
                    zIndex : 100
                });
                // setMapEcosystemCoralReef{{ $ecosystem_coral_reef->id }}.setZIndex(1000);

                var infowindow{{ $ecosystem_coral_reef->id }} = new google.maps.InfoWindow();

                google.maps.event.addListener(setMapEcosystemCoralReef{{ $ecosystem_coral_reef->id }}, 'click', function (event) {
                    infowindow{{ $ecosystem_coral_reef->id }}.opened = false;
                    var bounds = new google.maps.LatLngBounds();
                    for (var i = 0; i < setMapEcosystemCoralReef{{ $ecosystem_coral_reef->id }}.getPath().getLength(); i++) {
                    bounds.extend(setMapEcosystemCoralReef{{ $ecosystem_coral_reef->id }}.getPath().getAt(i));
                    }
                    infowindow{{ $ecosystem_coral_reef->id }}.setContent('<div class="row mt-2"><div class="col-lg-12 text-left"><h6 style="color:black;">Ekosistem Terumbu Karang</h6></div><div class="table-responsive"><table class="table table-hover table-striped table-bordered"><thead style="margin-left:10px;"><tr><th style="text-align:left;">Nama</th><th>:</th><th style="text-align:left;"></th></tr><tr><th style="text-align:left;">Luas</th><th>:</th><th style="text-align:left;"> </th></tr><tr><th style="text-align:left;">Keterangan</th><th>:</th><th style="text-align:left;"> </th></tr></thead></table></div></div>');
                    infowindow{{ $ecosystem_coral_reef->id }}.setPosition(bounds.getCenter());

                    infowindow{{ $ecosystem_coral_reef->id }}.open(map);
                    
                });
                google.maps.event.addListener(setMapEcosystemCoralReef{{ $ecosystem_coral_reef->id }}, 'mouseover', function (event) {
                   
                   
                });
                google.maps.event.addListener(setMapEcosystemCoralReef{{ $ecosystem_coral_reef->id }}, 'mouseout', function (event) {


                });
                setMapEcosystemCoralReef{{ $ecosystem_coral_reef->id }}.setMap(map);
                arrayEcosystemCoralReefs.push(setMapEcosystemCoralReef{{ $ecosystem_coral_reef->id }});

            @endforeach
            
            const icon = {
                    url: "{{ asset('assets/img/icons8-fish-100.png') }}", 
                    scaledSize: new google.maps.Size(50, 50), 
            };
            @foreach($fishshelters as $fishshelter)
                @php 
                    $arrayCoordinate = explode(",",$fishshelter->coordinate);
                    $contentBidangFishshelter = 
                    '<div class="row mt-2">'.
                        '<div class="col-lg-12 text-left">'.
                            '<h6 style="color:black;">Fish Shelter</h6>'. 
                        '</div>'.
                        '<div class="table-responsive">'.
                            '<table class="table table-hover table-striped table-bordered">'.
                                '<thead style="margin-left:10px;">'.
                                    '<tr>'.
                                        '<th style="text-align:left;">Nama</th>'.
                                        '<th>:</th>'.
                                        '<th style="text-align:left;">'.$fishshelter->name.'</th>'.
                                    '</tr>'.
                                    '<tr>'.
                                        '<th style="text-align:left;">Koordinat</th>'.
                                        '<th>:</th>'.
                                        '<th style="text-align:left;">'.$fishshelter->coordinate.' </th>'.
                                    '</tr>'.
                                    '<tr>'.
                                        '<th style="text-align:left;" colspan=3>'.
                                            '<div class="col-lg-6 text-left">'.
                                                '<div class="thumbnail text-left">'.
                                                '<a onclick=preview("'.base64_encode("ss").'") style="cursor:pointer;" class="text-decoration-none text-white">'.
                                                    '<img src="'.asset('uploads/fishshelters/'.$fishshelter->image).'" style="max-width:300px !important" class="img-responsive img-fluid" >'.
                                                '</a>'.
                                                '</div>'.
                                            '</div>'.
                                        '</th>'.
                                    '</tr>'.
                                '</thead>'.
                            '</table>'.
                        '</div>'.
                    '</div>';
                @endphp
                
                @if(sizeof($arrayCoordinate) == 2)
                    var fishShelter{{ $fishshelter->id }} =  new google.maps.Marker({
                        position: { lat:  {{ $arrayCoordinate[0] }},lng:  {{ $arrayCoordinate[1] }}},
                        map,
                        title :'{{ $fishshelter->name }}',
                        icon: icon
                    });
                    arrayFishShelters.push(fishShelter{{ $fishshelter->id }});

                    fishShelter{{ $fishshelter->id }}.addListener('click', function() {
                        var infowindow = new google.maps.InfoWindow({
                                        
                                            content : ''
                                        });

                                        
                        infowindow.open(map, fishShelter{{ $fishshelter->id }});
                    });
                @endif
            @endforeach

            const iconFishFarming = {
                    url: "{{ asset('assets/img/sea.png') }}", 
                    scaledSize: new google.maps.Size(50, 50), 
            };

            @foreach($fish_farming_locations as $fish_farming_location)
                @php 
                    $arrayCoordinate = explode(",",$fish_farming_location->coordinate);
                    $contentFishFarming = 
                    '<div class="row mt-2">'.
                        '<div class="col-lg-12 text-left">'.
                            '<h6 style="color:black;">Lokasi Budidaya Ikan</h6>'. 
                        '</div>'.
                        '<div class="table-responsive">'.
                            '<table class="table table-hover table-striped table-bordered">'.
                                '<thead style="margin-left:10px;">'.
                                    '<tr>'.
                                        '<th style="text-align:left;">Nama</th>'.
                                        '<th>:</th>'.
                                        '<th style="text-align:left;">'.$fish_farming_location->name.'</th>'.
                                    '</tr>'.
                                    '<tr>'.
                                        '<th style="text-align:left;">Luas</th>'.
                                        '<th>:</th>'.
                                        '<th style="text-align:left;">'.$fish_farming_location->luas.' m2</th>'.
                                    '</tr>'.
                                    '<tr>'.
                                        '<th style="text-align:left;">Potensi Produksi/ Tahun</th>'.
                                        '<th>:</th>'.
                                        '<th style="text-align:left;">'.$fish_farming_location->potensi.' (kg)</th>'.
                                    '</tr>'.
                                    '<tr>'.
                                        '<th style="text-align:left;">Saprodi</th>'.
                                        '<th>:</th>'.
                                        '<th style="text-align:left;">'.$fish_farming_location->saprodi.' </th>'.
                                    '</tr>'.
                                    '<tr>'.
                                        '<th style="text-align:left;">Koordinat</th>'.
                                        '<th>:</th>'.
                                        '<th style="text-align:left;">'.$fish_farming_location->coordinate.' </th>'.
                                    '</tr>'.
                                    '<tr>'.
                                        '<th style="text-align:left;">Keterangan</th>'.
                                        '<th>:</th>'.
                                        '<th style="text-align:left;">'.str_replace(array("\r\n","\r"),"<br>", $fish_farming_location->description).'</th>'.
                                    '</tr>'.
                                '</thead>'.
                            '</table>'.
                        '</div>'.
                    '</div>';
                @endphp
                @if(sizeof($arrayCoordinate) == 2)
                    var fish_farming_location{{ $fish_farming_location->id }} =  new google.maps.Marker({
                        position: { lat:  {{ $arrayCoordinate[0] }},lng:  {{ $arrayCoordinate[1] }}},
                        map,
                        title :'{{ $fish_farming_location->name }}',
                        icon: iconFishFarming
                    });
                    arrayFishFarmingLocations.push(fish_farming_location{{ $fish_farming_location->id }});

                    fish_farming_location{{ $fish_farming_location->id }}.addListener('click', function() {
                        var infowindow = new google.maps.InfoWindow({
                                            content: ''
                                        });
                        infowindow.open(map, fish_farming_location{{ $fish_farming_location->id }});
                    });
                @endif

            @endforeach



            const iconRehabilitasiKarang = {
                url: "{{ asset('assets/img/coral.png') }}", 
                scaledSize: new google.maps.Size(50, 50), 
            };

            @foreach($rehabilitasi_karangs as $rehabilitasi_karang)
                        @php 
                $arrayCoordinate = explode(",",$rehabilitasi_karang->coordinate);
                $tabelPerkembangan = "";
                $arrayTabelPerkembangan = array();
                
                $arrayPerkembangans = $rehabilitasi_karang->perkembangans;
                foreach($arrayPerkembangans as $arrayPerkembangan){
                    $arrayTabelPerkembangan[]= 
                    '<tr>'.
                        '<td >'.$arrayPerkembangan->year.'</td>'.
                        '<td >'.$arrayMonth[$arrayPerkembangan->month].'</td>'.
                        '<td >'.$arrayPerkembangan->percentage.'</td>'.
                    '</tr>';
                }
                if(!empty(sizeof($arrayTabelPerkembangan))){
                    $tabelPerkembangan =
                    '<table class="table table-hover table-striped table-bordered">'.
                        '<thead style="margin-left:10px;">'.
                            '<tr>'.
                                '<th >Tahun</th>'.
                                '<th >Bulan</th>'.
                                '<th >Persentase</th>'.
                            '</tr>'.
                            implode(" ",$arrayTabelPerkembangan).
                            
                        '</thead>'.
                    '</table>';
                }
                $contentRehabilitasiKarang = 
                '<div class="row mt-2">'.
                    '<div class="col-lg-12 text-left">'.
                        '<h6 style="color:black;">Rehabilitasi Karang</h6>'. 
                    '</div>'.
                    '<div class="table-responsive">'.
                        '<table class="table table-hover table-striped table-bordered">'.
                            '<thead style="margin-left:10px;">'.
                                '<tr>'.
                                    '<th style="text-align:left;">Nama</th>'.
                                    '<th>:</th>'.
                                    '<th style="text-align:left;">'.$rehabilitasi_karang->name.'</th>'.
                                '</tr>'.
                                '<tr>'.
                                    '<th style="text-align:left;">Koordinat</th>'.
                                    '<th>:</th>'.
                                    '<th style="text-align:left;">'.$rehabilitasi_karang->coordinate.' </th>'.
                                '</tr>'.
                                '<tr>'.
                                    '<th style="text-align:left;">Keterangan</th>'.
                                    '<th>:</th>'.
                                    '<th style="text-align:left;">'.$keteranganRehab.'</th>'.
                                '</tr>'.
                            '</thead>'.
                        '</table>'.
                    '</div>'.
                    $tabelPerkembangan.
                '</div>';
            @endphp
            @if(sizeof($arrayCoordinate) == 2)
                var rehabilitasi_karang{{ $rehabilitasi_karang->id }} =  new google.maps.Marker({
                    position: { lat:  {{ $arrayCoordinate[0] }},lng:  {{ $arrayCoordinate[1] }}},
                    map,
                    title :'{{ $rehabilitasi_karang->name }}',
                    icon: iconRehabilitasiKarang
                });
                arrayRehabilitasiKarangs.push(rehabilitasi_karang{{ $rehabilitasi_karang->id }});

                rehabilitasi_karang{{ $rehabilitasi_karang->id }}.addListener('click', function() {
                    var infowindow = new google.maps.InfoWindow({
                                        content: ''
                                    });
                    infowindow.open(map, rehabilitasi_karang{{ $rehabilitasi_karang->id }});
                });
            @endif
            @endforeach

            const iconRehabilitasiMangrove = {
                url: "{{ asset('assets/img/mangrove.png') }}", 
                scaledSize: new google.maps.Size(50, 50), 
            };

            @foreach($rehabilitasi_mangroves as $rehabilitasi_mangrove)
                        @php 
                $arrayCoordinate = explode(",",$rehabilitasi_mangrove->coordinate);
                $tabelPerkembangan = "";
                $arrayTabelPerkembangan = array();
                
                $arrayPerkembangans = $rehabilitasi_mangrove->perkembangans;
                foreach($arrayPerkembangans as $arrayPerkembangan){
                    $arrayTabelPerkembangan[]= 
                    '<tr>'.
                        '<td >'.$arrayPerkembangan->year.'</td>'.
                        '<td >'.$arrayMonth[$arrayPerkembangan->month].'</td>'.
                        '<td >'.$arrayPerkembangan->jarang.'</td>'.
                        '<td >'.$arrayPerkembangan->sedang.'</td>'.
                        '<td >'.$arrayPerkembangan->lebat.'</td>'.
                        '<td >'.$arrayPerkembangan->total.'</td>'.
                    '</tr>';
                }
                if(!empty(sizeof($arrayTabelPerkembangan))){
                    $tabelPerkembangan =
                    '<table class="table table-hover table-striped table-bordered">'.
                        '<thead style="margin-left:10px;">'.
                            '<tr>'.
                                '<th >Tahun</th>'.
                                '<th >Bulan</th>'.
                                '<th >Jarang (Ha)</th>'.
                                '<th >Sedang (Ha)</th>'.
                                '<th >Lebat (Ha)</th>'.
                                '<th >Total (Ha)</th>'.
                            '</tr>'.
                            implode(" ",$arrayTabelPerkembangan).
                            
                        '</thead>'.
                    '</table>';
                }
                $contentRehabilitasiMangrove = 
                '<div class="row mt-2">'.
                    '<div class="col-lg-12 text-left">'.
                        '<h6 style="color:black;">Rehabilitasi Mangrove</h6>'. 
                    '</div>'.
                    '<div class="table-responsive">'.
                        '<table class="table table-hover table-striped table-bordered">'.
                            '<thead style="margin-left:10px;">'.
                                '<tr>'.
                                    '<th style="text-align:left;">Nama</th>'.
                                    '<th>:</th>'.
                                    '<th style="text-align:left;">'.$rehabilitasi_mangrove->name.'</th>'.
                                '</tr>'.
                                '<tr>'.
                                    '<th style="text-align:left;">Koordinat</th>'.
                                    '<th>:</th>'.
                                    '<th style="text-align:left;">'.$rehabilitasi_mangrove->coordinate.' </th>'.
                                '</tr>'.
                                '<tr>'.
                                    '<th style="text-align:left;">Keterangan</th>'.
                                    '<th>:</th>'.
                                    '<th style="text-align:left;">'.$keteranganRehab.' </th>'.
                                '</tr>'.
                            '</thead>'.
                        '</table>'.
                    '</div>'.
                    $tabelPerkembangan.
                '</div>';
            @endphp
            @if(sizeof($arrayCoordinate) == 2)
                var rehabilitasi_mangrove{{ $rehabilitasi_mangrove->id }} =  new google.maps.Marker({
                    position: { lat:  {{ $arrayCoordinate[0] }},lng:  {{ $arrayCoordinate[1] }}},
                    map,
                    title :'{{ $rehabilitasi_mangrove->name }}',
                    icon: iconRehabilitasiMangrove
                });
                arrayRehabilitasiMangroves.push(rehabilitasi_mangrove{{ $rehabilitasi_mangrove->id }});

                rehabilitasi_mangrove{{ $rehabilitasi_mangrove->id }}.addListener('click', function() {
                    var infowindow = new google.maps.InfoWindow({
                                        content: ''
                                    });
                    infowindow.open(map, rehabilitasi_mangrove{{ $rehabilitasi_mangrove->id }});
                });
            @endif
            @endforeach


            @foreach($zones as $zone)
                                var markWilayahZone{{ $zone->id }} = [
                    {{ implode(",",$listKoordinatZone) }}
                ];
                @if($zone->kawasan->id == '14')
                    var lineSymbol = {
                        path: google.maps.SymbolPath.CIRCLE,
                        fillOpacity: 0.1,
                        scale: 2
                    };
                    var setMapWilayahZone{{ $zone->id }} = new google.maps.Polyline({
                        strokeColor: '{{$zone->kawasan->outline}}',
                        strokeOpacity: 1,
                        icons: [{
                        icon: lineSymbol,
                        offset: '0',
                        repeat: '10px'
                        }],
                        path: markWilayahZone{{ $zone->id }},
                    });
                @else 
                    @if($zone->kawasan->type_outline == 'doted' )
                        var setMapWilayahZone{{ $zone->id }} = new google.maps.Polygon({
                            paths: markWilayahZone{{ $zone->id }},
                            // strokeColor: '{{$zone->kawasan->outline}}',
                            strokeOpacity: 0,
                            strokeWeight: 0,
                            fillColor: '{{$zone->kawasan->color}}',
                            fillOpacity: 2
                        });
                        var lineSymbol = {
                            path: google.maps.SymbolPath.CIRCLE,
                            fillOpacity: 0.1,
                            scale: 2
                        };
                        var polylineDotted{{ $zone->id }} = new google.maps.Polyline({
                            strokeColor: '{{$zone->kawasan->outline}}',
                            strokeOpacity: 1,
                            icons: [{
                            icon: lineSymbol,
                            offset: '0',
                            repeat: '10px'
                            }],
                            path: markWilayahZone{{ $zone->id }},
                            map: map
                        });
                        arrayZonesPolyline.push(polylineDotted{{ $zone->id }});
                        var infowindowDoted{{ $zone->id }} = new google.maps.InfoWindow();
                        google.maps.event.addListener(polylineDotted{{ $zone->id }}, 'click', function (event) {
                            // detailArea({{ $zone->id }});
                            infowindowDoted{{ $zone->id }}.opened = false;
                            var bounds = new google.maps.LatLngBounds();
                            for (var i = 0; i < polylineDotted{{ $zone->id }}.getPath().getLength(); i++) {
                            bounds.extend(polylineDotted{{ $zone->id }}.getPath().getAt(i));
                            }
                            infowindowDoted{{ $zone->id }}.setContent('<div class="p-2" style="min-width: 600px; min-height:500px;"><div class="row mb-3"><div class="col-lg-12 text-left"><h4 style="color:black;">Kawasan : </h4></div><div class="col-lg-12 text-left"><h4 style="color:black;">Zona : </h4></div><div class="col-lg-12 text-left"><h4 style="color:black;">Lokasi : </h4></div><div class="col-lg-12 text-left"><h4 style="color:black;">Luas :  Ha</h4></div><div class="col-lg-12 text-left"><h4 style="color:black;">Keterangan : </h4></div><div class="m-4"><ul class="nav nav-tabs"><li class="nav-item"><a  id="tabBoleh" onClick="bolehActive()" class="nav-link active" style="color:black;" >Boleh</a></li><li class="nav-item"><a  id="tabBolehDenganSyarat" onClick="bolehDenganSyaratActive()" class="nav-link" style="color:black;" >Boleh Dengan Syarat</a></li><li class="nav-item"><a  id="tabTidakBoleh" onClick="tidakBolehActive()"  class="nav-link" style="color:black;">Tidak boleh</a></li></ul><div id="kontenBoleh"  class="col-lg-12 mt-2 text-left"> Memuat .....</div><div id="kontenBolehDenganSyarat"  class="col-lg-12 mt-2 text-left d-none"> Memuat .....</div><div id="kontenTidakBoleh" class="col-lg-12 mt-2 text-left d-none"> Memuat .....</div></div></div></div>');
                            infowindowDoted{{ $zone->id }}.setPosition(bounds.getCenter());
                            

                            infowindowDoted{{ $zone->id }}.open(map);

                            $.ajax({
                                data : {
                                    _token :'{{ csrf_token() }}',
                                    kawasan_id : {{ $zone->kawasan_id }},
                                },
                                type: 'POST',
                                url : "{{ route('kawasan_boleh') }}",
                                success: function(data) {
                                    const obj = JSON.parse(data);
                                    $("#kontenBoleh{{$zone->id}}").html(obj.boleh);
                                    $("#kontenBolehDenganSyarat{{$zone->id}}").html(obj.boleh_dengan_syarat);
                                    $("#kontenTidakBoleh{{$zone->id}}").html(obj.tidak_boleh);
                                }
                            });
                            
                            
                        });
                        google.maps.event.addListener(polylineDotted{{ $zone->id }}, 'mouseover', function (event) {
                            
                        });
                        google.maps.event.addListener(polylineDotted{{ $zone->id }}, 'mouseout', function (event) {
                            // infowindowDoted{{ $zone->id }}.close();
                        });

                        var bounds{{ $zone->id }} = new google.maps.LatLngBounds();
                        for (var i = 0; i < polylineDotted{{ $zone->id }}.getPath().getLength(); i++) {
                            bounds{{ $zone->id }}.extend(polylineDotted{{ $zone->id }}.getPath().getAt(i));
                        }
                        

                        

                    @else 
                        var setMapWilayahZone{{ $zone->id }} = new google.maps.Polygon({
                            paths: markWilayahZone{{ $zone->id }},
                            strokeColor: '{{$zone->kawasan->outline}}',
                            strokeOpacity: 1,
                            strokeWeight: 2,
                            fillColor: '{{$zone->kawasan->color}}',
                            fillOpacity: 2
                        });
                    @endif



                @endif
               
                


                var infowindow{{ $zone->id }} = new google.maps.InfoWindow();

                google.maps.event.addListener(setMapWilayahZone{{ $zone->id }}, 'click', function (event) {
                    // detailArea({{ $zone->id }});
                      infowindow{{ $zone->id }}.opened = false;
                    var bounds = new google.maps.LatLngBounds();
                    for (var i = 0; i < setMapWilayahZone{{ $zone->id }}.getPath().getLength(); i++) {
                    bounds.extend(setMapWilayahZone{{ $zone->id }}.getPath().getAt(i));
                    }
                    infowindow{{ $zone->id }}.setContent('<div class="p-2" style="min-width: 600px; min-height:500px;"><div class="row mb-3"><div class="col-lg-12 text-left"><h4 style="color:black;">Kawasan : </h4></div><div class="col-lg-12 text-left"><h4 style="color:black;">Zona : </h4></div><div class="col-lg-12 text-left"><h4 style="color:black;">Lokasi : </h4></div><div class="col-lg-12 text-left"><h4 style="color:black;">Luas :  Ha</h4></div><div class="col-lg-12 text-left"><h4 style="color:black;">Keterangan : </h4></div><div class="m-4"><ul class="nav nav-tabs"><li class="nav-item"><a  id="tabBoleh" onClick="bolehActive()" class="nav-link active" style="color:black;" >Boleh</a></li><li class="nav-item"><a  id="tabBolehDenganSyarat" onClick="bolehDenganSyaratActive()" class="nav-link" style="color:black;" >Boleh Dengan Syarat</a></li><li class="nav-item"><a  id="tabTidakBoleh" onClick="tidakBolehActive()"  class="nav-link" style="color:black;">Tidak boleh</a></li></ul><div id="kontenBoleh"  class="col-lg-12 mt-2 text-left"> Memuat .....</div><div id="kontenBolehDenganSyarat"  class="col-lg-12 mt-2 text-left d-none"> Memuat .....</div><div id="kontenTidakBoleh" class="col-lg-12 mt-2 text-left d-none"> Memuat .....</div></div></div></div>');
                    infowindow{{ $zone->id }}.setPosition(bounds.getCenter());
                    

                    infowindow{{ $zone->id }}.open(map);

                    $.ajax({
                        data : {
                            _token :'{{ csrf_token() }}',
                            kawasan_id : {{ $zone->kawasan_id }},
                        },
                        type: 'POST',
                        url : "{{ route('kawasan_boleh') }}",
                        success: function(data) {
                            const obj = JSON.parse(data);
                            $("#kontenBoleh{{$zone->id}}").html(obj.boleh);
                            $("#kontenBolehDenganSyarat{{$zone->id}}").html(obj.boleh_dengan_syarat);
                            $("#kontenTidakBoleh{{$zone->id}}").html(obj.tidak_boleh);
                        }
                    });
                    
                    
                });
                google.maps.event.addListener(setMapWilayahZone{{ $zone->id }}, 'mouseover', function (event) {
                    
                });
                google.maps.event.addListener(setMapWilayahZone{{ $zone->id }}, 'mouseout', function (event) {
                    // infowindow{{ $zone->id }}.close();
                });

                var bounds{{ $zone->id }} = new google.maps.LatLngBounds();
                for (var i = 0; i < setMapWilayahZone{{ $zone->id }}.getPath().getLength(); i++) {
                    bounds{{ $zone->id }}.extend(setMapWilayahZone{{ $zone->id }}.getPath().getAt(i));
                }

               


                setMapWilayahZone{{ $zone->id }}.setMap(map);
                arrayZones.push(setMapWilayahZone{{ $zone->id }});


            @endforeach

          



            
           

            
          
            var mapIncidentLocation = new google.maps.Map(document.getElementById('mapIncidentLocation'), {
                center: {
                    lat: -5.685028, 
                    lng: 106.573255
                },
                zoom: 11,
                mapTypeId: 'roadmap',
                streetViewControl: false,
                mapTypeControl: false
            });
            var marker = false;
                google.maps.event.addListener(mapIncidentLocation, 'click', function(event) {
                var clickedLocation = event.latLng;
                if(marker === false){
                    marker = new google.maps.Marker({
                        position: clickedLocation,
                        map: mapIncidentLocation,
                        draggable: true //make it draggable
                    });
                    google.maps.event.addListener(marker, 'dragend', function(event){
                        markerLocation();
                    });
                } else{
                    marker.setPosition(clickedLocation);
                }
                markerLocation();
            });


            function markerLocation(){
                var currentLocation = marker.getPosition();
                document.getElementById('latitude').value = currentLocation.lat(); //latitude
                document.getElementById('longtitude').value = currentLocation.lng(); //longitude


            $.ajax({
                url:"https://nominatim.openstreetmap.org/reverse",
                data:"lat="+currentLocation.lat()+"&lon="+currentLocation.lng()+"&format=json",
                dataType:"JSON",
                success:function(data){
                console.log('datatatat', data);
                $("#location").val(data.display_name);
                }
            })
            }

            let  infoWindowCurrentLocation;
            infoWindowCurrentLocation = new google.maps.InfoWindow();
            const locationButton = document.createElement("button");
            locationButton.textContent = "Lokasi anda saat ini";
            locationButton.classList.add("custom-map-control-button");
            mapIncidentLocation.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
            locationButton.addEventListener("click", () => {
                // Try HTML5 geolocation.
                if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                    const pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude,
                    };
                    infoWindowCurrentLocation.setPosition(pos);
                    infoWindowCurrentLocation.setContent("Location found.");
                    infoWindowCurrentLocation.open(mapIncidentLocation);
                    mapIncidentLocation.setCenter(pos);
                    document.getElementById('latitude').value = position.coords.latitude; //latitude
                    document.getElementById('longtitude').value = position.coords.longitude; //
                    if(marker === false){
                        marker = new google.maps.Marker({
                            position: {
                                lat: position.coords.latitude,
                                lng: position.coords.longitude
                            },
                            map: mapIncidentLocation,
                            draggable: true //make it draggable
                        });
                        markerLocation();
                    } else{
                        marker.setPosition({
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        });
                    }
                    },
                    () => {
                    handleLocationError(true, infoWindowCurrentLocation, mapIncidentLocation.getCenter());
                    }
                );
                } else {
                // Browser doesn't support Geolocation
                handleLocationError(false, infoWindowCurrentLocation, mapIncidentLocation.getCenter());
                }
            });

            function handleLocationError(browserHasGeolocation, infoWindowCurrentLocation, pos) {
                infoWindowCurrentLocation.setPosition(pos);
                infoWindowCurrentLocation.setContent(
                browserHasGeolocation
                    ? "Error: The Geolocation service failed."
                    : "Error: Your browser doesn't support geolocation."
                );
                infoWindowCurrentLocation.open(mapIncidentLocation);
            }


         




        });
        function detailLand(idLand){
            window.open("{{url('/land/')}}/"+idLand,"_self");
        }

        function bolehActive(zoneId){
            $("#tabBoleh"+zoneId).attr("class","nav-link active");
            $("#kontenBoleh"+zoneId).attr("class","col-lg-12 mt-2 text-left");

            $("#tabBolehDenganSyarat"+zoneId).attr("class","nav-link ");
            $("#kontenBolehDenganSyarat"+zoneId).attr("class","col-lg-12 mt-2 text-left d-none");

            $("#tabTidakBoleh"+zoneId).attr("class","nav-link ");
            $("#kontenTidakBoleh"+zoneId).attr("class","col-lg-12 mt-2 text-left d-none");
        }
        function  bolehDenganSyaratActive(zoneId){
            $("#tabBoleh"+zoneId).attr("class","nav-link ");
            $("#kontenBoleh"+zoneId).attr("class","col-lg-12 mt-2 text-left d-none");

            $("#tabBolehDenganSyarat"+zoneId).attr("class","nav-link active");
            $("#kontenBolehDenganSyarat"+zoneId).attr("class","col-lg-12 mt-2 text-left ");

            $("#tabTidakBoleh"+zoneId).attr("class","nav-link ");
            $("#kontenTidakBoleh"+zoneId).attr("class","col-lg-12 mt-2 text-left d-none");
        }
        function  tidakBolehActive(zoneId){
            $("#tabBoleh"+zoneId).attr("class","nav-link ");
            $("#kontenBoleh"+zoneId).attr("class","col-lg-12 mt-2 text-left d-none");

            $("#tabBolehDenganSyarat"+zoneId).attr("class","nav-link ");
            $("#kontenBolehDenganSyarat"+zoneId).attr("class","col-lg-12 mt-2 text-left  d-none");

            $("#tabTidakBoleh"+zoneId).attr("class","nav-link active");
            $("#kontenTidakBoleh"+zoneId).attr("class","col-lg-12 mt-2 text-left");
        }



        class USGSOverlay extends google.maps.OverlayView {
            bounds_;
            image_;
            div_;
            constructor(bounds, image) {
            super();
            // Initialize all properties.
            this.bounds_ = bounds;
            this.image_ = image;
            // Define a property to hold the image's div. We'll
            // actually create this div upon receipt of the onAdd()
            // method so we'll leave it null for now.
            this.div_ = null;
            }
            /**
             * onAdd is called when the map's panes are ready and the overlay has been
             * added to the map.
             */
            onAdd() {
            this.div_ = document.createElement("div");
            this.div_.style.borderStyle = "none";
            this.div_.style.borderWidth = "0px";
            this.div_.style.position = "absolute";

            this.div_.style.backgroundImage = "url('"+this.image_+"')";
            this.div_.style.backgroundRepeat = "repeat-y";
            // this.div_.style.maxWidth  = "5000px";
            // this.div_.style.maxHeight  = "5000px";

            // Create the img element and attach it to the div.
            const img = document.createElement("img");

            // img.src = this.image_;
            // img.style.width = "100%";
            // img.style.height = "100%";
            // img.style.position = "absolute";
            // this.div_.appendChild(img);

            // Add the element to the "overlayLayer" pane.
            const panes = this.getPanes();

            panes.overlayLayer.appendChild(this.div_);
            }
            draw() {
            // We use the south-west and north-east
            // coordinates of the overlay to peg it to the correct position and size.
            // To do this, we need to retrieve the projection from the overlay.
            const overlayProjection = this.getProjection();
            // Retrieve the south-west and north-east coordinates of this overlay
            // in LatLngs and convert them to pixel coordinates.
            // We'll use these coordinates to resize the div.
            const sw = overlayProjection.fromLatLngToDivPixel(
                this.bounds_.getSouthWest()
            );
            const ne = overlayProjection.fromLatLngToDivPixel(
                this.bounds_.getNorthEast()
            );

            // Resize the image's div to fit the indicated dimensions.
            if (this.div_) {
                this.div_.style.left = sw.x + "px";
                this.div_.style.top = ne.y + "px";
                this.div_.style.width = ne.x - sw.x + "px";
                this.div_.style.height = sw.y - ne.y + "px";
            }
            }
            /**
             * The onRemove() method will be called automatically from the API if
             * we ever set the overlay's map property to 'null'.
             */
            onRemove() {
            if (this.div_) {
                this.div_.parentNode.removeChild(this.div_);
                this.div_ = null;
            }
            }
        }
    </script>

@endsection