87 lines
3.1 KiB
JavaScript
87 lines
3.1 KiB
JavaScript
var result = [];
|
|
$(document).ready(function () {
|
|
PopulateLokasi();
|
|
});
|
|
|
|
function PopulateLokasi() {
|
|
$.ajax({
|
|
url: "https://banksampah.jakarta.go.id/api/web/index",
|
|
method: 'GET',
|
|
success: function (result) {
|
|
arrTipeLokasi = [];
|
|
arrTipeLokasi = result;
|
|
drawTipeLokasi(result);
|
|
}
|
|
});
|
|
}
|
|
function drawTipeLokasi(result) {
|
|
const map = L.map('map', {
|
|
scrollWheelZoom: false
|
|
})
|
|
//.setView([-6.149451590260942, 106.84327788839438], 10.5)
|
|
.setView([-6.18451590260942, 106.84327788839438], 11.5)
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '  '
|
|
}).addTo(map);
|
|
[
|
|
"jakut",
|
|
"jaksel",
|
|
"jakpus",
|
|
"jaktim",
|
|
"jakbar",
|
|
"kep1000",
|
|
].map((city) => {
|
|
$.getJSON(`/StaticFiles/geojson/id-jk-${city}.geojson`, (data) => {
|
|
L.geoJSON(data, {
|
|
color: '#4f9bd9',
|
|
fillColor: '#fff',
|
|
fillOpacity: 0.1,
|
|
radius: 500
|
|
}).addTo(map);
|
|
})
|
|
})
|
|
let markers = [], options
|
|
for (var i in result) {
|
|
var regexLat = new RegExp('^(\\+|-)?(?:90(?:(?:\\.0{1,20})?)|(?:[0-9]|[1-8][0-9])(?:(?:\\.[0-9]{1,20})?))$');
|
|
var regexLong = new RegExp('^(\\+|-)?(?:180(?:(?:\\.0{1,20})?)|(?:[0-9]|[1-9][0-9]|1[0-7][0-9])(?:(?:\\.[0-9]{1,20})?))$');
|
|
|
|
if (!regexLat.exec(result[i].latitude)) {
|
|
console.log(result[i].id+" - "+result[i].latitude);
|
|
} else if (!regexLong.exec(result[i].longitude)) {
|
|
console.log(result[i].id + " - " +result[i].longitude);
|
|
}
|
|
else {
|
|
options = {
|
|
icon: L.divIcon({
|
|
iconSize: 'auto',
|
|
html: `<a href="/detail_lokasi/?id=${result[i].id}">
|
|
<div style="width: 5rem; margin-left:-2.4rem; margin-right:-2.4rem; wrap:wrap;
|
|
margin-top:-0.2rem; background:transparent; gap:0.5rem" class="d-flex flex-column align-items-center justify-content-center">
|
|
<div title="" class="marker-circle rounded-circle d-block bg-${result[i].color} d-flex justify-content-center align-items-center text-white"
|
|
style="transition: 0.5s;width:1rem;height:1rem;font-size: 0.5rem; border-width:0.1rem; border-style:solid; border-color:rgba(255,255,255,0.5)">
|
|
</div>
|
|
</div>
|
|
</a>`,
|
|
})
|
|
}
|
|
markers[100] = L.marker([result[i].latitude, result[i].longitude], options).addTo(map);
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
var legend = L.control({ position: "bottomleft" });
|
|
legend.onAdd = function (map) {
|
|
var div = L.DomUtil.create("div", "legend");
|
|
div.innerHTML += "<h4>Keterangan</h4>";
|
|
div.innerHTML += '<i style="background: #499F68"></i><span>Bank Sampah Unit</span><br>';
|
|
div.innerHTML += '<i style="background: #DD1C1A"></i><span>Bank Sampah Induk</span><br>';
|
|
return div;
|
|
};
|
|
|
|
legend.addTo(map);
|
|
|
|
}
|