<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Dashboard - SB Admin</title>
    <link href="https://cdn.jsdelivr.net/npm/simple-datatables@7.1.2/dist/style.min.css" rel="stylesheet" />
    <link href="css/styles.css" rel="stylesheet" />
    <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
        integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"
        integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
    </script>
</head>

<body class="sb-nav-fixed">
    <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
        <a class="navbar-brand ps-3" href="index.html">Malaria</a>
        <button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i
                class="fas fa-bars"></i></button>
    </nav>
    <div id="layoutSidenav">
        <div id="layoutSidenav_nav">
            <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
                <div class="sb-sidenav-menu">
                    <div class="nav">
                        <a class="nav-link" href="{{ route('dashboard') }}">
                            <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
                            Dashboard
                        </a>
                    </div>
                </div>
                <div class="sb-sidenav-footer">
                    <div class="small">Logged in as:</div>
                    Start Bootstrap
                </div>
            </nav>
        </div>
        <div id="layoutSidenav_content">
            <main>
                <div class="container-fluid px-4">
                    <div class="row mb-3 mt-3">
                        <div class="col-md-6 mb-4">
                            <div
                                class="card text-center shadow-md rounded-2 border h-100 bg-secondary text-white card-hover">
                                <div class="card-body py-4">
                                    <i class="bi bi-geo-alt-fill fs-1 text-white mb-3"></i>
                                    <h5 class="card-title fw-bold">Pengujian Model Fuzzy</h5>
                                    <p class="card-text">Akurasi 64% dan Recall 100%</p>
                            
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-4">
                            <div
                                class="card text-center shadow-md rounded-2 border h-100 bg-secondary text-white card-hover">
                                <div class="card-body py-4">
                                    <i class="bi bi-geo-alt-fill fs-1 text-white mb-3"></i>
                                    <h5 class="card-title fw-bold">Lokasi Berpotensi 16</h5>
                                    <h5 class="card-title fw-bold">Lokasi Tidak Berpotensi 9</h5>
                                    <!-- <p class="card-text">Berpotensi ada 16 Lokasi.</p> -->
                                    <!-- <p class="card-text">Tidak Berpotensi ada 9 Lokasi.</p> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card  mt-3 mb-3">
                        <div class="legend-container" id="layerSelector">
                            <h6>Legenda</h6>
                            <p>Wilayah Bondowoso
                            <div class="layer-container">
                                <label class="layer-checkbox">
                                    <img src="{{ asset('image/MapsSymbol.png') }}" alt="Icon" class="icon-img"
                                        style="margin-left: 8px;">
                                    <span class="layer-label" style="font-size: 10px;">Berpotensi Malaria
                                </label>
                                 <label class="layer-checkbox">
                                    <img src="{{ asset('image/MapsSymbolGreen.png') }}" alt="Icon" class="icon-img"
                                        style="margin-left: 8px;">
                                    <span class="layer-label" style="font-size: 10px;">Tidak Berpotensi Malaria
                                </label>
                            </div>
                            <div class="layer-container">
                                <label class="layer-checkbox">
                                    <input type="checkbox" name="layer" value="geojsonLayer1" checked>
                                    <img src="{{ asset('image/tanda jalan.png') }}" alt="Icon" class="icon-img"
                                        style="margin-left: 8px;">
                                    <span class="layer-label" style="font-size: 10px;">Wilayah Bondowoso</span>
                                </label>
                            </div>
                        </div>
                        <div id="viewDiv" style="width: 100%; height: 580px;"></div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    <script src="{{ asset('https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js') }}"
        crossorigin="anonymous"></script>
    <script src="{{ asset('js/scripts.js') }}"></script>
    <script src="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js') }}" crossorigin="anonymous">
    </script>
    <script src="{{ asset('assets/demo/chart-area-demo.js') }}"></script>
    <script src="{{ asset('assets/demo/chart-bar-demo.js') }}"></script>
    <script src="{{ asset('https://cdn.jsdelivr.net/npm/simple-datatables@7.1.2/dist/umd/simple-datatables.min.js') }}"
        crossorigin="anonymous"></script>
    <script src="{{ asset('js/datatables-simple-demo.js') }}"></script>
