854 lines
32 KiB
PHP
854 lines
32 KiB
PHP
<!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>
|