Professional Documents
Culture Documents
<div class="col-sm-2">
<div id="lumap"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-
widget="collapse" onclick="toggleColumnSizeLine()">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-
widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
<canvas id="lineChart" style="min-height: 250px; height: 250px; max-
height: 250px; width: 100%;"></canvas>
</div>
<script>
function toggleColumnSizeLine() {
const column = document.getElementById('chartColumnLine');
const chartCanvas = document.getElementById('lineChart');
const isCollapsed = column.classList.contains('col-md-3');
if (isCollapsed) {
column.classList.remove('col-md-3');
column.classList.add('col-md-1');
chartCanvas.style.width = '';
} else {
column.classList.remove('col-md-1');
column.classList.add('col-md-3');
chartCanvas.style.width = '100%';
}
}
const namaKapal = <?= json_encode(array_column($kecelakaan,
'nama_kapal')) ?>;
const jmlKtewas = <?= json_encode(array_column($kecelakaan, 'jml_ktewas')) ?>;
const jmlKselamat = <?= json_encode(array_column($kecelakaan,
'jml_kselamat')) ?>;
const jmlKhilang = <?= json_encode(array_column($kecelakaan, 'jml_khilang')) ?
>;
const jmlMuatan = <?= json_encode(array_column($kecelakaan, 'jml_muatan')) ?>;
// Mengubah data yang sudah diambil menjadi format yang sesuai dengan kebutuhan
grafik
const chartData = {
labels: namaKapal,
datasets: [
{
label: 'Jumlah Korban Tewas',
data: jmlKtewas,
borderWidth: 2
},
{
label: 'Jumlah Korban Selamat',
data: jmlKselamat,
borderWidth: 2
},
{
label: 'Jumlah Korban Hilang',
data: jmlKhilang,
borderWidth: 2
},
{
label: 'Jumlah Muatan',
data: jmlMuatan,
borderWidth: 2
}
]
};
// Masukkan data ke dalam grafik
const ctx = document.getElementById('lineChart').getContext('2d');
const myChart1 = new Chart(ctx, {
type: 'line',
data: chartData,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-
widget="collapse" onclick="toggleColumnSizePie()">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-
widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
<canvas id="pieChart" style="min-height: 250px; height: 250px; max-
height: 250px; width: 100%;"></canvas>
</div>
<script>
function toggleColumnSizePie() {
const column = document.getElementById('chartColumnPie');
const chartCanvas = document.getElementById('pieChart');
const isCollapsed = column.classList.contains('col-md-3');
if (isCollapsed) {
column.classList.remove('col-md-3');
column.classList.add('col-md-1');
chartCanvas.style.width = '';
} else {
column.classList.remove('col-md-1');
column.classList.add('col-md-3');
chartCanvas.style.width = '100%';
}
}
// Buat koneksi
$conn = new mysqli($servername, $username, $password, $dbname);
// Periksa koneksi
if ($conn->connect_error) {
die("Koneksi gagal: " . $conn->connect_error);
}
if ($result->num_rows > 0) {
// Menyimpan data dari hasil query ke dalam array
while($row = $result->fetch_assoc()) {
$namaKapal[] = $row["nama_kapal"];
$jmlKtewas[] = $row["jml_ktewas"];
$jmlKselamat[] = $row["jml_kselamat"];
$jmlKhilang[] = $row["jml_khilang"];
$jmlMuatan[] = $row["jml_muatan"];
}
}
// Tutup koneksi
$conn->close();
?>
</script>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-
widget="collapse" onclick="toggleColumnSize()">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-
widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="chart">
<canvas id="barChart" style="min-height: 250px; height: 250px; max-
height: 250px; width: 100%;"></canvas>
</div>
<script>
function toggleColumnSize() {
const column = document.getElementById('chartColumn');
const chartCanvas = document.getElementById('barChart');
const isCollapsed = column.classList.contains('col-md-3');
if (isCollapsed) {
column.classList.remove('col-md-3');
column.classList.add('col-md-1');
chartCanvas.style.width = '';
} else {
column.classList.remove('col-md-1');
column.classList.add('col-md-3');
chartCanvas.style.width = '100%';
}
}
// Buat koneksi
$conn = new mysqli($servername, $username, $password, $dbname);
// Periksa koneksi
if ($conn->connect_error) {
die("Koneksi gagal: " . $conn->connect_error);
}
$result = $conn->query($sql);
$namaKapal = [];
$jmlKtewas = [];
$jmlKselamat = [];
$jmlKhilang = [];
$jmlMuatan = [];
if ($result->num_rows > 0) {
// Memasukkan data dari hasil query ke dalam array
while($row = $result->fetch_assoc()) {
$namaKapal[] = $row["nama_kapal"];
$jmlKtewas[] = $row["jml_ktewas"];
$jmlKselamat[] = $row["jml_kselamat"];
$jmlKhilang[] = $row["jml_khilang"];
$jmlMuatan[] = $row["jml_muatan"];
}
} else {
echo "0 hasil";
}
$conn->close();
?>
// Mengubah data yang sudah diambil menjadi format yang sesuai dengan
kebutuhan grafik
const chartDataBar = {
labels: <?= json_encode($namaKapal) ?>,
datasets: [
{
label: 'Jumlah Korban Tewas',
data: <?= json_encode($jmlKtewas) ?>,
backgroundColor: 'rgb(255, 99, 132)',
borderWidth: 2
},
{
label: 'Jumlah Korban Selamat',
data: <?= json_encode($jmlKselamat) ?>,
backgroundColor: 'rgb(54, 162, 235)',
borderWidth: 2
},
{
label: 'Jumlah Korban Hilang',
data: <?= json_encode($jmlKhilang) ?>,
backgroundColor: 'rgb(255, 205, 86)',
borderWidth: 2
},
{
label: 'Jumlah Muatan',
data: <?= json_encode($jmlMuatan) ?>,
backgroundColor: 'rgb(75, 192, 192)',
borderWidth: 2
}
]
};
var Esri_NatGeoWorldMap =
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/
NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — National Geographic, Esri, DeLorme,
NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC',
maxZoom: 16
});
var Stadia_AlidadeSmoothDark =
L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}
{r}.png', {
maxZoom: 20,
attribution: '© <a href="https://stadiamaps.com/">Stadia Maps</a>,
© <a href="https://openmaptiles.org/">OpenMapTiles</a> © <a
href="http://openstreetmap.org">OpenStreetMap</a> contributors'
});
var peta6 =
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© <a
href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors
© <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
});
var GeoportailFrance_plan =
L.tileLayer('https://wxs.ign.fr/{apikey}/geoportail/wmts?
REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE={style}&TILEMATRIXSET=PM&FORMAT={f
ormat}&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&TILEMATRIX={z}&TILEROW={y}&TILECOL={
x}', {
attribution: '<a target="_blank"
href="https://www.geoportail.gouv.fr/">Geoportail France</a>',
bounds: [[-75, -180], [81, 180]],
minZoom: 2,
maxZoom: 18,
apikey: 'choisirgeoportail',
format: 'image/png',
style: 'normal'
});
var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
maxZoom: 17,
attribution: 'Map data: © <a
href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a
href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a
href="https://opentopomap.org">OpenTopoMap</a> (<a
href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
});
var Esri_WorldStreetMap =
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/
World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS,
Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand),
TomTom, 2012'
});
var Esri_WorldImagery =
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/
MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS,
AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});
// ini buat ubah tampilan peta default dashboard by.myudamash~
var map = L.map('map', {
fullscreenControl: true,
center: [<?= $web['coordinat_wilayah'] ?>],
zoom: <?= $web['zoom_view'] ?>,
layers: [peta1],
});
let baseMaps = {
id: 'basemap',
title: 'Base Maps',
type: 'single',
child: [{
title: 'Grayscale',
iconHtml: '<img
src="https://cdn-icons-png.flaticon.com/128/744/744480.png">',
layer: peta1
},
{
title: 'Sattelite',
iconHtml: '<img
src="https://cdn-icons-png.flaticon.com/128/814/814513.png">',
layer: peta2
},
{
title: 'Street',
iconHtml: '<img
src="https://cdn-icons-png.flaticon.com/128/744/744480.png">',
layer: peta3
},
{
title: 'Smooth Dark',
iconHtml: '<img
src="https://cdn-icons-png.flaticon.com/128/10005/10005327.png">',
layer: Stadia_AlidadeSmoothDark
},
{
title: 'CartoDB',
iconHtml: '<img
src="https://cdn-icons-png.flaticon.com/128/11037/11037013.png">',
layer: peta6
},
{
title: 'France plan',
iconHtml: '<img
src="https://cdn-icons-png.flaticon.com/128/9145/9145728.png">',
layer: GeoportailFrance_plan
},
{
title: 'Topo Map',
iconHtml: '<img
src="https://cdn-icons-png.flaticon.com/128/1257/1257385.png">',
layer: OpenTopoMap
},
{
title: 'Esri World StreetMap',
iconHtml: '<img
src="https://cdn-icons-png.flaticon.com/128/4238/4238090.png">',
layer: Esri_WorldStreetMap
},
{
title: 'Esri World Imagery',
iconHtml: '<img
src="https://cdn-icons-png.flaticon.com/128/1243/1243420.png">',
layer: Esri_WorldImagery
},
{
title: 'Esri Nat Map',
iconHtml: '<img
src="https://cdn-icons-png.flaticon.com/128/9145/9145692.png">',
layer: Esri_NatGeoWorldMap
}
]
};
//=======gedung==========
var IconGedung = L.icon({
iconUrl: '<?= base_url('marker/gedung.png') ?>',
iconSize: [30, 45], // size of the icon
iconAnchor: [10, 45], // point of the icon which will correspond to marker's
location
});
<?php foreach ($gedung as $key => $value) { ?>
var gedung = L.marker([<?= $value['coordinat'] ?>], {
icon: IconGedung
})
.bindPopup('<img src="<?= base_url('assets/' . $value['foto']) ?>"
width="300px"> <h6><b><?= $value['nama_gedung'] ?></b></h6>' +
'<table class="table m-0 table-sm" widhth="100%">' +
'<tr><td width="150px">Lokasi :<br><?= $value['nama_kecamatan']
?></td></tr>' +
'<tr><td width="150px">Jenis Kapal :<br><?= $value['desa'] ?></td></tr>' +
'<tr><td width="150px">Luas Bangunan :<br><?= $value['luas_bangunan'] ?>
M<sup>2</sup></td></tr>' +
'<tr><td width="150px">Luas Tanah :<br><?= $value['luas_tanah'] ?>
M<sup>2</sup></td></tr>' +
'</table>' +
'<a href="<?= base_url('Home/DetailGedung/' . $value['id_gedung']) ?>"
class="btn btn-sm btn-default btn-block">Detail</a>')
.addTo(grupGedung);
<?php } ?>
//======irigasi===========
<?php foreach ($irigasi as $key => $value) { ?>
var Irigasi = L.geoJSON(<?= $value['geojson_irigasi']; ?>, {
style: {
color: "<?= $value['warna_irigasi'] ?>",
weight: <?= $value['tebal_irigasi'] ?>,
},
})
.bindPopup('<b><?= $value['nama_irigasi'] ?></b></h6>' +
'<table class="table m-0 table-sm" widhth="100%">' +
'<tr><td width="150px">Lokasi :<br><?= $value['nama_kecamatan']
?></td></tr>' +
'<tr><td width="150px">Jenis Kapal :<br><?= $value['desa'] ?></td></tr>' +
'<tr><td width="150px">Panjang :<br><?= $value['panjang_irigasi'] ?>
Meter</tr>' +
'<tr><td width="150px">Lebar :<br><?= $value['lebar_irigasi'] ?>
Meter</td></tr>' +
'</table>' +
'<a href="<?= base_url('Home/DetailIrigasi/' . $value['id_irigasi']) ?>"
class="btn btn-sm btn-default btn-block">Detail</a>')
.addTo(grupIrigasi);
<?php } ?>
//===========jalan================
let overlayMaps = {
id: 'layers',
title: 'Marker Kapal',
collapse: true,
child: [{
title: 'Stasiun Bakamla - NMSS',
iconHtml: '<a href="#"><i class="fa fa-building text-success"></i></a>',
layer: grupGedung,
}, {
title: 'Pelanggaran Hukum',
iconHtml: '<a href="#"><i class="fas fa-memory text-success"></i></i></a>',
layer: grupJembatan,
}, {
title: 'Anomali',
iconHtml: '<a href="#"><i class="fa fa-water text-success"></i></a>',
layer: grupIrigasi,
}, {
title: 'ALKI 1',
iconHtml: '<a href="#"><i class="fa fa-road text-success"></i></a>',
layer: grupJalanProv,
}, {
title: 'Kecelakaan Laut',
iconHtml: '<a href="#"><i class="fa fa-tree text-success"></i></a>',
layer: grupKecelakaan,
}, {
title: 'Jalan Kab',
iconHtml: '<a href="#"><i class="fa fa-tree text-success"></i></a>',
layer: grupJalanKab,
}, {
title: 'Data Kapal',
iconHtml: '<a href="#"><i class="fa fa-road text-success"></i></a>',
layer: grupJalanLokal,
}, ]
};
//====lumap===========
let elLumap = document.querySelector('#lumap');
let lumap = new Lumap(map, elLumap, [baseMaps, overlayMaps]);
// Tambahkan legenda
var legendControl = L.control({ position: 'bottomleft' });
return div;
};
legendControl.addTo(map);
function getColor(category) {
// Gantilah dengan kode logika untuk menentukan warna berdasarkan kategori
return category === 'kategori1' ? 'red' :
category === 'kategori2' ? 'blue' :
category === 'kategori3' ? 'grey' :
category === 'kategori4' ? 'yellow' :
category === 'kategori5' ? 'green' :
category === 'kategori6' ? 'blue' :
'gray'; // Warna default jika kategori tidak dikenali
}
</script>