</body>

</html>
<style>
    html,
    body,
    #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }

    .legend-container {
        position: absolute;
        top: 60px;
        right: 15px;
        background-color: #fff;
        padding: 10px;
        width: 200px;
        z-index: 1;
    }

    .toggle-button {
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 10px;
        z-index: 1;
    }

    .icon-img {
        width: 10px;
        height: 10px;
    }
</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.27/"></script>

<script>
    require(["esri/config", "esri/Map", "esri/views/MapView", "esri/widgets/BasemapToggle",
        "esri/widgets/BasemapGallery", "esri/layers/GeoJSONLayer",
        "esri/Graphic",
        "esri/geometry/Point",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/layers/GraphicsLayer",
        "esri/layers/FeatureLayer",
        "esri/widgets/Locate",
    ], function(esriConfig, Map, MapView, BasemapToggle, BasemapGallery, GeoJSONLayer, Graphic, Point,
        SimpleMarkerSymbol,
        GraphicsLayer, FeatureLayer, Locate) {

        esriConfig.apiKey =
            "AAPK72a6255e33764d98a0912c7b7e86685bOMpW54evt4efnsQpDOZpDeiDpA_oVDhiHdAXa_OzjYm9n3qZ6nTrMRbFbDeMBntF";

        const map = new Map({
            basemap: "arcgis-imagery" // Basemap layer service
        });

        // 1. Lokasi Maps Kecamatan
        // -7.9134402, 113.8222709
        const view = new MapView({
            map: map,
            center: [113.8222709, -7.9134402],
            zoom: 11,
            container: "viewDiv"
        });

        const basemapToggle = new BasemapToggle({
            view: view,
            nextBasemap: "arcgis-topographic"
        });

        view.ui.add(basemapToggle, "bottom-right");


        view.on("click", function(event) {
            var screenPoint = {
                x: event.x,
                y: event.y
            };
        });

        var geojsonLayer1 = new GeoJSONLayer({
            url: "geojson/map.geojson",
            renderer: {
                type: "simple",
                symbol: {
                    type: "simple-fill",
                    color: [0, 255, 0, 0],
                    outline: {
                        color: [255, 255, 0, 1],
                        width: 0.8
                    }

                }
            }
        });

        // Titik Kabupaten Bondowoso
        const pointCoordinates1 = {
            longitude: 113.8222709,
            latitude: -7.9134402
        };

        //Maesan
        const pointCoordinates2 = {
            longitude: 113.7758355,
            latitude: -8.0308252
        };

        // Grujugan: -7.7774513, 114.0053981
        const pointCoordinates3 = {
            longitude: 114.0053981,
            latitude: -7.7774513
        };

        // Tamanan -8.0163221, 113.8264768
        const pointCoordinates4 = {
            longitude: 113.8264768,
            latitude: -8.0163221
        };

        // Jambesari -7.9793011, 113.8412380
        const pointCoordinates5 = {
            longitude: 113.8412380,
            latitude: -7.9793011
        };

        // Pujer -
        const pointCoordinates6 = {
            longitude: 113.888260,
            latitude: -7.974325
        };

        // Tlogosari -7.9977997, 113.9344974
        const pointCoordinates7 = {
            longitude: 113.9344974,
            latitude: -7.9977997
        };

        // Sukosari -7.9464203, 113.9666641
        const pointCoordinates8 = {
            longitude: 113.9666641,
            latitude: -7.9464203
        };

        //     // Sumber wringin
        const pointCoordinates9 = {
            longitude: 113.967957,
            latitude: -7.941918
        };

        // Tapen -7.8536305, 113.9312991
        const pointCoordinates10 = {
            longitude: 113.9312991,
            latitude: -7.8536305
        };

        // Wonosari -7.8862405, 113.8943541
        const pointCoordinates11 = {
            longitude: 113.8943541,
            latitude: -7.8862405
        };

        // Tenggarang -7.9112111, 113.8481654
        const pointCoordinates12 = {
            longitude: 113.8481654,
            latitude: -7.9112111
        };

        // Nangkaan -7.9314376, 113.8129091
        const pointCoordinates13 = {
            longitude: 113.8129091,
            latitude: -7.9314376
        };

        //Kotakulon -7.9104489, 113.8198271
        const pointCoordinates14 = {
            longitude: 113.8198271,
            latitude: -7.9104489
        };

        //Kademangan -7.9140620, 113.8414494
        const pointCoordinates15 = {
            longitude: 113.8414494,
            latitude: -7.9140620
        };

        // Curahdami -7.9129901, 113.7915695
        const pointCoordinates16 = {
            longitude: 113.7915695,
            latitude: -7.9129901
        };

        //Binakal -7.8978999, 113.7697685
        const pointCoordinates17 = {
            longitude: 113.7697685,
            latitude: -7.8978999
        };

        //Pakem -7.8693762, 113.7442884
        const pointCoordinates18 = {
            longitude: 113.7442884,
            latitude: -7.8693762
        };

        // Wringin -7.8199217, 113.7573145
        const pointCoordinates19 = {
            longitude: 113.7573145,
            latitude: -7.8199217
        };

        // Tegalampel -7.8872231, 113.8495227
        const pointCoordinates20 = {
            longitude: 113.8495227,
            latitude: -7.8872231
        };

        // Klabang -7.8516705, 113.8152737
        const pointCoordinates21 = {
            longitude: 113.8152737,
            latitude: -7.8516705
        };

        // Taman Krocok -7.892337, 113.855774
        const pointCoordinates22 = {
            longitude: 113.855774,
            latitude: -7.892337
        };

        // Sempol -7.7982068, 114.0022729
        const pointCoordinates23 = {
            longitude: 114.0022729,
            latitude: -7.7982068
        };

        // Botolinggo -7.8264586, 113.9755153
        const pointCoordinates24 = {
            longitude: 113.9755153,
            latitude: -7.8264586
        };

        // Prajekan -7.7886452, 113.9833799
        const pointCoordinates25 = {
            longitude: 113.9833799,
            latitude: -7.7886452
        };

        // Cerme -7.778407, 114.007515
        const pointCoordinates26 = {
            longitude: 114.007515,
            latitude: -7.778407
        };

        const graphicLayer = new GraphicsLayer();
        const pictureSymbol = {
            type: "picture-marker",
            url: "image/MapsSymbol.png",
            width: "25px",
            height: "25px"
        };

        const pictureSymbolgreen = {
            type: "picture-marker",
            url: "image/MapsSymbolGreen.png",
            width: "25px",
            height: "25px"
        };

        const pointGraphic1 = new Graphic({
            geometry: new Point(pointCoordinates1),
            symbol: pictureSymbol,
            attributes: {
                name: "Kabupaten Bondowoso",
                description: "Kabupaten Bondowoso dipilih sebagai lokasi pengambilan sampel dalam penelitian malaria karena wilayah ini memiliki kondisi geografis yang beragam, mulai dari dataran rendah hingga pegunungan, serta iklim tropis dengan curah hujan yang cukup tinggi, yang berpotensi mendukung berkembangnya habitat nyamuk vektor malaria. Selain itu, beberapa wilayah di Bondowoso tercatat pernah mengalami kasus malaria, sehingga menjadikannya relevan sebagai daerah studi untuk mendeteksi potensi breeding site menggunakan parameter lingkungan seperti suhu, pH, dan salinitas."
            }
        });

        const pointGraphic2 = new Graphic({
            geometry: new Point(pointCoordinates2),
            symbol: pictureSymbol,
            attributes: {
                name: "Kecamatan Maesan",
                description: `
                <strong>Lokasi:</strong> Maesan<br>
                <strong>Suhu:</strong> 27,1°C<br>
                <strong>pH air:</strong> 7,1<br>
                <strong>Salinitas:</strong> 0,12 ppt<br>
                <strong>Status:</strong> Berpotensi Malaria
                `
            }
        });

        const pointGraphic3 = new Graphic({
            geometry: new Point(pointCoordinates3),
            symbol: pictureSymbol,
            attributes: {
                name: "Kecamatan Grujugan",
                description:`
                <strong>Lokasi:</strong> Grujugan<br>
                <strong>Suhu:</strong> 26,8°C<br>
                <strong>pH air:</strong> 6,7<br>
                <strong>Salinitas:</strong> 0,15 ppt<br>
                <strong>Status:</strong> Berpotensi Malaria`
            }
        });

        const pointGraphic4 = new Graphic({
            geometry: new Point(pointCoordinates4),
            symbol: pictureSymbolgreen,
            attributes: {
                name: "Kecamatan Tamanan",
                description:`
                <strong>Lokasi:</strong> Tamanan<br>
                <strong>Suhu:</strong> 27,3°C<br>
                <strong>pH air:</strong> 7,2<br>
                <strong>Salinitas:</strong> 0,21 ppt<br>
                <strong>Status:</strong> Tidak berpotensi Malaria`
            }
        });

        const pointGraphic5 = new Graphic({
            geometry: new Point(pointCoordinates5),
            symbol: pictureSymbol,
            attributes: {
                name: "Kecamatan Jambesari",
                description:`
                <strong>Lokasi:</strong> Jambesari<br>
                <strong>Suhu:</strong> 32,1°C<br>
                <strong>pH air:</strong> 8,9<br>
                <strong>Salinitas:</strong> 0,11 ppt<br>
                <strong>Status:</strong> Berpotensi Malaria`
            }
        });

        const pointGraphic6 = new Graphic({
            geometry: new Point(pointCoordinates6),
            symbol: pictureSymbol,
            attributes: {
                name: "Kecamatan Pujer",
                description:`
                <strong>Lokasi:</strong> Pujer<br>
                <strong>Suhu:</strong> 25,8°C<br>
                <strong>pH air:</strong> 7,7<br>
                <strong>Salinitas:</strong> 0,14 ppt<br>
                <strong>Status:</strong> Berpotensi Malaria`
            }
        });

        const pointGraphic7 = new Graphic({
            geometry: new Point(pointCoordinates7),
            symbol: pictureSymbol,
            attributes: {
                name: "Kecamatan Tlogosari",
                description:`
                <strong>Lokasi:</strong> Tlogosari<br>
                <strong>Suhu:</strong> 30,8°C<br>
                <strong>pH air:</strong> 7,1<br>
                <strong>Salinitas:</strong> 0,10 ppt<br>
                <strong>Status:</strong> Berpotensi Malaria`
            }
        });

        const pointGraphic8 = new Graphic({
            geometry: new Point(pointCoordinates8),
            symbol: pictureSymbol,
            attributes: {
                name: "Kecamatan Sukosari",
                description:`
                <strong>Lokasi:</strong> Sukosari<br>
                <strong>Suhu:</strong> 28,1°C<br>
                <strong>pH air:</strong> 7,7<br>
                <strong>Salinitas:</strong> 0,14 ppt<br>
                <strong>Status:</strong> Berpotensi Malaria`
            }
        });

        const pointGraphic9 = new Graphic({
            geometry: new Point(pointCoordinates9),
            symbol: pictureSymbolgreen,
            attributes: {
                name: "Kecamatan Sumber Wringin",
                description:`
                <strong>Lokasi:</strong> Sumber Wringin<br>
                <strong>Suhu:</strong> 36,5°C<br>
                <strong>pH air:</strong> 7,3<br>
                <strong>Salinitas:</strong> 0,16 ppt<br>
                <strong>Status:</strong> Tidak Berpotensi Malaria`
            }
        });

        const pointGraphic10 = new Graphic({
            geometry: new Point(pointCoordinates10),
            symbol: pictureSymbol,
            attributes: {
                name: "Kecamatan Tapen",
                description: `
                <strong>Lokasi:</strong> Tapen<br>
                <strong>Suhu:</strong> 33,0°C<br>
                <strong>pH air:</strong> 7,8<br>
                <strong>Salinitas:</strong> 0,13 ppt<br>
                <strong>Status:</strong> Berpotensi Malaria`
            }
        });

        const pointGraphic11 = new Graphic({
            geometry: new Point(pointCoordinates11),
            symbol: pictureSymbolgreen,
            attributes: {
                name: "Kecamatan Wonosari",
                description: `
                <strong>Lokasi:</strong> Wonosari<br>
                <strong>Suhu:</strong> 28,6°C<br>
                <strong>pH air:</strong> 6,3<br>
                <strong>Salinitas:</strong> 0,21 ppt<br>
                <strong>Status:</strong> Tidak Berpotensi Malaria`
            }
        });

        const pointGraphic12 = new Graphic({
            geometry: new Point(pointCoordinates12),
            symbol: pictureSymbolgreen,
            attributes: {
                name: "Kecamatan Tenggarang",
                description: `
                <strong>Lokasi:</strong> Tenggarang<br>
                <strong>Suhu:</strong> 30,7°C<br>
                <strong>pH air:</strong> 6,1<br>
                <strong>Salinitas:</strong> 0,21 ppt<br>
                <strong>Status:</strong> Tidak Berpotensi Malaria`
            }
        });

        const pointGraphic13 = new Graphic({
            geometry: new Point(pointCoordinates13),
            symbol: pictureSymbol,
            attributes: {
                name: "Kecamatan Nangkaan",
                description: `
                <strong>Lokasi:</strong> Nangkaan<br>
                <strong>Suhu:</strong> 29,2°C<br>
                <strong>pH air:</strong> 7,2<br>
                <strong>Salinitas:</strong> 0,15 ppt<br>
                <strong>Status:</strong> Berpotensi Malaria`
            }
        });

        const pointGraphic14 = new Graphic({
            geometry: new Point(pointCoordinates14),
            symbol: pictureSymbol,
            attributes: {
                name: "Kecamatan Kota Kulon",
                description:`
                <strong>Lokasi:</strong> Kota Kulon<br>
                <strong>Suhu:</strong> 30,8°C<br>
                <strong>pH air:</strong> 7,1<br>
                <strong>Salinitas:</strong> 0,11 ppt<br>
                <strong>Status:</strong> Berpotensi Malaria`
            }
        });

        const pointGraphic15 = new Graphic({
            geometry: new Point(pointCoordinates15),
            symbol: pictureSymbolgreen,
            attributes: {
                name: "Kecamatan Kademangan",
                description: `
                <strong>Lokasi:</strong> Kademangan<br>
                <strong>Suhu:</strong> 31,6°C<br>
                <strong>pH air:</strong> 6,6<br>
                <strong>Salinitas:</strong> 0,26 ppt<br>
                <strong>Status:</strong>Tidak Berpotensi Malaria`
            }
        });

        const pointGraphic16 = new Graphic({
            geometry: new Point(pointCoordinates16),
            symbol: pictureSymbol,
            attributes: {
                name: "Kecamatan Curahdami",
                description:`
                <strong>Lokasi:</strong> Curahdami<br>
                <strong>Suhu:</strong> 27°C<br>
                <strong>pH air:</strong> 7,1<br>
                <strong>Salinitas:</strong> 0,10 ppt<br>
                <strong>Status:</strong> Berpotensi Malaria`
            }
        });

        const pointGraphic17 = new Graphic({
            geometry: new Point(pointCoordinates17),
            symbol: pictureSymbol,
            attributes: {
                name: "Kecamatan Binakal",
                description:`
                <strong>Lokasi:</strong> Binakal<br>
                <strong>Suhu:</strong> 26,6°C<br>
                <strong>pH air:</strong> 7,1<br>
                <strong>Salinitas:</strong> 0,10 ppt<br>
                <strong>Status:</strong> Berpotensi Malaria`
            }
        });

        const pointGraphic18 = new Graphic({
            geometry: new Point(pointCoordinates18),
            symbol: pictureSymbol,
            attributes: {
                name: "Kecamatan Pakem",
                description:`
                <strong>Lokasi:</strong> Pakem<br>
                <strong>Suhu:</strong> 26,9°C<br>
                <strong>pH air:</strong> 6,9<br>
                <strong>Salinitas:</strong> 0,11 ppt<br>
                <strong>Status:</strong> Berpotensi Malaria`
            }
        });

        const pointGraphic19 = new Graphic({
            geometry: new Point(pointCoordinates19),
            symbol: pictureSymbol,
            attributes: {
                name: "Kecamatan Wringin",
                description: `
                <strong>Lokasi:</strong> Wringin<br>
                <strong>Suhu:</strong> 27,4°C<br>
                <strong>pH air:</strong> 7,0<br>
                <strong>Salinitas:</strong> 0,14 ppt<br>
                <strong>Status:</strong> Berpotensi Malaria`
            }
        });

        const pointGraphic20 = new Graphic({
            geometry: new Point(pointCoordinates20),
            symbol: pictureSymbol,
            attributes: {
                name: "Kecamatan Tegalampel",
                description:`
                <strong>Lokasi:</strong> Tegalampel<br>
                <strong>Suhu:</strong> 27,6°C<br>
                <strong>pH air:</strong> 7,8<br>
                <strong>Salinitas:</strong> 0,14 ppt<br>
                <strong>Status:</strong> Berpotensi Malaria`
            }
        });

        const pointGraphic21 = new Graphic({
            geometry: new Point(pointCoordinates21),
            symbol: pictureSymbolgreen,
            attributes: {
                name: "Kecamatan Klabang",
                description: `
                <strong>Lokasi:</strong> Klabang<br>
                <strong>Suhu:</strong> 26°C<br>
                <strong>pH air:</strong> 6,4<br>
                <strong>Salinitas:</strong> 0,20 ppt<br>
                <strong>Status:</strong>Tidak Berpotensi Malaria`
            }
        });

        const pointGraphic22 = new Graphic({
            geometry: new Point(pointCoordinates22),
            symbol: pictureSymbolgreen,
            attributes: {
                name: "Kecamatan Taman Krocok",
                description: `
                <strong>Lokasi:</strong> Taman Krocok<br>
                <strong>Suhu:</strong> 28,2°C<br>
                <strong>pH air:</strong> 7,6<br>
                <strong>Salinitas:</strong> 0,20 ppt<br>
                <strong>Status:</strong> Tidak Berpotensi Malaria`
            }
        });

        const pointGraphic23 = new Graphic({
            geometry: new Point(pointCoordinates23),
            symbol: pictureSymbolgreen,
            attributes: {
                name: "Kecamatan Sempol",
                description: `
                <strong>Lokasi:</strong> Sempol<br>
                <strong>Suhu:</strong> 29,9°C<br>
                <strong>pH air:</strong> 7,5<br>
                <strong>Salinitas:</strong> 0,18 ppt<br>
                <strong>Status:</strong> Tidak Berpotensi Malaria`
            }
        });

        const pointGraphic24 = new Graphic({
            geometry: new Point(pointCoordinates24),
            symbol: pictureSymbol,
            attributes: {
                name: "Kecamatan Botolinggo",
                description: `
                <strong>Lokasi:</strong> Botolinggo<br>
                <strong>Suhu:</strong> 33,3°C<br>
                <strong>pH air:</strong> 7,3<br>
                <strong>Salinitas:</strong> 0,15 ppt<br>
                <strong>Status:</strong> Berpotensi Malaria`
            }
        });

        const pointGraphic25 = new Graphic({
            geometry: new Point(pointCoordinates25),
            symbol: pictureSymbolgreen,
            attributes: {
                name: "Kecamatan Prajekan",
                description: `
                <strong>Lokasi:</strong> Prajekan<br>
                <strong>Suhu:</strong> 29,2°C<br>
                <strong>pH air:</strong> 7,5<br>
                <strong>Salinitas:</strong> 0,18 ppt<br>
                <strong>Status:</strong>Tidak Berpotensi Malaria`
            }
        });

        const pointGraphic26 = new Graphic({
            geometry: new Point(pointCoordinates26),
            symbol: pictureSymbolgreen,
            attributes: {
                name: "Kecamatan Cerme",
                description: `
                <strong>Lokasi:</strong> Cerme<br>
                <strong>Suhu:</strong> 29,8°C<br>
                <strong>pH air:</strong> 7,7<br>
                <strong>Salinitas:</strong> 0,22 ppt<br>
                <strong>Status:</strong> Tidak Berpotensi Malaria`
            }
        });
        graphicLayer.add(pointGraphic1);
        graphicLayer.add(pointGraphic2);
        graphicLayer.add(pointGraphic3);
        graphicLayer.add(pointGraphic4);
        graphicLayer.add(pointGraphic5);
        graphicLayer.add(pointGraphic6);
        graphicLayer.add(pointGraphic7);
        graphicLayer.add(pointGraphic8);
        graphicLayer.add(pointGraphic9);
        graphicLayer.add(pointGraphic10);
        graphicLayer.add(pointGraphic11);
        graphicLayer.add(pointGraphic12);
        graphicLayer.add(pointGraphic13);
        graphicLayer.add(pointGraphic14);
        graphicLayer.add(pointGraphic15);
        graphicLayer.add(pointGraphic16);
        graphicLayer.add(pointGraphic17);
        graphicLayer.add(pointGraphic18);
        graphicLayer.add(pointGraphic19);
        graphicLayer.add(pointGraphic20);
        graphicLayer.add(pointGraphic21);
        graphicLayer.add(pointGraphic22);
        graphicLayer.add(pointGraphic23);
        graphicLayer.add(pointGraphic24);
        graphicLayer.add(pointGraphic25);
        graphicLayer.add(pointGraphic26);

        const featureLayer = new FeatureLayer({
            source: [pointGraphic1, pointGraphic2, pointGraphic3, pointGraphic4, pointGraphic5,
                pointGraphic6, pointGraphic7, pointGraphic8, pointGraphic9, pointGraphic10,
                pointGraphic11, pointGraphic12, pointGraphic13, pointGraphic14, pointGraphic15,
                pointGraphic16, pointGraphic17, pointGraphic18,
                pointGraphic19, pointGraphic20, pointGraphic21, pointGraphic22, pointGraphic23,
                pointGraphic24, pointGraphic25, pointGraphic26
            ],
            objectIdField: "OBJECTID",
            fields: [{
                    name: "OBJECTID",
                    alias: "OBJECTID",
                    type: "oid"
                },
                {
                    name: "name",
                    alias: "Name",
                    type: "string"
                },
                {
                    name: "description",
                    alias: "Description",
                    type: "string"
                }
            ],
            geometryType: "point",
            spatialReference: view.spatialReference,
            popupTemplate: {
                title: "{name}",
                content: "{description}"
            }
        });

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

        const checkboxes = layerSelector.querySelectorAll('input[type="checkbox"]');

        function handleLayerVisibility() {
            checkboxes.forEach((checkbox) => {
                const layerName = checkbox.value;
                const layer = eval(layerName);
                if (checkbox.checked) {
                    if (!map.layers.includes(layer)) {
                        map.add(layer);
                    }
                } else {
                    if (map.findLayerById(layer.id)) {
                        map.remove(layer);
                    }
                }
            });
        }

        checkboxes.forEach((checkbox) => {
            checkbox.addEventListener('change', handleLayerVisibility);
        });
        handleLayerVisibility();
        map.add(graphicLayer);
    });
</script>

<style>
    .card-hover:hover {
        transform: translateY(-5px);
        transition: 0.3s ease-in-out;
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
    }
</style>
