|
|
|
@@ -0,0 +1,485 @@
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>GIS SPBU</title>
|
|
|
|
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
|
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
|
|
|
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geometryutil/0.10.2/leaflet.geometryutil.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
html, body {height:100%; margin:0;}
|
|
|
|
|
#map {height:100%;}
|
|
|
|
|
input, select {width:100%; margin-bottom:5px;}
|
|
|
|
|
button {margin-top:5px;}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
html, body {height:100%; margin:0;}
|
|
|
|
|
#map {height:100%;}
|
|
|
|
|
input, select {width:100%; margin-bottom:5px;}
|
|
|
|
|
button {margin-top:5px;}
|
|
|
|
|
|
|
|
|
|
/* ===== LEGENDA ===== */
|
|
|
|
|
.legend {
|
|
|
|
|
background: white;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
color: #333;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
box-shadow: 0 0 5px rgba(0,0,0,0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.legend i {
|
|
|
|
|
width: 18px;
|
|
|
|
|
height: 18px;
|
|
|
|
|
float: left;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div id="map"></div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
// ================= MAP =================
|
|
|
|
|
const map = L.map('map').setView([-0.02, 109.34], 13);
|
|
|
|
|
|
|
|
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
|
|
|
|
|
|
|
|
|
|
// ================= GEOJSON KECAMATAN =================
|
|
|
|
|
fetch("Admin_Kecamatan.json")
|
|
|
|
|
.then(res => res.json())
|
|
|
|
|
.then(data => {
|
|
|
|
|
|
|
|
|
|
const geojsonLayer = L.geoJSON(data, {
|
|
|
|
|
|
|
|
|
|
style: function(feature) {
|
|
|
|
|
|
|
|
|
|
const nama = feature.properties.Ket;
|
|
|
|
|
|
|
|
|
|
let warna = "gray";
|
|
|
|
|
|
|
|
|
|
if(nama == "Pontianak Timur") warna = "pink";
|
|
|
|
|
else if(nama == "Pontianak Barat") warna = "skyblue";
|
|
|
|
|
else if(nama == "Pontianak Kota") warna = "gold";
|
|
|
|
|
else if(nama == "Pontianak Selatan") warna = "violet";
|
|
|
|
|
else if(nama == "Pontianak Tenggara") warna = "sienna";
|
|
|
|
|
else if(nama == "Pontianak Utara") warna = "slategray";
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
color: "black",
|
|
|
|
|
weight: 2,
|
|
|
|
|
fillColor: warna,
|
|
|
|
|
fillOpacity: 0.5,
|
|
|
|
|
interactive: false
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onEachFeature: function(feature, layer) {
|
|
|
|
|
|
|
|
|
|
const nama = feature.properties.Ket || "Tidak ada nama";
|
|
|
|
|
const populasi = feature.properties.Populasi || "Tidak ada data";
|
|
|
|
|
|
|
|
|
|
layer.bindPopup(`
|
|
|
|
|
<b>Kecamatan:</b> ${nama}<br>
|
|
|
|
|
<b>Populasi:</b> ${populasi}
|
|
|
|
|
`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
geojsonLayer.addTo(map);
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// ================= ICON SPBU =================
|
|
|
|
|
const iconHijau = new L.Icon({
|
|
|
|
|
iconUrl:'https://maps.google.com/mapfiles/ms/icons/green-dot.png',
|
|
|
|
|
iconSize:[32,32]
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const iconMerah = new L.Icon({
|
|
|
|
|
iconUrl:'https://maps.google.com/mapfiles/ms/icons/red-dot.png',
|
|
|
|
|
iconSize:[32,32]
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// ================= LAYER GROUP SPBU =================
|
|
|
|
|
const spbuBuka = L.layerGroup();
|
|
|
|
|
const spbuTutup = L.layerGroup();
|
|
|
|
|
|
|
|
|
|
// ================= FORM SPBU =================
|
|
|
|
|
function formPopup(lat,lng){
|
|
|
|
|
return `
|
|
|
|
|
<b>Input SPBU</b><br>
|
|
|
|
|
Nama:<input id="nama"><br>
|
|
|
|
|
WA:<input id="wa"><br>
|
|
|
|
|
Buka 24 Jam:
|
|
|
|
|
<select id="buka">
|
|
|
|
|
<option>Iya</option>
|
|
|
|
|
<option>Tidak</option>
|
|
|
|
|
</select><br>
|
|
|
|
|
<button onclick="simpan(${lat},${lng})">Simpan</button>
|
|
|
|
|
<button onclick="map.closePopup()">Batal</button>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
map.on('click',function(e){
|
|
|
|
|
L.popup().setLatLng(e.latlng)
|
|
|
|
|
.setContent(formPopup(e.latlng.lat,e.latlng.lng))
|
|
|
|
|
.openOn(map);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// ================= SIMPAN SPBU =================
|
|
|
|
|
function simpan(lat,lng){
|
|
|
|
|
const nama=document.getElementById("nama").value;
|
|
|
|
|
const wa=document.getElementById("wa").value;
|
|
|
|
|
const buka=document.getElementById("buka").value;
|
|
|
|
|
|
|
|
|
|
fetch("simpan.php",{
|
|
|
|
|
method:"POST",
|
|
|
|
|
headers:{"Content-Type":"application/x-www-form-urlencoded"},
|
|
|
|
|
body:`nama=${nama}&wa=${wa}&buka=${buka}&lat=${lat}&lng=${lng}`
|
|
|
|
|
}).then(()=>location.reload());
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ================= LOAD SPBU =================
|
|
|
|
|
fetch("ambil.php")
|
|
|
|
|
.then(res=>res.json())
|
|
|
|
|
.then(data=>{
|
|
|
|
|
data.forEach(d=>{
|
|
|
|
|
|
|
|
|
|
const icon = d.buka=="Iya" ? iconHijau : iconMerah;
|
|
|
|
|
|
|
|
|
|
const marker = L.marker([d.lat,d.lng],{icon})
|
|
|
|
|
.bindPopup(`
|
|
|
|
|
<b>${d.nama}</b><br>
|
|
|
|
|
WA: ${d.wa}<br>
|
|
|
|
|
${d.buka=="Iya"?"🟢 Buka 24 Jam":"🔴 Tidak Buka 24 Jam"}<br><br>
|
|
|
|
|
|
|
|
|
|
<button onclick="editSPBU(${d.id},'${d.nama.replace(/'/g,"")}','${d.wa}','${d.buka}',${d.lat},${d.lng})">Edit</button>
|
|
|
|
|
<button onclick="hapusSPBU(${d.id})">Hapus</button>
|
|
|
|
|
`);
|
|
|
|
|
|
|
|
|
|
if(d.buka=="Iya"){
|
|
|
|
|
marker.addTo(spbuBuka);
|
|
|
|
|
}else{
|
|
|
|
|
marker.addTo(spbuTutup);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// ================= EDIT SPBU =================
|
|
|
|
|
function editSPBU(id,nama,wa,buka,lat,lng){
|
|
|
|
|
const form=`
|
|
|
|
|
Nama:<input id="nama" value="${nama}"><br>
|
|
|
|
|
WA:<input id="wa" value="${wa}"><br>
|
|
|
|
|
<select id="buka">
|
|
|
|
|
<option ${buka=="Iya"?"selected":""}>Iya</option>
|
|
|
|
|
<option ${buka=="Tidak"?"selected":""}>Tidak</option>
|
|
|
|
|
</select><br>
|
|
|
|
|
<button onclick="updateSPBU(${id})">Update</button>
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
L.popup().setLatLng([lat,lng]).setContent(form).openOn(map);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateSPBU(id){
|
|
|
|
|
const nama=document.getElementById("nama").value;
|
|
|
|
|
const wa=document.getElementById("wa").value;
|
|
|
|
|
const buka=document.getElementById("buka").value;
|
|
|
|
|
|
|
|
|
|
fetch("update.php",{
|
|
|
|
|
method:"POST",
|
|
|
|
|
headers:{"Content-Type":"application/x-www-form-urlencoded"},
|
|
|
|
|
body:`id=${id}&nama=${nama}&wa=${wa}&buka=${buka}`
|
|
|
|
|
}).then(()=>location.reload());
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function hapusSPBU(id){
|
|
|
|
|
if(confirm("Hapus SPBU?")){
|
|
|
|
|
fetch("hapus.php",{
|
|
|
|
|
method:"POST",
|
|
|
|
|
headers:{"Content-Type":"application/x-www-form-urlencoded"},
|
|
|
|
|
body:`id=${id}`
|
|
|
|
|
}).then(()=>location.reload());
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ================= DRAW =================
|
|
|
|
|
const drawnItems=new L.FeatureGroup();
|
|
|
|
|
map.addLayer(drawnItems);
|
|
|
|
|
|
|
|
|
|
const drawControl=new L.Control.Draw({
|
|
|
|
|
edit:{featureGroup:drawnItems},
|
|
|
|
|
draw:{marker:false,polyline:true,polygon:true}
|
|
|
|
|
});
|
|
|
|
|
map.addControl(drawControl);
|
|
|
|
|
|
|
|
|
|
// ================= FORM JALAN =================
|
|
|
|
|
function formJalan(latlngs){
|
|
|
|
|
return `
|
|
|
|
|
<b>Input Jalan</b><br>
|
|
|
|
|
Nama:<input id="nama_jalan"><br>
|
|
|
|
|
Status:
|
|
|
|
|
<select id="status_jalan">
|
|
|
|
|
<option>Nasional</option>
|
|
|
|
|
<option>Provinsi</option>
|
|
|
|
|
<option>Kabupaten</option>
|
|
|
|
|
</select><br>
|
|
|
|
|
<button onclick='simpanJalan(${JSON.stringify(latlngs)})'>Simpan</button>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ================= FORM KAVLING =================
|
|
|
|
|
function formKavling(latlngs){
|
|
|
|
|
return `
|
|
|
|
|
<b>Input Kavling</b><br>
|
|
|
|
|
Pemilik:<input id="pemilik"><br>
|
|
|
|
|
Status:
|
|
|
|
|
<select id="status_kavling">
|
|
|
|
|
<option>SHM</option>
|
|
|
|
|
<option>HGB</option>
|
|
|
|
|
<option>HGU</option>
|
|
|
|
|
<option>HP</option>
|
|
|
|
|
</select><br>
|
|
|
|
|
<button onclick='simpanKavling(${JSON.stringify(latlngs)})'>Simpan</button>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ================= DRAW EVENT =================
|
|
|
|
|
map.on(L.Draw.Event.CREATED,function(e){
|
|
|
|
|
|
|
|
|
|
const layer=e.layer;
|
|
|
|
|
drawnItems.addLayer(layer);
|
|
|
|
|
|
|
|
|
|
if(e.layerType==="polyline"){
|
|
|
|
|
const latlngs=layer.getLatLngs();
|
|
|
|
|
L.popup().setLatLng(layer.getBounds().getCenter())
|
|
|
|
|
.setContent(formJalan(latlngs)).openOn(map);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(e.layerType==="polygon"){
|
|
|
|
|
const latlngs=layer.getLatLngs()[0];
|
|
|
|
|
L.popup().setLatLng(layer.getBounds().getCenter())
|
|
|
|
|
.setContent(formKavling(latlngs)).openOn(map);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// ================= SIMPAN JALAN =================
|
|
|
|
|
function simpanJalan(latlngs){
|
|
|
|
|
const nama=document.getElementById("nama_jalan").value;
|
|
|
|
|
const status=document.getElementById("status_jalan").value;
|
|
|
|
|
|
|
|
|
|
let panjang=0;
|
|
|
|
|
for(let i=0;i<latlngs.length-1;i++){
|
|
|
|
|
panjang+=map.distance(latlngs[i],latlngs[i+1]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
fetch("simpan_jalan.php",{
|
|
|
|
|
method:"POST",
|
|
|
|
|
headers:{"Content-Type":"application/x-www-form-urlencoded"},
|
|
|
|
|
body:`nama=${nama}&status=${status}&panjang=${panjang}&geom=${JSON.stringify(latlngs)}`
|
|
|
|
|
}).then(()=>location.reload());
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ================= SIMPAN KAVLING =================
|
|
|
|
|
function simpanKavling(latlngs){
|
|
|
|
|
const pemilik=document.getElementById("pemilik").value;
|
|
|
|
|
const status=document.getElementById("status_kavling").value;
|
|
|
|
|
|
|
|
|
|
let luas=L.GeometryUtil.geodesicArea(latlngs);
|
|
|
|
|
|
|
|
|
|
fetch("simpan_kavling.php",{
|
|
|
|
|
method:"POST",
|
|
|
|
|
headers:{"Content-Type":"application/x-www-form-urlencoded"},
|
|
|
|
|
body:`pemilik=${pemilik}&status=${status}&luas=${luas}&geom=${JSON.stringify(latlngs)}`
|
|
|
|
|
}).then(()=>location.reload());
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ================= LOAD JALAN =================
|
|
|
|
|
fetch("ambil_jalan.php")
|
|
|
|
|
.then(res=>res.json())
|
|
|
|
|
.then(data=>{
|
|
|
|
|
data.forEach(d=>{
|
|
|
|
|
const coords=JSON.parse(d.geom);
|
|
|
|
|
|
|
|
|
|
let warna="blue";
|
|
|
|
|
if(d.status=="Nasional") warna="red";
|
|
|
|
|
if(d.status=="Provinsi") warna="green";
|
|
|
|
|
if(d.status=="Kabupaten") warna="orange";
|
|
|
|
|
|
|
|
|
|
L.polyline(coords,{color:warna})
|
|
|
|
|
.addTo(map)
|
|
|
|
|
.bindPopup(`
|
|
|
|
|
<b>${d.nama}</b><br>
|
|
|
|
|
Status: Jalan ${d.status}<br>
|
|
|
|
|
Panjang: ${parseFloat(d.panjang).toFixed(2)} meter<br><br>
|
|
|
|
|
|
|
|
|
|
<button onclick="editJalan(${d.id},'${d.nama.replace(/'/g,"")}','${d.status}',${coords[0].lat},${coords[0].lng})">Edit</button>
|
|
|
|
|
<button onclick="hapusJalan(${d.id})">Hapus</button>
|
|
|
|
|
`);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// ================= LOAD KAVLING =================
|
|
|
|
|
fetch("ambil_kavling.php")
|
|
|
|
|
.then(res=>res.json())
|
|
|
|
|
.then(data=>{
|
|
|
|
|
data.forEach(d=>{
|
|
|
|
|
const coords=JSON.parse(d.geom);
|
|
|
|
|
|
|
|
|
|
let warna="purple";
|
|
|
|
|
if(d.status=="SHM") warna="green";
|
|
|
|
|
if(d.status=="HGB") warna="blue";
|
|
|
|
|
if(d.status=="HGU") warna="orange";
|
|
|
|
|
if(d.status=="HP") warna="red";
|
|
|
|
|
|
|
|
|
|
L.polygon(coords,{color:warna})
|
|
|
|
|
.addTo(map)
|
|
|
|
|
.bindPopup(`
|
|
|
|
|
<b>${d.pemilik}</b><br>
|
|
|
|
|
Status: ${d.status}<br>
|
|
|
|
|
Luas: ${parseFloat(d.luas).toFixed(2)} m²<br><br>
|
|
|
|
|
|
|
|
|
|
<button onclick="editKavling(${d.id},'${d.pemilik.replace(/'/g,"")}','${d.status}',${coords[0].lat},${coords[0].lng})">Edit</button>
|
|
|
|
|
<button onclick="hapusKavling(${d.id})">Hapus</button>
|
|
|
|
|
`);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// ================= EDIT JALAN =================
|
|
|
|
|
function editJalan(id,nama,status,lat,lng){
|
|
|
|
|
const form=`
|
|
|
|
|
<b>Edit Jalan</b><br>
|
|
|
|
|
Nama:<input id="nama_jalan" value="${nama}"><br>
|
|
|
|
|
<select id="status_jalan">
|
|
|
|
|
<option ${status=="Nasional"?"selected":""}>Nasional</option>
|
|
|
|
|
<option ${status=="Provinsi"?"selected":""}>Provinsi</option>
|
|
|
|
|
<option ${status=="Kabupaten"?"selected":""}>Kabupaten</option>
|
|
|
|
|
</select><br>
|
|
|
|
|
<button onclick="updateJalan(${id})">Update</button>
|
|
|
|
|
`;
|
|
|
|
|
L.popup().setLatLng([lat,lng]).setContent(form).openOn(map);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateJalan(id){
|
|
|
|
|
const nama=document.getElementById("nama_jalan").value;
|
|
|
|
|
const status=document.getElementById("status_jalan").value;
|
|
|
|
|
|
|
|
|
|
fetch("update_jalan.php",{
|
|
|
|
|
method:"POST",
|
|
|
|
|
headers:{"Content-Type":"application/x-www-form-urlencoded"},
|
|
|
|
|
body:`id=${id}&nama=${nama}&status=${status}`
|
|
|
|
|
}).then(()=>location.reload());
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ================= EDIT KAVLING =================
|
|
|
|
|
function editKavling(id,pemilik,status,lat,lng){
|
|
|
|
|
const form=`
|
|
|
|
|
<b>Edit Kavling</b><br>
|
|
|
|
|
Pemilik:<input id="pemilik" value="${pemilik}"><br>
|
|
|
|
|
<select id="status_kavling">
|
|
|
|
|
<option ${status=="SHM"?"selected":""}>SHM</option>
|
|
|
|
|
<option ${status=="HGB"?"selected":""}>HGB</option>
|
|
|
|
|
<option ${status=="HGU"?"selected":""}>HGU</option>
|
|
|
|
|
<option ${status=="HP"?"selected":""}>HP</option>
|
|
|
|
|
</select><br>
|
|
|
|
|
<button onclick="updateKavling(${id})">Update</button>
|
|
|
|
|
`;
|
|
|
|
|
L.popup().setLatLng([lat,lng]).setContent(form).openOn(map);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateKavling(id){
|
|
|
|
|
const pemilik=document.getElementById("pemilik").value;
|
|
|
|
|
const status=document.getElementById("status_kavling").value;
|
|
|
|
|
|
|
|
|
|
fetch("update_kavling.php",{
|
|
|
|
|
method:"POST",
|
|
|
|
|
headers:{"Content-Type":"application/x-www-form-urlencoded"},
|
|
|
|
|
body:`id=${id}&pemilik=${pemilik}&status=${status}`
|
|
|
|
|
}).then(()=>location.reload());
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ================= HAPUS =================
|
|
|
|
|
function hapusJalan(id){
|
|
|
|
|
if(confirm("Hapus jalan?")){
|
|
|
|
|
fetch("hapus_jalan.php",{method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded"},body:`id=${id}`})
|
|
|
|
|
.then(()=>location.reload());
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function hapusKavling(id){
|
|
|
|
|
if(confirm("Hapus kavling?")){
|
|
|
|
|
fetch("hapus_kavling.php",{method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded"},body:`id=${id}`})
|
|
|
|
|
.then(()=>location.reload());
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ================= LAYER CONTROL =================
|
|
|
|
|
const overlayMaps = {
|
|
|
|
|
'<img src="https://maps.google.com/mapfiles/ms/icons/green-dot.png" width="18"> SPBU Buka 24 Jam': spbuBuka,
|
|
|
|
|
'<img src="https://maps.google.com/mapfiles/ms/icons/red-dot.png" width="18"> SPBU Tidak Buka': spbuTutup
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
L.control.layers(null, overlayMaps).addTo(map);
|
|
|
|
|
|
|
|
|
|
spbuBuka.addTo(map);
|
|
|
|
|
spbuTutup.addTo(map);
|
|
|
|
|
|
|
|
|
|
// ================= LEGENDA =================
|
|
|
|
|
const legend = L.control({position: "bottomright"});
|
|
|
|
|
|
|
|
|
|
legend.onAdd = function (map) {
|
|
|
|
|
const div = L.DomUtil.create("div", "legend");
|
|
|
|
|
|
|
|
|
|
div.innerHTML = `
|
|
|
|
|
<b>Legenda</b><br><br>
|
|
|
|
|
|
|
|
|
|
<b>Kecamatan Pontianak</b><br>
|
|
|
|
|
<i style="background:pink"></i> Pontianak Timur<br>
|
|
|
|
|
<i style="background:skyblue"></i> Pontianak Barat<br>
|
|
|
|
|
<i style="background:gold"></i> Pontianak Kota<br>
|
|
|
|
|
<i style="background:violet"></i> Pontianak Selatan<br>
|
|
|
|
|
<i style="background:sienna"></i> Pontianak Tenggara<br>
|
|
|
|
|
<i style="background:slategray"></i> Pontianak Utara<br><br>
|
|
|
|
|
|
|
|
|
|
<b>SPBU</b><br>
|
|
|
|
|
<img src="https://maps.google.com/mapfiles/ms/icons/green-dot.png" width="18"> Buka 24 Jam<br>
|
|
|
|
|
<img src="https://maps.google.com/mapfiles/ms/icons/red-dot.png" width="18"> Tidak Buka 24<br>
|
|
|
|
|
|
|
|
|
|
<b>Jalan</b><br>
|
|
|
|
|
<i style="background:red"></i> Nasional<br>
|
|
|
|
|
<i style="background:green"></i> Provinsi<br>
|
|
|
|
|
<i style="background:orange"></i> Kabupaten<br><br>
|
|
|
|
|
|
|
|
|
|
<b>Kavling</b><br>
|
|
|
|
|
<i style="background:green"></i> SHM<br>
|
|
|
|
|
<i style="background:blue"></i> HGB<br>
|
|
|
|
|
<i style="background:orange"></i> HGU<br>
|
|
|
|
|
<i style="background:red"></i> HP
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
return div;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
legend.addTo(map);
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
Freya_Martines