110 lines
3.0 KiB
JavaScript
110 lines
3.0 KiB
JavaScript
var map = L.map("mapid").setView([0.854198761767967, 99.57166550126928], 12);
|
|
|
|
var basemap = L.tileLayer(
|
|
"https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
|
|
{
|
|
maxZoom: 20,
|
|
subdomains: ["mt0", "mt1", "mt2", "mt3"],
|
|
attribution: 'Google | <a href="#">unsorry@2020</a>',
|
|
}
|
|
);
|
|
basemap.addTo(map);
|
|
|
|
map.createPane("pane_bataskecamatan");
|
|
map.getPane("pane_bataskecamatan").style.zIndex = 301;
|
|
var bataskecamatan = L.geoJson(null, {
|
|
pane: "pane_bataskecamatan",
|
|
style: function (feature) {
|
|
return {
|
|
fillColor: "red",
|
|
fillOpacity: 0,
|
|
color: "yellow",
|
|
weight: 1,
|
|
opacity: 1,
|
|
interactive: false,
|
|
};
|
|
},
|
|
onEachFeature: function (feature, layer) {
|
|
var content = layer.feature.properties.kecamatan.toString();
|
|
layer.bindTooltip(content, {
|
|
direction: "center",
|
|
permanent: true,
|
|
className: "styleLabelkecamatan",
|
|
});
|
|
},
|
|
});
|
|
$.getJSON(
|
|
"http://localhost/Kmeans2/assets/data/bataskecamatan.geojson",
|
|
function (data) {
|
|
bataskecamatan.addData(data);
|
|
map.addLayer(bataskecamatan);
|
|
map.fitBounds(bataskecamatan.getBounds());
|
|
}
|
|
);
|
|
|
|
map.createPane("pane_bataskecamatan");
|
|
map.getPane("pane_bataskecamatan").style.zIndex = 302;
|
|
var bataskecamatan = L.geoJson(null, {
|
|
pane: "pane_bataskecamatan",
|
|
style: function (feature) {
|
|
return {
|
|
fillOpacity: 0,
|
|
color: "yellow",
|
|
weight: 3,
|
|
opacity: 1,
|
|
interactive: false,
|
|
};
|
|
},
|
|
onEachFeature: function (feature, layer) {
|
|
var content = "Kec. " + layer.feature.properties.Kecamatan.toString();
|
|
layer.bindTooltip(content, {
|
|
direction: "center",
|
|
permanent: true,
|
|
className: "styleLabelKecamatan",
|
|
});
|
|
},
|
|
});
|
|
$.getJSON(
|
|
"http://localhost/Kmeans2/assets/data/bataskecamatan.geojson",
|
|
function (data) {
|
|
bataskecamatan.addData(data);
|
|
map.addLayer(bataskecamatan);
|
|
}
|
|
);
|
|
|
|
resetLabels([bataskecamatan, bataskecamatan]);
|
|
map.on("zoomend", function () {
|
|
if (map.getZoom() <= 12) {
|
|
map.removeLayer(bataskecamatan);
|
|
resetLabels([bataskecamatan]);
|
|
} else if (map.getZoom() > 12) {
|
|
map.addLayer(bataskecamatan);
|
|
resetLabels([bataskecamatan, bataskecamatan]);
|
|
}
|
|
});
|
|
map.on("move", function () {
|
|
resetLabels([bataskecamatan, bataskecamatan]);
|
|
});
|
|
map.on("layeradd", function () {
|
|
resetLabels([bataskecamatan, bataskecamatan]);
|
|
});
|
|
map.on("layerremove", function () {
|
|
resetLabels([bataskecamatan, bataskecamatan]);
|
|
});
|
|
|
|
L.control
|
|
.scale({
|
|
maxWidth: 150,
|
|
imperial: false,
|
|
})
|
|
.addTo(map);
|
|
|
|
var legend_div = new L.Control({ position: "bottomright" });
|
|
legend_div.onAdd = function (map) {
|
|
this._div = L.DomUtil.create("div", "legend");
|
|
this._div.innerHTML =
|
|
'<div id="legend-title">Legenda</div><hr><svg width="32" height="16"><line x1="0" y1="11" x2="32" y2="11" style="stroke-width:4;stroke:rgb(255, 255, 0);" /></svg> Batas Kecamatan<br><svg width="32" height="16"><line x1="0" y1="11" x2="32" y2="11" style="stroke-width:1;stroke:rgb(255, 255, 0);" /></svg> Batas kecamatan';
|
|
return this._div;
|
|
};
|
|
legend_div.addTo(map);
|