53 lines
1.5 KiB
JavaScript
53 lines
1.5 KiB
JavaScript
var map, googleHybrid, marker, polygon;
|
|
|
|
let evaluationElement = document.getElementById("evaluations");
|
|
let evaluation = JSON.parse(evaluationElement.dataset.evaluations);
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
if (evaluation.length > 0) {
|
|
initMap();
|
|
map.invalidateSize();
|
|
setEvaluationToMap();
|
|
}
|
|
});
|
|
|
|
function initMap() {
|
|
map = L.map("map", {
|
|
attributionControl: false,
|
|
}).setView([-8.172495095862395, 113.69876818661332], 10);
|
|
|
|
googleHybrid = L.tileLayer(
|
|
"http://{s}.google.com/vt?lyrs=y&x={x}&y={y}&z={z}",
|
|
{
|
|
maxZoom: 20,
|
|
subdomains: ["mt0", "mt1", "mt2", "mt3"],
|
|
}
|
|
).addTo(map);
|
|
}
|
|
|
|
function setEvaluationToMap() {
|
|
evaluation.forEach((evaluation) => {
|
|
let coordinates = evaluation.land.detail_lands.map((detail) => {
|
|
return [detail.lat, detail.lng];
|
|
});
|
|
|
|
let cfValue = evaluation.cf_value * 100;
|
|
|
|
polygon = L.polygon(coordinates, {
|
|
color: "blue",
|
|
fillColor: "blue",
|
|
fillOpacity: 0.5,
|
|
}).addTo(map);
|
|
|
|
marker = L.marker(coordinates[0])
|
|
.addTo(map)
|
|
.bindPopup(
|
|
`<div class="text-center font-semibold"><b> Hasil presentase CF pada lahan <br /> ${
|
|
evaluation.land.owner
|
|
}</br>"${evaluation.threshold_value}"<br/>${cfValue.toFixed(
|
|
2
|
|
)} %</b></div>`
|
|
);
|
|
});
|
|
}
|