V Home Lama

<div class="col-sm-10">
<div id="map" style="width: 102%; height: 100vh;"></div>

</div>
<div class="col-sm-2">
<div id="lumap"></div>
</div>
<div class="col-md-6">


<div class="card card-danger">
<div class="card-header">
<h3 class="card-title">Pie Chart</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-
widget="collapse">
<i class="fas fa-minus"></i>
</button>
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; max-width: 100%;"></canvas>
</div>

</div>

</div>


<div class="card card-success">
<div class="card-header">
<h3 class="card-title">Bar Chart</h3>
<div class="card-tools">
widget="collapse">
<i class="fas fa-minus"></i>
</button>
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; max-width: 100%;"></canvas>
</div>
</div>

</div>

<script>
var peta1 =
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?
access_token=pk.eyJ1IjoibWFyZGFsaXVzIiwiYSI6ImNsZnVtbDdtZzAyYjMzdXRhdDN6djY5cWoifQ.
Xqtyqa7hvGhQla2oAwpG_Q', {
attribution: 'Map data © <a
href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a
href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11'
});
var peta2 = L.tileLayer('https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {

maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});
var peta3 = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

attribution: '© <a
href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
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
layer: peta2
},
{
title: 'Street',
iconHtml: '<img
layer: peta3
},
{
title: 'Smooth Dark',
iconHtml: '<img
layer: Stadia_AlidadeSmoothDark
},
{
title: 'CartoDB',
iconHtml: '<img
layer: peta6
},
{
title: 'France plan',
iconHtml: '<img
layer: GeoportailFrance_plan
},
{
title: 'Topo Map',
iconHtml: '<img
layer: OpenTopoMap
},
{
title: 'Esri World StreetMap',
iconHtml: '<img
layer: Esri_WorldStreetMap
},
{
title: 'Esri World Imagery',
iconHtml: '<img
layer: Esri_WorldImagery
},
{
title: 'Esri Nat Map',
iconHtml: '<img
layer: Esri_NatGeoWorldMap
}
]
};
let grupGedung = L.layerGroup();

let grupJembatan = L.layerGroup();
let grupKecelakaan = L.layerGroup();
let grupIrigasi = L.layerGroup();
var grupJalanProv = L.layerGroup();
var grupJalanKab = L.layerGroup();
var grupJalanLokal = L.layerGroup();
//=======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 } ?>
//= === === == Jembatan === === === ===

var IconJembatan = L.icon({
iconUrl: '<?= base_url('marker/jembatan.png') ?>',
iconSize: [30, 45], // size of the icon
iconAnchor: [10, 45], // point of the icon which will correspond to marker's
location
});
<?php foreach ($jembatan as $key => $value) { ?>
var jembatan = L.marker([<?= $value['coordinat'] ?>], {
icon: IconJembatan
})
.bindPopup('<img src="<?= base_url('assets/' . $value['foto']) ?>"
width="300px"><h6><b><?= $value['nama_jembatan'] ?></b></h6>' +
'<table class="table m-0 table-sm" width="100%">' +
?></td></tr>' +
'<tr><td width="150px">Sumber :<br><?= $value['panjang_jembatan'] ?> </tr>'
+
'<tr><td width="150px">Kelompok Pelanggaran :<br><?=
$value['lebar_jembatan'] ?> </td></tr>' +
'</table>' +
'<a href="<?= base_url('Home/DetailJembatan/' . $value['id_jembatan']) ?>"
.addTo(grupJembatan);
<?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>' +
?></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']) ?>"
.addTo(grupIrigasi);
<?php } ?>
//===========jalan================
<?php foreach ($jalan_prov as $key => $value) { ?>

var JalanProvinsi = L.geoJSON(<?= $value['geojson_jalan']; ?>, {
style: {
color: "<?= $value['warna_jalan'] ?>",
weight: <?= $value['tebal_jalan'] ?>,
},
}).addTo(grupJalanProv);
JalanProvinsi.eachLayer(function(layer) {
layer.bindPopup('<h6><b><?= $value['nama_jalan'] ?></b></h6>' +
?></td></tr>' +
'<tr><td width="150px">Status :<br><?php if ($value['status_jalan'] == 1) {
echo 'Jalan Provinsi';
} elseif ($value['status_jalan'] == 2)
{
echo 'Jalan Kabupaten';
} else {
echo 'Jalan Lokal';
} ?></td></tr>' +
'<tr><td width="150px">Jalur ALKI :<br><?php if ($value['permukaan_jalan']
== 1) {
echo 'Beton';
} elseif
($value['permukaan_jalan'] == 2) {
echo 'Aspal';
} elseif
echo 'Koral';
} else {
echo 'Tanah';
} ?></td></tr>' +
'<tr><td width="150px">Panjang ALKI :<br><?= $value['panjang_jalan'] ?>
Meter</td></tr>' +
'<tr><td width="150px">Lebar ALKI :<br><?= $value['lebar_jalan'] ?>
Meter</td></tr>' +
'</table>' +
'<a href="<?= base_url('Home/DetailJalan/' . $value['id_jalan']) ?>"
class="btn btn-xs btn-default btn-block">Detail</a>');
});
<?php } ?>
<?php foreach ($jalan_kab as $key => $value) { ?>

var JalanKabupaten = L.geoJSON(<?= $value['geojson_jalan']; ?>, {
style: {
},
}).addTo(grupJalanKab);
JalanKabupaten.eachLayer(function(layer) {
?></td></tr>' +
{
} else {
echo 'Jalan Lokal';
} ?></td></tr>' +
== 1) {
echo 'Beton';
} elseif
echo 'Aspal';
} elseif
echo 'Koral';
} else {
echo 'Tanah';
} ?></td></tr>' +
'<tr><td width="150px">Panjang ALKI :<br><?= $value['panjang_jalan'] ?>
Meter</td></tr>' +
'<tr><td width="150px">Lebar ALKI :<br><?= $value['lebar_jalan'] ?>
Meter</td></tr>' +
'</table>' +
});
<?php } ?>
<?php foreach ($jalan_lokal as $key => $value) { ?>

var JalanLokal = L.geoJSON(<?= $value['geojson_jalan']; ?>, {
style: {
},
}).addTo(grupJalanLokal);
JalanLokal.eachLayer(function(layer) {
?></td></tr>' +
{
} else {
echo 'Jalan Lokal';
} ?></td></tr>' +
== 1) {
echo 'Beton';
} elseif
echo 'Aspal';
} elseif
echo 'Koral';
} else {
echo 'Tanah';
} ?></td></tr>' +
'<tr><td width="150px">Sumber :<br><?= $value['panjang_jalan'] ?>
</td></tr>' +
'<tr><td width="150px">Kelompok Pelanggaran :<br><?=
$value['lebar_jalan'] ?> </td></tr>' +
'</table>' +
});
<?php } ?>
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,
}, ]
};
// Ini untuk memunculkan checklistbox marker pada leaflet, myudamash~

var checklistbox = L.layerGroup([grupGedung, grupJembatan, grupIrigasi,
grupJalanProv, grupJalanKab, grupKecelakaan, grupJalanLokal]);
checklistbox.addTo(map);
//====lumap===========
let elLumap = document.querySelector('#lumap');
let lumap = new Lumap(map, elLumap, [baseMaps, overlayMaps]);
// Tambahkan legenda
var legendControl = L.control({ position: 'bottomleft' });
legendControl.onAdd = function (map) {

var div = L.DomUtil.create('div', 'info legend');
// Tambahkan informasi legenda di sini

div.innerHTML += '<h4>Legenda</h4>';
div.innerHTML += '<i style="background:' + getColor('kategori1') + '"></i>
Stasiun Bakamla - NMSS<br>';
Pelanggaran Hukum<br>';
Anomali<br>';
div.innerHTML += '<i style="background:' + getColor('kategori4') + '"></i> ALKI
1<br>';
Kecelakaan Laut<br>';
div.innerHTML += '<i style="background:' + getColor('kategori6') + '"></i> Data
Kapal<br>';
// Tambahkan baris ini untuk setiap kategori yang ingin Anda tampilkan
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
}
$(function () {
/* ChartJS
* -------
* Here we will create a few charts using ChartJS
*/
//-------------
//- PIE CHART -
//-------------
// Get context with jQuery - using jQuery's .get() method.
var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
var pieData = donutData;
var pieOptions = {
maintainAspectRatio : false,
responsive : true,
}
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
new Chart(pieChartCanvas, {
type: 'pie',
data: pieData,
options: pieOptions
})
//-------------
//- BAR CHART -
//-------------
var barChartCanvas = $('#barChart').get(0).getContext('2d')
var barChartData = $.extend(true, {}, areaChartData)
var temp0 = areaChartData.datasets[0]
var temp1 = areaChartData.datasets[1]
barChartData.datasets[0] = temp1
barChartData.datasets[1] = temp0
var barChartOptions = {
responsive : true,
maintainAspectRatio : false,
datasetFill : false
}
new Chart(barChartCanvas, {
type: 'bar',
data: barChartData,
options: barChartOptions
})
})
</script>

V Home Lama

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

V Home Lama

Uploaded by

Copyright:

Available Formats

<div class="col-sm-10">

<div id="map" style="width: 102%; height: 100vh;"></div>

var peta2 = L.tileLayer('https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {

var peta3 = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

let grupGedung = L.layerGroup();

//= === === == Jembatan === === === ===

<?php foreach ($jalan_prov as $key => $value) { ?>

<?php foreach ($jalan_kab as $key => $value) { ?>

<?php foreach ($jalan_lokal as $key => $value) { ?>

// Ini untuk memunculkan checklistbox marker pada leaflet, myudamash~

legendControl.onAdd = function (map) {

// Tambahkan informasi legenda di sini

You might also like