Skip to content

O
OKU-GIS
Commit 0809dfd0 authored by Muhamad's avatar Muhamad
Browse files
Options

panel-samping

parent 549a6594
Hide whitespace changes
Inline Side-by-side
Showing with 1909 additions and 1085 deletions
Application/views.py
View file @ 0809dfd0
......@@ -15,7 +15,7 @@ class Dashboard(generic.TemplateView):
all = all_.fetchall()
with conn.cursor() as kel:
kel.execute("SELECT json_build_object('type', 'Feature', 'administrasi', (kode_desa, desa, kecamatan, kab_kota, provinsi, jumlah_pen, jumlah_kk, luas_desa),'penduduk', (pria, wanita, belum_kawin, kawin, cerai_hidup, cerai_mati, wajib_ktp, islam, kristen, khatolik, hindu, budha, konghucu, kepercayaan_lain, u0, u5, u10, u15, u20, u25, u30, u35, u40, u45, u50, u55, u60, u65, u70, u75),'pekerjaan_pendidikan', (tidak_sekolah, belum_tamat, tamat_sd, sltp, slta, diploma_i, diploma_ii, diploma_iv, strata_ii, strata_iii, tidak_bekerja, aparatur_pemerintah, tenaga_pendidik, wiraswasta, pertanian, tenaga_kesehatan, pensiunan, pegawai, tentara, kepolisian, pedagang, petani, peternak, nelayan, karyawan, buruh, pembantu, tukang, pendeta, pastor, ustadz, dosen, guru, pilot, pengacara, notaris, arsitek, akuntan, konsultan, dokter, bidan, perawat, psikiater, sopir, lainnya),'geometry', ST_AsGeoJSON(geom :: geometry) :: json) from geo_data_kelurahan")
kel.execute("SELECT json_build_object('type', 'Feature', 'administrasi', (kode_desa, desa, kecamatan, kab_kota, provinsi, jumlah_pen, jumlah_kk, luas_desa),'penduduk', (pria, wanita, belum_kawin, kawin, cerai_hidup, cerai_mati, wajib_ktp, islam, kristen, khatolik, hindu, budha, konghucu, kepercayaan_lain, u0, u5, u10, u15, u20, u25, u30, u35, u40, u45, u50, u55, u60, u65, u70, u75),'pekerjaan_pendidikan', (tidak_sekolah, belum_tamat, tamat_sd, sltp, slta, diploma_i, diploma_ii, diploma_iv, strata_ii, strata_iii, tidak_bekerja, aparatur_pemerintah, tenaga_pendidik, wiraswasta, pertanian, tenaga_kesehatan, pensiunan, pegawai, tentara, kepolisian, pedagang, petani, peternak, nelayan, karyawan, buruh, pembantu, tukang, pendeta, pastor, ustadz, dosen, guru, pilot, pengacara, notaris, arsitek, akuntan, konsultan, dokter, bidan, perawat, psikiater, sopir, lainnya), 'poi',(jml_puskesma, jml_sekolah, jml_sarib),'geometry', ST_AsGeoJSON(geom :: geometry) :: json) from geo_data_kelurahan")
kel_res_ = kel.fetchall()
with conn.cursor() as kec:
......@@ -152,16 +152,13 @@ class Dashboard(generic.TemplateView):
return render (request, self.template_name, context)
class SearchLocation(generic.TemplateView):
template_name = "maps/maps.html"
template_name = "layout/coba.html"
# @method_decorator(login_required(login_url='maps:login'))
def get(self, request):
return redirect("apps:dashboard")
def post(self, request):
return render (request, self.template_name, {"title":"NA - CheckByPolygon"})#,"polbang":polbang,"poltrees":poltrees,'jumlah_bangunan' : len(polbang)+len(poltrees), 'batas_co':batas_desa, 'search_by': 'address', 'address':f'{self.search_desa},{self.search_kab}', 'poly_desa':poly_desa, 'lat':lat, 'lng':lng, 'zoom':zoom, 'line_jalan':line_jalan})
return render (request, self.template_name, {"title":"NA - CheckByPolygon"})#,"polbang":polbang,"poltrees":poltrees,'jumlah_bangunan' : len(polbang)+len(poltrees), 'batas_co':batas_desa, 'search_by': 'address', 'address':f'{self.search_desa},{self.search_kab}', 'poly_desa':poly_desa, 'lat':lat, 'lng':lng, 'zoom':zoom, 'line_jalan':line_jalan})
class SearchRadius(generic.TemplateView):
template_name = "maps/maps.html"
......
static/css/plugin.css
View file @ 0809dfd0
......@@ -46,8 +46,7 @@
.fixed-plugin .dropdown-menu {
right: 80px;
left: auto;
width: 290px;
width: 685px;
border-radius: 0.1875rem;
padding: 0 10px;
}
......@@ -1059,9 +1058,8 @@
}
.fixed-plugin .dropdown .dropdown-menu {
top: -40px !important;
top: -40px;
opacity: 0;
left: -303px !important;
transform-origin: 100% 0;
}
......
static/demo/demo.css
View file @ 0809dfd0
.tim-typo {
padding-left: 25%;
margin-bottom: 40px;
position: relative;
width: 100%;
padding-left: 25%;
margin-bottom: 40px;
position: relative;
width: 100%;
}
.tim-typo .tim-note {
bottom: 5px;
color: #c0c1c2;
display: block;
font-weight: 400;
font-size: 13px;
line-height: 15px;
left: 0;
margin-left: 20px;
position: absolute;
width: 260px;
bottom: 5px;
color: #c0c1c2;
display: block;
font-weight: 400;
font-size: 13px;
line-height: 15px;
left: 0;
margin-left: 20px;
position: absolute;
width: 260px;
}
/* offline-doc */
.offline-doc .navbar.navbar-transparent {
padding-top: 25px;
border-bottom: none;
padding-top: 25px;
border-bottom: none;
}
.offline-doc .navbar.navbar-transparent .navbar-minimize {
display: none;
display: none;
}
.offline-doc .navbar.navbar-transparent .navbar-brand,
.offline-doc .navbar.navbar-transparent .collapse .navbar-nav .nav-link {
color: #FFFFFF !important;
color: #FFFFFF !important;
}
.offline-doc .footer {
z-index: 3 !important;
z-index: 3 !important;
}
.offline-doc .page-header .container {
z-index: 3;
z-index: 3;
}
.offline-doc .page-header:after {
background-color: rgba(0, 0, 0, 0.5);
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
background-color: rgba(0, 0, 0, 0.5);
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}
#map {
z-index: 2;
height: calc(100vh - 70px);
margin-top: 70px;
z-index: 2;
height: calc(100vh - 70px);
}
\ No newline at end of file
static/js/maps.js
View file @ 0809dfd0
......@@ -67,6 +67,12 @@ request.send(null)
var batas = JSON.parse(request.responseText);
console.log(batas);
// map.on('click', function(e) {
// });
var geo_batas = L.geoJson(batas, {
style: function(feature) {
return {
......@@ -79,6 +85,9 @@ var geo_batas = L.geoJson(batas, {
},
onEachFeature: function(feature, layer) {
layer.on({
click: function(e) {
},
mouseover: function(e) {
var layer = e.target;
layer.setStyle({
......@@ -264,273 +273,273 @@ $("#id_kab").change(function() {
var geocodeService = L.esri.Geocoding.geocodeService();
var geocoderNominatim = new L.Control.Geocoder.Nominatim();
var geo_build_gen = L.geoJson(null, {
style: function(feature) {
if (feature.properties.f4 == 'osm') {
return {
color: "#00ff00",
weight: 1,
opacity: 2,
zIndex: 1000
};
}
if (feature.properties.f4 == 'gen') {
return {
color: "#ff0008",
weight: 1,
opacity: 2,
zIndex: 1000
};
}
if (feature.properties.f4 == 'new') {
return {
color: "#0400ed",
weight: 1,
opacity: 2,
zIndex: 1000
};
}
},
onEachFeature: function(feature, layer) {
if (feature.properties) {
var lattitud, longitud;
if (feature.geometry.type == 'MultiPolygon') {
lattitud = feature.geometry.coordinates[0][0][0][1];
longitud = feature.geometry.coordinates[0][0][0][0];
} else {
lattitud = feature.geometry.coordinates[0][0][1];
longitud = feature.geometry.coordinates[0][0][0];
};
layer.on({
click: function(e) {
$('#id_poly').val(feature.properties.f1);
$('#id_poly_delete').val(feature.properties.f1);
}
});
$("#list-polygon tbody").append(`
<tr class="feature-row" id="` + L.stamp(layer) + `" lat="` + lattitud + `" lng="` + longitud + `">
<td class="feature-name">
` + feature.properties.f2 + `
</td>
</tr>`);
pool.push({
name: feature.properties.f2,
id: L.stamp(layer),
lat: lattitud,
lng: longitud
});
}
layer.on({
mouseover: function(e) {
var layer = e.target;
layer.setStyle({
weight: 1,
Color: "#067800",
fillColor: "#067800",
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
},
mouseout: function(e) {
geo_build_gen.resetStyle(e.target);
}
});
var content = `
<div class="tabbable">
<ul class="nav nav-tabs nav-tabs-bottom nav-justified">
<li class="active text-primary" id="feature-title"><a href="#left-tab1-feas-upl" data-toggle="tab" id="info">Information</a></li>
<li><a href="#right-tab2-feas-upl" data-toggle="tab" id="edit">Edit Buildings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="left-tab1-feas-upl" style="padding-bottom: 17px;">
<div style="width: 350px; margin-left:10px;">
<table>
<tr>
<th>Id</th>
<td>:&nbsp` + feature.properties.f1 + `</td>
</tr>
<tr>
<th>Name</th>
<td>:&nbsp` + feature.properties.f2 + `</td>
</tr>
<tr>
<th>Information</th>
<td>:&nbsp` + feature.properties.f3 + `</td>
</tr>
<tr>
<th>Kelurahan</th>
<td>:&nbsp` + feature.administrasi.f1 + `</td>
</tr>
<tr>
<th>Kecamatan</th>
<td>:&nbsp` + feature.administrasi.f2 + `</td>
</tr>
<tr>
<th>Kab/Kota</th>
<td>:&nbsp` + feature.administrasi.f3 + `</td>
</tr>
<tr>
<th>Provinsi</th>
<td>:&nbsp` + feature.administrasi.f4 + `</td>
</tr>
</table>
</div><br>
<input id='delet-pol' class="btn btn-warning" type="submit" value="DELETE">
</div>
<div class="tab-pane" id="right-tab2-feas-upl" style="padding-bottom: 17px;">
<div id="map-edit" style="width:500px;height: 250px;">
</div><br>
<input id='buttonsaveedit' class="btn btn-primary" type="submit" value="Save">
</div>
<input type="text" name="coordinateZoneedit" class="hidden" id="coordinateZoneedit" value="">
<input class="hidden" type="text" name='id-poly' id="id-poly" value="` + feature.properties.f1 + `">
<input class="hidden" type="text" name='sumber' id="sumber" value="gen">
</div>
</div>`;
layer.bindPopup(content);
}
}).addTo(map);
var geo_build_osm = L.geoJson(null, {
style: function(feature) {
if (feature.properties.f4 == 'osm') {
return {
color: "#00ff00",
weight: 1,
opacity: 2,
zIndex: 1000
};
}
if (feature.properties.f4 == 'gen') {
return {
color: "#ff0008",
weight: 1,
opacity: 2,
zIndex: 1000
};
}
},
onEachFeature: function(feature, layer) {
if (feature.properties) {
var lattitud, longitud;
if (feature.geometry.type == 'MultiPolygon') {
lattitud = feature.geometry.coordinates[0][0][0][1];
longitud = feature.geometry.coordinates[0][0][0][0];
} else {
lattitud = feature.geometry.coordinates[0][0][1];
longitud = feature.geometry.coordinates[0][0][0];
};
layer.on({
click: function(e) {
$('#id_poly').val(feature.properties.f1);
$('#id_poly_delete').val(feature.properties.f1);
}
});
pool.push({
name: feature.properties.f2,
id: L.stamp(layer),
lat: lattitud,
lng: longitud
});
}
layer.on({
mouseover: function(e) {
var layer = e.target;
layer.setStyle({
weight: 1,
Color: "#067800",
fillColor: "#067800",
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
},
mouseout: function(e) {
geo_build_osm.resetStyle(e.target);
}
});
var content = `<div class="tabbable">
<ul class="nav nav-tabs nav-tabs-bottom nav-justified">
<li class="active text-primary" id="feature-title"><a href="#left-tab1-feas-upl" data-toggle="tab" id="info">Information</a></li>
<li><a href="#right-tab2-feas-upl" data-toggle="tab" id="edit">Edit Buildings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="left-tab1-feas-upl" style="padding-bottom: 17px;">
<div style="width: 350px; margin-left:10px;">
<table>
<tr>
<th>Id</th>
<td>:&nbsp` + feature.properties.f1 + `</td>
</tr>
<tr>
<th>Name</th>
<td>:&nbsp` + feature.properties.f2 + `</td>
</tr>
<tr>
<th>Information</th>
<td>:&nbsp` + feature.properties.f3 + `</td>
</tr>
<tr>
<th>Kelurahan</th>
<td>:&nbsp` + feature.administrasi.f1 + `</td>
</tr>
<tr>
<th>Kecamatan</th>
<td>:&nbsp` + feature.administrasi.f2 + `</td>
</tr>
<tr>
<th>Kab/Kota</th>
<td>:&nbsp` + feature.administrasi.f3 + `</td>
</tr>
<tr>
<th>Provinsi</th>
<td>:&nbsp` + feature.administrasi.f4 + `</td>
</tr>
</table>
</div><br>
<input id='delet-pol' class="btn btn-warning" type="submit" value="DELETE">
</div>
<div class="tab-pane" id="right-tab2-feas-upl" style="padding-bottom: 17px;">
<div id="map-edit" style="width:500px;height: 250px;">
</div><br>
<input id='buttonsaveedit' class="btn btn-primary" type="submit" value="Save">
</div>
<input type="text" name="coordinateZoneedit" class="hidden" id="coordinateZoneedit" value="">
<input class="hidden" type="text" name='id-poly' id="id-poly" value="` + feature.properties.f1 + `">
<input class="hidden" type="text" name='sumber' id="sumber" value="osm">
</div>
</div>`;
layer.bindPopup(content);
}
}).addTo(map);
// var geo_build_gen = L.geoJson(null, {
// style: function(feature) {
// if (feature.properties.f4 == 'osm') {
// return {
// color: "#00ff00",
// weight: 1,
// opacity: 2,
// zIndex: 1000
// };
// }
// if (feature.properties.f4 == 'gen') {
// return {
// color: "#ff0008",
// weight: 1,
// opacity: 2,
// zIndex: 1000
// };
// }
// if (feature.properties.f4 == 'new') {
// return {
// color: "#0400ed",
// weight: 1,
// opacity: 2,
// zIndex: 1000
// };
// }
// },
// onEachFeature: function(feature, layer) {
// if (feature.properties) {
// var lattitud, longitud;
// if (feature.geometry.type == 'MultiPolygon') {
// lattitud = feature.geometry.coordinates[0][0][0][1];
// longitud = feature.geometry.coordinates[0][0][0][0];
// } else {
// lattitud = feature.geometry.coordinates[0][0][1];
// longitud = feature.geometry.coordinates[0][0][0];
// };
// layer.on({
// click: function(e) {
// $('#id_poly').val(feature.properties.f1);
// $('#id_poly_delete').val(feature.properties.f1);
// }
// });
// $("#list-polygon tbody").append(`
// <tr class="feature-row" id="` + L.stamp(layer) + `" lat="` + lattitud + `" lng="` + longitud + `">
// <td class="feature-name">
// ` + feature.properties.f2 + `
// </td>
// </tr>`);
// pool.push({
// name: feature.properties.f2,
// id: L.stamp(layer),
// lat: lattitud,
// lng: longitud
// });
// }
// layer.on({
// mouseover: function(e) {
// var layer = e.target;
// layer.setStyle({
// weight: 1,
// Color: "#067800",
// fillColor: "#067800",
// });
// if (!L.Browser.ie && !L.Browser.opera) {
// layer.bringToFront();
// }
// },
// mouseout: function(e) {
// geo_build_gen.resetStyle(e.target);
// }
// });
// var content = `
// <div class="tabbable">
// <ul class="nav nav-tabs nav-tabs-bottom nav-justified">
// <li class="active text-primary" id="feature-title"><a href="#left-tab1-feas-upl" data-toggle="tab" id="info">Information</a></li>
// <li><a href="#right-tab2-feas-upl" data-toggle="tab" id="edit">Edit Buildings</a></li>
// </ul>
// <div class="tab-content">
// <div class="tab-pane active" id="left-tab1-feas-upl" style="padding-bottom: 17px;">
// <div style="width: 350px; margin-left:10px;">
// <table>
// <tr>
// <th>Id</th>
// <td>:&nbsp` + feature.properties.f1 + `</td>
// </tr>
// <tr>
// <th>Name</th>
// <td>:&nbsp` + feature.properties.f2 + `</td>
// </tr>
// <tr>
// <th>Information</th>
// <td>:&nbsp` + feature.properties.f3 + `</td>
// </tr>
// <tr>
// <th>Kelurahan</th>
// <td>:&nbsp` + feature.administrasi.f1 + `</td>
// </tr>
// <tr>
// <th>Kecamatan</th>
// <td>:&nbsp` + feature.administrasi.f2 + `</td>
// </tr>
// <tr>
// <th>Kab/Kota</th>
// <td>:&nbsp` + feature.administrasi.f3 + `</td>
// </tr>
// <tr>
// <th>Provinsi</th>
// <td>:&nbsp` + feature.administrasi.f4 + `</td>
// </tr>
// </table>
// </div><br>
// <input id='delet-pol' class="btn btn-warning" type="submit" value="DELETE">
// </div>
// <div class="tab-pane" id="right-tab2-feas-upl" style="padding-bottom: 17px;">
// <div id="map-edit" style="width:500px;height: 250px;">
// </div><br>
// <input id='buttonsaveedit' class="btn btn-primary" type="submit" value="Save">
// </div>
// <input type="text" name="coordinateZoneedit" class="hidden" id="coordinateZoneedit" value="">
// <input class="hidden" type="text" name='id-poly' id="id-poly" value="` + feature.properties.f1 + `">
// <input class="hidden" type="text" name='sumber' id="sumber" value="gen">
// </div>
// </div>`;
// layer.bindPopup(content);
// }
// }).addTo(map);
// var geo_build_osm = L.geoJson(null, {
// style: function(feature) {
// if (feature.properties.f4 == 'osm') {
// return {
// color: "#00ff00",
// weight: 1,
// opacity: 2,
// zIndex: 1000
// };
// }
// if (feature.properties.f4 == 'gen') {
// return {
// color: "#ff0008",
// weight: 1,
// opacity: 2,
// zIndex: 1000
// };
// }
// },
// onEachFeature: function(feature, layer) {
// if (feature.properties) {
// var lattitud, longitud;
// if (feature.geometry.type == 'MultiPolygon') {
// lattitud = feature.geometry.coordinates[0][0][0][1];
// longitud = feature.geometry.coordinates[0][0][0][0];
// } else {
// lattitud = feature.geometry.coordinates[0][0][1];
// longitud = feature.geometry.coordinates[0][0][0];
// };
// layer.on({
// click: function(e) {
// $('#id_poly').val(feature.properties.f1);
// $('#id_poly_delete').val(feature.properties.f1);
// }
// });
// pool.push({
// name: feature.properties.f2,
// id: L.stamp(layer),
// lat: lattitud,
// lng: longitud
// });
// }
// layer.on({
// mouseover: function(e) {
// var layer = e.target;
// layer.setStyle({
// weight: 1,
// Color: "#067800",
// fillColor: "#067800",
// });
// if (!L.Browser.ie && !L.Browser.opera) {
// layer.bringToFront();
// }
// },
// mouseout: function(e) {
// geo_build_osm.resetStyle(e.target);
// }
// });
// var content = `<div class="tabbable">
// <ul class="nav nav-tabs nav-tabs-bottom nav-justified">
// <li class="active text-primary" id="feature-title"><a href="#left-tab1-feas-upl" data-toggle="tab" id="info">Information</a></li>
// <li><a href="#right-tab2-feas-upl" data-toggle="tab" id="edit">Edit Buildings</a></li>
// </ul>
// <div class="tab-content">
// <div class="tab-pane active" id="left-tab1-feas-upl" style="padding-bottom: 17px;">
// <div style="width: 350px; margin-left:10px;">
// <table>
// <tr>
// <th>Id</th>
// <td>:&nbsp` + feature.properties.f1 + `</td>
// </tr>
// <tr>
// <th>Name</th>
// <td>:&nbsp` + feature.properties.f2 + `</td>
// </tr>
// <tr>
// <th>Information</th>
// <td>:&nbsp` + feature.properties.f3 + `</td>
// </tr>
// <tr>
// <th>Kelurahan</th>
// <td>:&nbsp` + feature.administrasi.f1 + `</td>
// </tr>
// <tr>
// <th>Kecamatan</th>
// <td>:&nbsp` + feature.administrasi.f2 + `</td>
// </tr>
// <tr>
// <th>Kab/Kota</th>
// <td>:&nbsp` + feature.administrasi.f3 + `</td>
// </tr>
// <tr>
// <th>Provinsi</th>
// <td>:&nbsp` + feature.administrasi.f4 + `</td>
// </tr>
// </table>
// </div><br>
// <input id='delet-pol' class="btn btn-warning" type="submit" value="DELETE">
// </div>
// <div class="tab-pane" id="right-tab2-feas-upl" style="padding-bottom: 17px;">
// <div id="map-edit" style="width:500px;height: 250px;">
// </div><br>
// <input id='buttonsaveedit' class="btn btn-primary" type="submit" value="Save">
// </div>
// <input type="text" name="coordinateZoneedit" class="hidden" id="coordinateZoneedit" value="">
// <input class="hidden" type="text" name='id-poly' id="id-poly" value="` + feature.properties.f1 + `">
// <input class="hidden" type="text" name='sumber' id="sumber" value="osm">
// </div>
// </div>`;
// layer.bindPopup(content);
// }
// }).addTo(map);
// $("#edit").click(function() {
// alert("cel")
......@@ -576,138 +585,138 @@ jQuery(document).ajaxSend(function(event, xhr, settings) {
}
});
map.on('contextmenu', function(e) {
$("#map-create").remove();
// document.getElementsByClassName('leaflet-popup-content').style.width = "550px";
var popup = L.popup()
.setLatLng(e.latlng)
.setContent(`
<div id="map-create" style="height: 250px;">
<input type="button" id="create" value="Create" style="z-index: 1000;position:relative;">
</div>
<br>
<label class="control-label col-lg-2 label-12">Name</label>
<input type="text" class="form-control" name="name_create" id="name_create" value=""><br>
<label class="control-label col-lg-2 label-12">Information</label>
<input type="text" class="form-control" name="info_create" id="info_create" value=""><br>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-7">
</div>
<div class="col-md-3">
<input type="button" class="btn btn-primary" id="create_save" value="SAVE" style="margin-right:30px;">
</div>
</div>
<input type="text" name="poly_create" class="hidden" id="poly_create" value="">
`)
.openOn(map);
map.openPopup(popup);
var map_create = L.map('map-create', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([e.latlng.lat, e.latlng.lng], 20.5);
map_created = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 22,
minZoom: 4,
}).addTo(map_create);
map_create.invalidateSize();
$('#create').click(function() {
polygonDraweredit.enable();
});
var Marker = {};
var Poly = {};
map_create.on(L.Draw.Event.CREATED, function(e) {
var layer = e.layer;
$("#poly_create").empty();
var type = e.layerType;
var layer = e.layer;
var shape = layer.toGeoJSON();
let geoShape = shape.geometry.coordinates[0];
let kordinat = "";
for (j in geoShape) {
kordinat += geoShape[j][0] + ' ' + geoShape[j][1];
if (j <= (geoShape.length - 2)) {
kordinat += ', ';
}
}
window.thisBaseDrawPolygonLayer = layer;
$("#poly_create").val(JSON.stringify(kordinat));
});
polygon_options = {
showArea: false,
shapeOptions: {
stroke: true,
color: '#6e83f0',
weight: 1.5,
opacity: 2,
fill: true,
fillColor: null, //same as color by default
fillOpacity: 0.3,
clickable: true
}
}
var polygonDraweredit = new L.Draw.Polygon(map_create, polygon_options);
polygonDraweredit.on("click", function(event) {
shapecoords.innerHTML = event.latlng.toString();
map_create.fire("click", event); // Trigger a map click as well.
});
map_create.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
var lay = layer.addTo(map_create);
Poly = lay;
});
});
// map.on('contextmenu', function(e) {
// $("#map-create").remove();
// // document.getElementsByClassName('leaflet-popup-content').style.width = "550px";
// var popup = L.popup()
// .setLatLng(e.latlng)
// .setContent(`
// <div id="map-create" style="height: 250px;">
// <input type="button" id="create" value="Create" style="z-index: 1000;position:relative;">
// </div>
// <br>
// <label class="control-label col-lg-2 label-12">Name</label>
// <input type="text" class="form-control" name="name_create" id="name_create" value=""><br>
// <label class="control-label col-lg-2 label-12">Information</label>
// <input type="text" class="form-control" name="info_create" id="info_create" value=""><br>
// <div class="row">
// <div class="col-md-2">
// </div>
// <div class="col-md-7">
// </div>
// <div class="col-md-3">
// <input type="button" class="btn btn-primary" id="create_save" value="SAVE" style="margin-right:30px;">
// </div>
// </div>
// <input type="text" name="poly_create" class="hidden" id="poly_create" value="">
// `)
// .openOn(map);
// map.openPopup(popup);
// var map_create = L.map('map-create', {
// editable: true,
// zoomControl: false,
// drawControl: true
// }).setView([e.latlng.lat, e.latlng.lng], 20.5);
// map_created = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
// maxZoom: 22,
// minZoom: 4,
// }).addTo(map_create);
// map_create.invalidateSize();
// $('#create').click(function() {
// polygonDraweredit.enable();
// });
// var Marker = {};
// var Poly = {};
// map_create.on(L.Draw.Event.CREATED, function(e) {
// var layer = e.layer;
// $("#poly_create").empty();
// var type = e.layerType;
// var layer = e.layer;
// var shape = layer.toGeoJSON();
// let geoShape = shape.geometry.coordinates[0];
// let kordinat = "";
// for (j in geoShape) {
// kordinat += geoShape[j][0] + ' ' + geoShape[j][1];
// if (j <= (geoShape.length - 2)) {
// kordinat += ', ';
// }
// }
// window.thisBaseDrawPolygonLayer = layer;
// $("#poly_create").val(JSON.stringify(kordinat));
// });
// polygon_options = {
// showArea: false,
// shapeOptions: {
// stroke: true,
// color: '#6e83f0',
// weight: 1.5,
// opacity: 2,
// fill: true,
// fillColor: null, //same as color by default
// fillOpacity: 0.3,
// clickable: true
// }
// }
// var polygonDraweredit = new L.Draw.Polygon(map_create, polygon_options);
// polygonDraweredit.on("click", function(event) {
// shapecoords.innerHTML = event.latlng.toString();
// map_create.fire("click", event); // Trigger a map click as well.
// });
// map_create.on('draw:created', function(e) {
// var type = e.layerType,
// layer = e.layer;
// var lay = layer.addTo(map_create);
// Poly = lay;
// });
// });
$(document).on("click", "#create_save", function(e) {
var polygin = $('#poly_create').val();
var name_poly = $('#name_create').val();
var info_poly = $('#info_create').val();
loaderPage(true);
$.ajax({
url: "api/v1/create/",
data: {
'polygon': polygin,
'name': name_poly,
'info': info_poly
},
dataType: 'json',
success: function(data) {
map.closePopup();
loaderPage(false);
}
});
});
// $(document).on("click", "#create_save", function(e) {
// var polygin = $('#poly_create').val();
// var name_poly = $('#name_create').val();
// var info_poly = $('#info_create').val();
// loaderPage(true);
// $.ajax({
// url: "api/v1/create/",
// data: {
// 'polygon': polygin,
// 'name': name_poly,
// 'info': info_poly
// },
// dataType: 'json',
// success: function(data) {
// map.closePopup();
// loaderPage(false);
// }
// });
// });
$(document).on("click", "#info", function() {
document.getElementsByClassName('leaflet-popup-content')[0].style.width = "301px";
......
static/js/scripts.js
View file @ 0809dfd0
......@@ -76,7 +76,19 @@ $("#button_hide").click(function() {
$("#button_unhide").click(function() {
$("#thisFooter").css('display', 'block');
$("#button_unhide").css('display', 'none');
})
$("#button_hide_panel").click(function() {
$("#panel-samping").css('display', 'none');
$("#button_unhide_panel").css('display', 'block');
$("#button_hide_panel").css('display', 'none');
})
$("#button_unhide_panel").click(function() {
$("#panel-samping").css('display', 'block');
$("#button_unhide").css('display', 'none');
$("#button_hide_panel").css('display', 'block');
})
......@@ -121,11 +133,11 @@ attributionControl.onAdd = function(map) {
map.addControl(attributionControl);
var zoomControl = L.control.zoom({
position: "topleft"
position: "bottomright"
}).addTo(map);
var locateControl = L.control.locate({
position: "topleft",
position: "bottomright",
drawCircle: false,
follow: true,
setView: true,
......
templates/includes/css-o.html
View file @ 0809dfd0
......@@ -2,9 +2,10 @@
.footer {
background: #ffffffa6;
position: fixed;
left: 0;
right: 0;
left: 0px;
right: 0px;
bottom: 0;
width: 1000px;
height: 170px;
z-index: 999;
}
......@@ -94,11 +95,30 @@
width: 40px;
font-size: 10pt;
font-family: tahoma;
margin-bottom: 5px;
margin-right: 23px;
right: 60px;
position: absolute;
bottom: 0;
right: 0;
z-index: 99999999;
}
.dataTables_length {
margin: 0 0 0px 0px;
}
.dataTables_filter {
position: relative;
display: block;
float: left;
margin: 0 0 0px 0px;
}
.panel-body+.dataTables_wrapper,
.panel-body+*>.dataTables_wrapper {
border-top: 0px;
}
.datatable-header,
.datatable-footer {
padding: 0px 0px 0px 10px;
}
</style>
\ No newline at end of file
templates/includes/js-o.html
View file @ 0809dfd0
......@@ -32,360 +32,417 @@
onEachFeature: function(feature, layer) {
layer.on({
click: function(e) {
content = `<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">INFORMASI</h4>
</div>
<div class="modal-body" style:"padding:5px">
<div class="tabbable">
<ul class="nav nav-tabs nav-tabs-bottom nav-justified">
<li class="active text-primary" id="feature-title"><a href="#left-tab1-feas-upl" data-toggle="tab" id="info">Informasi Administrasi</a></li>
<li><a href="#right-tab2-feas-upl" data-toggle="tab" id="edit">Informasi Kependudukan</a></li>
<li><a href="#right-tab3-feas-upl" data-toggle="tab" id="edit">Inf. Pendidikan & Pekerjaan</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="left-tab1-feas-upl" style="padding-bottom: 17px;">
<div style="margin-left:10px;">
<table>
<tr>
<th>Kode Desa</th>
<td>:&nbsp` + feature.administrasi.f1 + `</td>
</tr>
<tr>
<th>Desa/Kelurahan</th>
<td>:&nbsp` + feature.administrasi.f2 + `</td>
</tr>
<tr>
<th>Kecamatan</th>
<td>:&nbsp` + feature.administrasi.f3 + `</td>
</tr>
<tr>
<th>Kabupaten/Kota</th>
<td>:&nbsp` + feature.administrasi.f4 + `</td>
</tr>
<tr>
<th>Provinsi</th>
<td>:&nbsp` + feature.administrasi.f5 + `</td>
</tr>
<tr>
<th>Luas Wilayah</th>
<td>:&nbsp` + feature.administrasi.f10 + `</td>
</tr>
<tr>
<th>Jumlah Penduduk</th>
<td>:&nbsp` + feature.administrasi.f6 + `</td>
</tr>
<tr>
<th>Jumlah KK</th>
<td>:&nbsp` + feature.administrasi.f7 + `</td>
</tr>
</table>
</div>
</div>
<div class="tab-pane" id="right-tab2-feas-upl" style="padding-bottom: 17px;">
<div style="margin-left:10px;">
<div class = "row">
<div class = "col-md-6">
<table>
<tr>
<th>Jumlah Laki-laki</th>
<td>:&nbsp` + feature.penduduk.f1 + `</td>
</tr>
<tr>
<th>Jumlah Perempuan</th>
<td>:&nbsp` + feature.penduduk.f2 + `</td>
</tr>
<tr>
<th>Belum Kawin</th>
<td>:&nbsp` + feature.penduduk.f3 + `</td>
</tr>
<tr>
<th>Kawin</th>
<td>:&nbsp` + feature.penduduk.f4 + `</td>
</tr>
<tr>
<th>cerai hidup</th>
<td>:&nbsp` + feature.penduduk.f5 + `</td>
</tr>
<tr>
<th>cerai mati</th>
<td>:&nbsp` + feature.penduduk.f6 + `</td>
</tr>
<tr>
<th>wajib KTP</th>
<td>:&nbsp` + feature.penduduk.f7 + `</td>
</tr>
</table>
</div>
<div class = "col-md-6">
<table>
<tr>
<th>Islam</th>
<td>:&nbsp` + feature.penduduk.f8 + `</td>
</tr>
<tr>
<th>Kristen</th>
<td>:&nbsp` + feature.penduduk.f9 + `</td>
</tr>
<tr>
<th>Katolik</th>
<td>:&nbsp` + feature.penduduk.f10 + `</td>
</tr>
<tr>
<th>Hindu</th>
<td>:&nbsp` + feature.penduduk.f11 + `</td>
</tr>
<tr>
<th>Budha</th>
<td>:&nbsp` + feature.penduduk.f12 + `</td>
</tr>
<tr>
<th>Konghucu</th>
<td>:&nbsp` + feature.penduduk.f13 + `</td>
</tr>
<tr>
<th>Kepercayaan Lain</th>
<td>:&nbsp` + feature.penduduk.f14 + `</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="right-tab3-feas-upl" style="padding-bottom: 17px;">
<div style="margin-left:-15px;">
<div class="row" style="margin-top: 5px;">
<div class="col-xs-12">
<div class="col-md-3">
<div class="form-group">
<label class="text-semibold">Pendidikan</label>
<div>
<table>
<tr>
<th>Tidak Sekolah</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f1 + `</td>
</tr>
<tr>
<th>Belum Tamat</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f2 + `</td>
</tr>
<tr>
<th>Tamat SD</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f3 + `</td>
</tr>
<tr>
<th>SLTP</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f4 + `</td>
</tr>
<tr>
<th>SLTA</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f5 + `</td>
</tr>
<tr>
<th>Diploma I</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f6 + `</td>
</tr>
<tr>
<th>Diploma II</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f7 + `</td>
</tr>
<tr>
<th>Diploma IV/Strata I</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f8 + `</td>
</tr>
<tr>
<th>Strata II</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f9 + `</td>
</tr>
<tr>
<th>Strata III</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f10 + `</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-9">
<div class="form-group">
<label class="text-semibold" style="margin-left:10px">Pekerjaan</label>
<div>
<div class="col-md-3" style="width:180px;">
<table>
<tr>
<th>Tidak Bekerja</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f11 + `</td>
</tr>
<tr>
<th>Aparatur Pemerintah</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f12 + `</td>
</tr>
<tr>
<th>Tenaga Pendidik</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f13 + `</td>
</tr>
<tr>
<th>Wiraswasta</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f14 + `</td>
</tr>
<tr>
<th>Pertanian</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f15 + `</td>
</tr>
<tr>
<th>Tenaga Kesehatan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f16 + `</td>
</tr>
<tr>
<th>Pensiunan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f17 + `</td>
</tr>
<tr>
<th>Pegawai</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
</tr>
<tr>
<th>Tentara</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f19 + `</td>
</tr>
<tr>
<th>Kepolisian</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f20 + `</td>
</tr>
<tr>
<th>Pedagang</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f21 + `</td>
</tr>
<tr>
<th>Petani</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f22 + `</td>
</tr>
</table>
</div>
<div class="col-md-3" style="width:120px">
<table>
<tr>
<th>Peternak</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f23 + `</td>
</tr>
<tr>
<th>Nelayan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f24 + `</td>
</tr>
<tr>
<th>Karyawan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f25 + `</td>
</tr>
<tr>
<th>Buruh</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f26 + `</td>
</tr>
<tr>
<th>Pembantu</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f27 + `</td>
</tr>
<tr>
<th>Tukang</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f28 + `</td>
</tr>
<tr>
<th>Pendeta</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f29 + `</td>
</tr>
<tr>
<th>Pastor</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f30 + `</td>
</tr>
<tr>
<th>Ustadz</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f31 + `</td>
</tr>
<tr>
<th>Dosen</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f32 + `</td>
</tr>
<tr>
<th>Guru</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f33 + `</td>
</tr>
</table>
</div>
<div class="col-md-3">
<table>
<tr>
<th>Pilot</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f34 + `</td>
</tr>
<tr>
<th>Pengacara</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f35 + `</td>
</tr>
<tr>
<th>Notaris</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f36 + `</td>
</tr>
<tr>
<th>Arsitek</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f37 + `</td>
</tr>
<tr>
<th>Akuntan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f38 + `</td>
</tr>
<tr>
<th>Konsultan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f39 + `</td>
</tr>
<tr>
<th>Dokter</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f40 + `</td>
</tr>
<tr>
<th>Bidan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f41 + `</td>
</tr>
<tr>
<th>Perawat</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f42 + `</td>
</tr>
<tr>
<th>Psikiater</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f43 + `</td>
</tr>
<tr>
<th>Sopir</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f44 + `</td>
</tr>
<tr>
<th>Lainnya</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f45 + `</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
content = `<thead style="text-align: center;">
<tr>
<th style="padding: 0 0 0 0px;">
<img src="static/img/maps/bing.png" alt="Image" style="width: 100%;max-height: 237px;height:237"> </th>
</tr>
</thead>
<tbody>
<tr style="height: 100px;">
<th>
<div>
<h1 style="font-family: Google Sans,Roboto,Arial,sans-serif;
letter-spacing: 0;
font-weight: 400;">
<span style="font-size: x-large;
font-family: ui-serif;">
` + feature.administrasi.f2 + ` , ` + feature.administrasi.f3 + `, ` + feature.administrasi.f4 + `
</span>
</h1>
</div>
</div>
</div>
</div>
</div>
</div>`;
$("#modal-kelurahan").modal("show");
$("#modal-kelurahan").html(content);
</th>
</tr>
<tr>
<th>
<label class="text-semibold" style="margin-left:10px">Informasi Umum</label>
<div>
<table>
<tr>
<th>Kode Desa</th>
<td>:&nbsp` + feature.administrasi.f1 + `</td>
</tr>
<tr>
<th>Luas Wilayah</th>
<td>:&nbsp` + feature.administrasi.f8 + `</td>
</tr>
<tr>
<th>Jumlah Penduduk</th>
<td>:&nbsp` + feature.administrasi.f6 + `</td>
</tr>
<tr>
<th>Jumlah KK</th>
<td>:&nbsp` + feature.administrasi.f7 + `</td>
</tr>
</table>
</div>
</th>
</tr>
<tr>
<th>
<label class="text-semibold" style="margin-left:10px">Informasi Penduduk
</label>
<div>
<table>
<tr>
<th>Jumlah Laki-laki</th>
<td>:&nbsp` + feature.penduduk.f1 + `</td>
</tr>
<tr>
<th>Jumlah Perempuan</th>
<td>:&nbsp` + feature.penduduk.f2 + `</td>
</tr>
<tr>
<th>Belum Kawin</th>
<td>:&nbsp` + feature.penduduk.f3 + `</td>
</tr>
<tr>
<th>Kawin</th>
<td>:&nbsp` + feature.penduduk.f4 + `</td>
</tr>
<tr>
<th>cerai hidup</th>
<td>:&nbsp` + feature.penduduk.f5 + `</td>
</tr>
<tr>
<th>cerai mati</th>
<td>:&nbsp` + feature.penduduk.f6 + `</td>
</tr>
<tr>
<th>wajib KTP</th>
<td>:&nbsp` + feature.penduduk.f7 + `</td>
</tr>
<tr>
<th>Islam</th>
<td>:&nbsp` + feature.penduduk.f8 + `</td>
</tr>
<tr>
<th>Kristen</th>
<td>:&nbsp` + feature.penduduk.f9 + `</td>
</tr>
<tr>
<th>Katolik</th>
<td>:&nbsp` + feature.penduduk.f10 + `</td>
</tr>
<tr>
<th>Hindu</th>
<td>:&nbsp` + feature.penduduk.f11 + `</td>
</tr>
<tr>
<th>Budha</th>
<td>:&nbsp` + feature.penduduk.f12 + `</td>
</tr>
<tr>
<th>Konghucu</th>
<td>:&nbsp` + feature.penduduk.f13 + `</td>
</tr>
<tr>
<th>Kepercayaan Lain</th>
<td>:&nbsp` + feature.penduduk.f14 + `</td>
</tr>
</table>
</div>
</th>
</tr>
<tr>
<th>
<label class="text-semibold" style="margin-left:10px">Informasi Pendidikan</label>
<div>
<table>
<tr>
<th>Tidak Sekolah</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f1 + `</td>
</tr>
<tr>
<th>Belum Tamat</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f2 + `</td>
</tr>
<tr>
<th>Tamat SD</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f3 + `</td>
</tr>
<tr>
<th>SLTP</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f4 + `</td>
</tr>
<tr>
<th>SLTA</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f5 + `</td>
</tr>
<tr>
<th>Diploma I</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f6 + `</td>
</tr>
<tr>
<th>Diploma II</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f7 + `</td>
</tr>
<tr>
<th>Diploma IV/Strata I</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f8 + `</td>
</tr>
<tr>
<th>Strata II</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f9 + `</td>
</tr>
<tr>
<th>Strata III</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f10 + `</td>
</tr>
</table>
</div>
</th>
</tr>
<tr>
<th>
<label class="text-semibold" style="margin-left:10px">Informasi Pekerjaan</label>
<div>
<table>
<tr>
<th>Tidak Bekerja</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f11 + `</td>
</tr>
<tr>
<th>Aparatur Pemerintah</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f12 + `</td>
</tr>
<tr>
<th>Tenaga Pendidik</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f13 + `</td>
</tr>
<tr>
<th>Wiraswasta</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f14 + `</td>
</tr>
<tr>
<th>Pertanian</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f15 + `</td>
</tr>
<tr>
<th>Tenaga Kesehatan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f16 + `</td>
</tr>
<tr>
<th>Pensiunan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f17 + `</td>
</tr>
<tr>
<th>Pegawai</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f18 + `</td>
</tr>
<tr>
<th>Tentara</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f19 + `</td>
</tr>
<tr>
<th>Kepolisian</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f20 + `</td>
</tr>
<tr>
<th>Pedagang</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f21 + `</td>
</tr>
<tr>
<th>Petani</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f22 + `</td>
</tr>
<tr>
<th>Peternak</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f23 + `</td>
</tr>
<tr>
<th>Nelayan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f24 + `</td>
</tr>
<tr>
<th>Karyawan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f25 + `</td>
</tr>
<tr>
<th>Buruh</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f26 + `</td>
</tr>
<tr>
<th>Pembantu</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f27 + `</td>
</tr>
<tr>
<th>Tukang</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f28 + `</td>
</tr>
<tr>
<th>Pendeta</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f29 + `</td>
</tr>
<tr>
<th>Pastor</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f30 + `</td>
</tr>
<tr>
<th>Ustadz</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f31 + `</td>
</tr>
<tr>
<th>Dosen</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f32 + `</td>
</tr>
<tr>
<th>Guru</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f33 + `</td>
</tr>
<tr>
<th>Pilot</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f34 + `</td>
</tr>
<tr>
<th>Pengacara</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f35 + `</td>
</tr>
<tr>
<th>Notaris</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f36 + `</td>
</tr>
<tr>
<th>Arsitek</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f37 + `</td>
</tr>
<tr>
<th>Akuntan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f38 + `</td>
</tr>
<tr>
<th>Konsultan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f39 + `</td>
</tr>
<tr>
<th>Dokter</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f40 + `</td>
</tr>
<tr>
<th>Bidan</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f41 + `</td>
</tr>
<tr>
<th>Perawat</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f42 + `</td>
</tr>
<tr>
<th>Psikiater</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f43 + `</td>
</tr>
<tr>
<th>Sopir</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f44 + `</td>
</tr>
<tr>
<th>Lainnya</th>
<td>:&nbsp` + feature.pekerjaan_pendidikan.f45 + `</td>
</tr>
</table>
</div>
</th>
</tr>
</tbody>`;
$("#panel-samping").css("display", "block");
$("#button_hide_panel").css("display", "block")
$("#thisFooter").css('left', '380px');
$("#thisFooter").css('width', '930px');
$("#thisFooter").css('display', 'none');
$("#button_unhide").css('display', 'block')
$("#isi_panel").html(content)
},
mouseover: function(e) {
var info_foot = `
<div class="col-xs-12">
<div class="col-md-5" style="min-width: 300px;">
<div class="form-group">
<label class="text-semibold">Informasi</label>
<div>
<table>
<tr>
<th>Kode Desa</th>
<td>:&nbsp` + feature.administrasi.f1 + `</td>
</tr>
<tr>
<th>Desa/Kelurahan</th>
<td>:&nbsp` + feature.administrasi.f2 + `</td>
</tr>
<tr>
<th>Kecamatan</th>
<td>:&nbsp` + feature.administrasi.f3 + `</td>
</tr>
<tr>
<th>Kabupaten/Kota</th>
<td>:&nbsp` + feature.administrasi.f4 + `</td>
</tr>
<tr>
<th>Provinsi</th>
<td>:&nbsp` + feature.administrasi.f5 + `</td>
</tr>
<tr>
<th>Luas Wilayah</th>
<td>:&nbsp` + feature.administrasi.f10 + `</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-4" style="min-width: 150px;">
<div class="form-group" style="top: 25px;">
<table>
<tr>
<th>Jumlah Penduduk</th>
<td>:&nbsp` + feature.administrasi.f6 + `</td>
</tr>
<tr>
<th>Jumlah KK</th>
<td>:&nbsp` + feature.administrasi.f7 + `</td>
</tr>
<tr>
<th>Jumlah Laki-laki</th>
<td>:&nbsp` + feature.penduduk.f1 + `</td>
</tr>
<tr>
<th>Jumlah Perempuan</th>
<td>:&nbsp` + feature.penduduk.f2 + `</td>
</tr>
<tr>
<tr>
<th>Jumlah Puskesmas</th>
<td>:&nbsp` + feature.poi.f1 + `</td>
</tr>
<tr>
<th>Jumlah Sekolah</th>
<td>:&nbsp` + feature.poi.f2 + `</td>
</tr>
<tr>
<th>Jumlah Sarana Ibadah</th>
<td>:&nbsp` + feature.poi.f3 + `</td>
</tr>
<tr>
</table>
</div>
</div>
<div class="col-md-3" style="min-width: 150px;padding-left:50px;bottom:-128px">
<i><b>
Sumber : DUKCAPIL, 2019
</b></i>
</div>
</div>
`;
$('#info-footer').html(info_foot)
var layer = e.target;
layer.setStyle({
weight: 0.5,
......@@ -777,18 +834,18 @@
layer.on({
click: function(e) {
var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) {
var content = `<div class="tabbable">
<ul class="nav nav-tabs nav-tabs-bottom nav-justified">
<li class="active text-primary" id="feature-title"><a href="#right-tab2-feas-upl" data-toggle="tab">Information</a></li>
<li><a href="#right-tab3-feas-upl" data-toggle="tab" id="edit">Edit Buildings</a></li>
</ul>
<div class="tab-content" style="margin-botttom:-40px">
<div class="tab-pane active" id="right-tab2-feas-upl">
<div style="width: 530px; margin-left:10px; padding-bottom:0px">
//var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) {
var content = `<thead style="text-align: center;">
<tr>
<th style="padding: 0 0 0 0px;">
<img src="static/img/maps/bing.png" alt="Image" style="width: 100%;max-height: 237px;height:237"> </th>
</tr>
</thead>
<tbody>
<tr>
<th>
<label class="text-semibold" style="margin-left:10px">Informasi Umum</label>
<div>
<table>
<tr>
<th>Name</th>
......@@ -796,7 +853,7 @@
</tr>
<tr>
<th>Information</th>
<td style="width:500px;padding-left: 20px;"><input type="text" class="search_desa" id="info_b" value="` + feature.properties.f3 + `" aria-controls="DataTables_Table_0"></td>
<td style="padding-left: 20px;"><input type="text" class="search_desa" id="info_b" value="` + feature.properties.f3 + `" aria-controls="DataTables_Table_0"></td>
</tr>
<tr>
<th>Kelurahan</th>
......@@ -815,27 +872,66 @@
<td style="padding-left: 20px;"><input type="text" class="search_desa" id="pro_b" value="` + feature.administrasi.f4 + `" aria-controls="DataTables_Table_0"></td>
</tr>
</table>
</div><br>
<input id='buttondelete' class="btn btn-warning" type="submit" value="Delete" style="bottom:-60px;z-index:9;">
</div>
<div class="tab-pane" id="right-tab3-feas-upl">
<div id="map-edit" style="width:500px;height: 250px;">
</div><br>
<input id='buttonsaveedit' class="btn btn-primary" type="submit" value="Save" style="bottom:-60px;z-index:9;">
<input id='buttondelete' class="btn btn-warning" type="submit" value="Delete" style="bottom:-60px;z-index:9;">
</div>
<input type="text" name="coordinateZoneedit" class="hidden" id="coordinateZoneedit" value="">
<input class="hidden" type="text" name='id-poly' id="id-poly" value="` + feature.properties.f1 + `">
<input class="hidden" type="text" name='sumber' id="sumber" value="osm">
</div>
</div>`;
</div>
</th>
</tr>
<tr>
<th>
<div class="tab-pane" id="right-tab3-feas-upl">
<div id="map-edit" style="width:500px;height: 250px;">
</div>
</th
</tr>
</tbody>
`;
$("#isi_panel").html(content)
$("#feature-info").html(content);
if (error) {
return;
}
});
$('#id_poly').val(feature.properties.f1);
$('#id_poly_edit').val(feature.properties.f1);
......@@ -855,7 +951,7 @@
$('#id_poly_delete').val(feature.properties.f1);
$("#coordinateZoneedit").val(feature.geometry);
$("#featureModal").modal("show");
$("#panel-samping").css("display", "block");
$("#button-ijo").html(`
<a class='btn btn-danger' href="#" id="delete_1">Delete</a>
<a class='btn btn-warning' href="#" id='edit_1'>Edit</a>
......@@ -991,12 +1087,6 @@
var hasil = (JSON.stringify(polyly.toGeoJSON()))
$("#coordinateZoneedit").val(hasil);
})
// $('#create_poly').on('click', function() {
// $('#modal_create').modal("show");
// $("#featuremodal").modal("hidden");
// map_create.setView([data['geometry']['coordinates'][0][0][0][1], data['geometry']['coordinates'][0][0][0][0]], 18);
// });
}
})
});
......
templates/includes/navbar.html
View file @ 0809dfd0
......@@ -37,57 +37,121 @@
<!-- /main navbar -->
<div>
</div>
<div class="fixed-plugin" style="position: absolute;z-index: 999;top: 60px;">
<div class="dropdown show-dropdown">
<a href="#" data-toggle="dropdown">
<i class="fa fa-cog fa-2x"> </i>
</a>
<ul class="dropdown-menu">
<ul class="dropdown-menu" style="left: -700!important;">
<li class="header-title"> Sidebar Filters</li>
<li class="adjustments-line">
<a href="javascript:void(0)" class="switch-trigger active-color">
<div class="badge-colors ml-auto mr-auto">
<span class="badge filter badge-purple" data-color="purple"></span>
<span class="badge filter badge-azure" data-color="azure"></span>
<span class="badge filter badge-green" data-color="green"></span>
<span class="badge filter badge-warning" data-color="orange"></span>
<span class="badge filter badge-danger" data-color="danger"></span>
<span class="badge filter badge-rose active" data-color="rose"></span>
<div class="dropdown-content-body">
<div class="row text-center">
<div class="col-md-3">
<ul class="menu-list">
<li>
<a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="OpenStreetMap">
<img src="{% static 'img/maps/osm.PNG' %}" alt="" style="max-width: 180px; max-height:180px;">
<span class="menu-heading">
&nbsp;&nbsp;Google Street</span>
</a>
</li>
</ul>
</div>
<div class="clearfix"></div>
</a>
</li>
<li class="header-title">Images</li>
<li class="active">
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="/static/img/sidebar-1.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="/static/img/sidebar-2.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="/static/img/sidebar-3.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="/static/img/sidebar-4.jpg" alt="">
</a>
</li>
<li class="button-container">
<a target="_blank" rel="noopener noreferrer" href="https://appseed.us/admin-dashboards" class="btn btn-default btn-block">
More Templates
</a>
</li>
<li class="button-container">
<a target="_blank" rel="noopener noreferrer" href="https://appseed.us" class="btn btn-primary btn-block">
AppSeed
</a>
</li>
<div class="col-md-3 align-center">
<ul class="menu-list">
<li>
<a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="WorldImagery">
<img src="{% static 'img/maps/esri.png' %}" alt="" style="max-width: 180px; max-height:180px;">
<span class="menu-heading">
&nbsp;&nbsp;World Imagery</span>
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="menu-list">
<li>
<a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="BingSatellite">
<img src="{% static 'img/maps/bing.png' %}" alt="" style="max-width: 180px; max-height:180px;">
<span class="menu-heading">
&nbsp;&nbsp;Bing Satellite</span>
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="menu-list">
<li>
<a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="GoogleSatellite">
<img src="{% static 'img/maps/esri.png' %}" alt="" style="max-width: 180px; max-height:180px;">
<span class="menu-heading">
&nbsp;&nbsp;Google Satellite</span>
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="menu-list">
<li>
<a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="OpenStreetMap">
<img src="{% static 'img/maps/osm.PNG' %}" alt="" style="max-width: 180px; max-height:180px;">
<span class="menu-heading">
&nbsp;&nbsp;Google Street</span>
</a>
</li>
</ul>
</div>
<div class="col-md-3 align-center">
<ul class="menu-list">
<li>
<a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="WorldImagery">
<img src="{% static 'img/maps/esri.png' %}" alt="" style="max-width: 180px; max-height:180px;">
<span class="menu-heading">
&nbsp;&nbsp;World Imagery</span>
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="menu-list">
<li>
<a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="BingSatellite">
<img src="{% static 'img/maps/bing.png' %}" alt="" style="max-width: 180px; max-height:180px;">
<span class="menu-heading">
&nbsp;&nbsp;Bing Satellite</span>
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="menu-list">
<li>
<a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="GoogleSatellite">
<img src="{% static 'img/maps/esri.png' %}" alt="" style="max-width: 180px; max-height:180px;">
<span class="menu-heading">
&nbsp;&nbsp;Google Satellite</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</ul>
</div>
</div>
......@@ -100,52 +164,159 @@
border-radius: 0 0 6px 6px;
width: auto;"> </i>
</a>
<ul class="dropdown-menu">
<ul class="dropdown-menu" style="width:470px!important;left:480px!important">
<li class="header-title"> Sidebar Filters</li>
<li class="adjustments-line">
<a href="javascript:void(0)" class="switch-trigger active-color">
<div class="badge-colors ml-auto mr-auto">
<span class="badge filter badge-purple" data-color="purple"></span>
<span class="badge filter badge-azure" data-color="azure"></span>
<span class="badge filter badge-green" data-color="green"></span>
<span class="badge filter badge-warning" data-color="orange"></span>
<span class="badge filter badge-danger" data-color="danger"></span>
<span class="badge filter badge-rose active" data-color="rose"></span>
<!-- <div id="sidebar" onmouseleave="overll()">
<div class="sidebar-wrapper">
<div class="panel panel-default" id="features">
<div class="panel-body"> -->
<div class="row">
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox" id="geo_tuplah" onclick="geotuplah()" style="margin-top:2px;">
lahan
</label>
</div>
<div class="clearfix"></div>
</a>
</li>
<li class="header-title">Images</li>
<li class="active">
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="/static/img/sidebar-1.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="/static/img/sidebar-2.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="/static/img/sidebar-3.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="/static/img/sidebar-4.jpg" alt="">
</a>
</li>
<li class="button-container">
<a target="_blank" rel="noopener noreferrer" href="https://appseed.us/admin-dashboards" class="btn btn-default btn-block">
More Templates
</a>
</li>
<li class="button-container">
<a target="_blank" rel="noopener noreferrer" href="https://appseed.us" class="btn btn-primary btn-block">
AppSeed
</a>
</li>
<div class="checkbox">
<label>
<input type="checkbox" id="geo_building" onclick="geobangunan()" style="margin-top:2px;">
Bangunan
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="geo_jalan" onclick="geojalan()" style="margin-top:2px;">
Jalan
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="geo_sungai" onclick="geosungai()" style="margin-top:2px;">
Sungai
</label>
</div>
</div>
<div class="col-md-6">
<ul id="myUL">
<li>
<div class="ceret">
<label>
<input type="checkbox" id="batas_all" onclick="batasall()" style="margin-top:2px;">
Batas Teritori
</label>
</div>
<ul class="nasted">
<div class="checkbox">
<label>
<input type="checkbox" id="batas_kota" onclick="bataskota()" style="margin-top:2px;">
Batas Kabupaten/Kota
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="batas_kec" onclick="bataskec()" style="margin-top:2px;">
Batas Kecamatan
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="batas_desa" onclick="batasdesa()" style="margin-top:2px;">
Batas Desa/Kelurahan
</label>
</div>
</ul>
</li>
<li>
<div class="ceret">
<label>
<input type="checkbox" id="po_all" onclick="gas_all()" value="BLACK" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Point
</label>
</div>
<ul class="nasted">
<div class="checkbox">
<label>
<input type="checkbox" id="knt_adm" onclick="k_adm()" value="BLACK" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Kantor Administrasi
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="lyn_kes" onclick="l_kes()" value="RED" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Layanan Kesehatan
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="pus" onclick="pks()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Puskesmas
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="rusak" onclick="rs()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Rumah Sakit
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="ibdh" onclick="fiksi()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Sarana Ibadah
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="dididik" onclick="didik()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Sarana Pendidikan
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="pom_bengsin" onclick="pom_mini()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
SPBU
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="tasiun" onclick="sthall()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Stasiun
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="caheum" onclick="temanggung()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Terminal Bus
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="cabud" onclick="cb100()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Cagar Budaya dan Pariwisata
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="gardu" onclick="gl100()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Gardu Listrik
</label>
</div>
</ul>
</li>
</ul>
</div>
</div>
</ul>
</div>
</div>
......
templates/includes/o.html
View file @ 0809dfd0
......@@ -230,14 +230,15 @@
</div>
</div>
<div class="footer" id="thisFooter" style="bottom: 0px">
<div class="footer" id="thisFooter" style="bottom: 0px; left: 0px;">
<input type="hidden" id="infoLongitude">
<input type="hidden" id="infoLatitude">
<input type="hidden" id="infoLimitx">
<div>
<a href="#" class="btn btn-default" id="button_hide"><span class="caret" style="margin-left: -5px;"></span></a>
</div>
<div class="row">
<div class="row" id="info-footer">
<div class="col-xs-12">
......@@ -350,9 +351,9 @@
</div>
</div>
<div class="col-md-3" style="min-width: 150px;padding-left:90px;bottom:-140px">
<div class="col-md-3" style="min-width: 150px;padding-left:50px;bottom:-140px">
<i><b>
Sumber : DUKCAPIL, Desember 2019
Sumber : DUKCAPIL, 2019
</b></i>
</div>
......
templates/layout/base.html
View file @ 0809dfd0
......@@ -91,9 +91,10 @@
.sidebar-table {
position: absolute;
width: 100%;
top: 60px;
bottom: 0px;
top: -20px;
bottom: -485px;
overflow: auto;
background-color: white;
}
.page_loader {
......@@ -147,6 +148,26 @@
.leaflet-control-attribution {
display: none;
}
/* width */
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #bfbfbf;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgb(138, 138, 138);
}
</style>
{% include 'includes/css-o.html' %} {% include 'includes/css-m.html' %}
......@@ -175,171 +196,77 @@
<link href="{% static 'css/colors.css' %}" rel="stylesheet" type="text/css">
<script src="{% static 'js/Leaflet.Editables.js' %}"></script>
<style>
#button_hide_panel {
line-height: 30px;
width: 10px;
font-size: 10pt;
font-family: tahoma;
margin-top: 0px;
/* margin-right: 3px; */
position: absolute;
/* top: 0; */
left: 370px;
z-index: 998;
display: none;
}
#button_unhide_panel {
line-height: 30px;
width: 10px;
font-size: 10pt;
font-family: tahoma;
margin-top: 0px;
/* margin-right: 3px; */
position: absolute;
/* top: 0; */
left: -11px;
z-index: 998;
display: none;
}
</style>
</head>
<body>
{% include 'includes/navbar.html' %}
<div style="height: 557px;">
<div style="height: 605px;">
{% block content %} {% endblock content %}
{% block content %}
<div>
<a href="#" class="btn btn-default" id="button_hide_panel" data-toggle="tooltip" data-placement="right" title="Ciutkan panel"><span class="caret" style="margin-left: -5px;transform: rotate(90deg)"></span></a>
</div>
<div>
<a href="#" class="btn btn-default" id="button_unhide_panel" data-toggle="tooltip" data-placement="right" title="Ciutkan panel"><span class="caret" style="margin-left: -5px;transform: rotate(270deg)"></span></a>
</div>
<div id="panel-samping" style="width: 380px;
height: 100px;
max-width: 100%;
float: right;
top: 50px;
left: 0px;
position: absolute;
z-index: 9999;
display: none;
background-color: white;">
<div class="sidebar-wrapper">
<div class="panel panel-default" id="features">
<div id="map"></div>
</div>
<div id="sidebar" onmouseleave="overll()">
<div class="sidebar-wrapper">
<div class="panel panel-default" id="features">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox" id="geo_tuplah" onclick="geotuplah()" style="margin-top:2px;">
lahan
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="geo_building" onclick="geobangunan()" style="margin-top:2px;">
Bangunan
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="geo_jalan" onclick="geojalan()" style="margin-top:2px;">
Jalan
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="geo_sungai" onclick="geosungai()" style="margin-top:2px;">
Sungai
</label>
</div>
</div>
<div class="col-md-6">
<ul id="myUL">
<li>
<div class="ceret">
<label>
<input type="checkbox" id="batas_all" onclick="batasall()" style="margin-top:2px;">
Batas Teritori
</label>
</div>
<ul class="nasted">
<div class="checkbox">
<label>
<input type="checkbox" id="batas_kota" onclick="bataskota()" style="margin-top:2px;">
Batas Kabupaten/Kota
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="batas_kec" onclick="bataskec()" style="margin-top:2px;">
Batas Kecamatan
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="batas_desa" onclick="batasdesa()" style="margin-top:2px;">
Batas Desa/Kelurahan
</label>
</div>
</ul>
</li>
<li>
<div class="ceret">
<label>
<input type="checkbox" id="po_all" onclick="gas_all()" value="BLACK" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Point
</label>
</div>
<ul class="nasted">
<div class="checkbox">
<label>
<input type="checkbox" id="knt_adm" onclick="k_adm()" value="BLACK" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Kantor Administrasi
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="lyn_kes" onclick="l_kes()" value="RED" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Layanan Kesehatan
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="pus" onclick="pks()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Puskesmas
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="rusak" onclick="rs()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Rumah Sakit
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="ibdh" onclick="fiksi()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Sarana Ibadah
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="dididik" onclick="didik()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Sarana Pendidikan
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="pom_bengsin" onclick="pom_mini()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
SPBU
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="tasiun" onclick="sthall()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Stasiun
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="caheum" onclick="temanggung()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Terminal Bus
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="cabud" onclick="cb100()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Cagar Budaya dan Pariwisata
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="gardu" onclick="gl100()" value="YELLOW" class="checkboxOccInfo" name="checkOccInfo" style="margin-top:2px;">
Gardu Listrik
</label>
</div>
</ul>
</li>
</ul>
</div>
<div class="sidebar-table">
<table class="table table-hover tasks-list" id="isi_panel">
<!-- panel samping js disini -->
</table>
</div>
</div>
</div>
</div>
{% endblock content %}
<div id="map"></div>
</div>
......@@ -399,9 +326,6 @@
<script src="{% static 'js/scripts.js' %}"></script>
</body>
</html>
......
templates/layout/coba.html 0 → 100644
View file @ 0809dfd0
<!--
=========================================================
Material Dashboard - v2.1.2
=========================================================
Product Page: https://www.creative-tim.com/product/material-dashboard
Copyright 2019 Creative Tim (https://www.creative-tim.com)
Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
Coded by Creative Tim
=========================================================
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="https://appsrv1-147a1.kxcdn.com/material-dashboard/img/apple-icon.png">
<link rel="icon" type="image/png" href="https://appsrv1-147a1.kxcdn.com/material-dashboard/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="canonical" href="https://appseed.us/admin-dashboards/django-dashboard-material">
<meta name="google-site-verification" content="kCT200-J0rfczENRkJQdYCqsDKkUo3Hvr3KZic_otwU" />
<title>
Django Material Dashboard - Maps | AppSeed
</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<!-- CSS Files -->
<link href="https://appsrv1-147a1.kxcdn.com/material-dashboard/css/material-dashboard.min.css?v=2.1.2" rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="{% static 'demo/demo.css' %}" rel="stylesheet" />
<!-- Specific Page CSS goes HERE -->
<style>
.leaflet-draw-section {
display: none;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="{% static 'js/Leaflet.Editables.js' %}"></script>
<style>
#button_hide {
line-height: 15px;
width: 30px;
font-size: 10pt;
font-family: tahoma;
margin-top: 3px;
margin-left: 3px;
position: absolute;
top: 61px;
left: 265px;
z-index: 3;
background-color: white;
}
#button_unhide {
line-height: 15px;
width: 30px;
font-size: 10pt;
font-family: tahoma;
margin-top: 3px;
margin-left: 3px;
position: absolute;
top: 61px;
left: -46px;
z-index: 3;
background-color: white;
}
#button_detail {
line-height: 15px;
width: 30px;
font-size: 10pt;
font-family: tahoma;
margin-top: 3px;
margin-left: 3px;
position: absolute;
top: 320px;
left: 10px;
z-index: 10;
background-color: white;
}
</style>
</head>
<body class="">
<div class="wrapper ">
<div>
<a href="#" class="btn btn-default" id="button_hide" data-toggle="tooltip" data-placement="right" title="Ciutkan panel"><span class="caret" style="margin-left: -5px;"></span></a>
</div>
<div>
<a href="#" class="btn btn-default" id="button_unhide" data-toggle="tooltip" data-placement="right" title="Luaskan Panel"><span class="caret" style="margin-left: -5px;display:block" ></span></a>
</div>
<a href="#" id="button_detail">details</a>
<div class="sidebar" id="panel-samping" data-background-color="white" data-image="https://appsrv1-147a1.kxcdn.com/material-dashboard/img/sidebar-1.jpg" style="z-index: 5!important;width:300px">
<div class="sidebar-wrapper">
<ul class="nav" style="margin-top: 0px;">
<li class="nav-item ">
<a class="nav-link" href="/" style="background-image:url('static/img/maps/esri.png');min-height: 260px;min-width: 255px;">
</a>
<div>
<a class="nav-link" href="/page-user.html">
<i class="material-icons">person</i>
<p>User Profile</p>
</a>
</div>
</li>
<li class="nav-item ">
</li>
<li class="nav-item ">
<a class="nav-link" href="/ui-tables.html">
<i class="material-icons">content_paste</i>
<p>Table List</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/ui-typography.html">
<i class="material-icons">library_books</i>
<p>Typography</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/ui-icons.html">
<i class="material-icons">bubble_chart</i>
<p>Icons</p>
</a>
</li>
<li class="nav-item active ">
<a class="nav-link" href="/ui-maps.html">
<i class="material-icons">location_ons</i>
<p>Maps</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/ui-notifications.html">
<i class="material-icons">notifications</i>
<p>Notifications</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/page-rtl-support.html">
<i class="material-icons">language</i>
<p>RTL Support</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/logout/">
<i class="material-icons">directions_run</i>
<p>Logout</p>
</a>
</li>
<li class="nav-item active-pro ">
<a class="nav-link" target="_blank" rel="noopener noreferrer" href="https://appseed.us/admin-dashboards/django-dashboard-material-pro">
<i class="material-icons">unarchive</i>
<p>PRO Version</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel" style="width: 100%;">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-end">
<form class="navbar-form">
<div class="input-group no-border">
<input type="text" value="" class="form-control" placeholder="Search...">
<button type="submit" class="btn btn-white btn-round btn-just-icon">
<i class="material-icons">search</i>
<div class="ripple-container"></div>
</button>
</div>
</form>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#pablo">
<i class="material-icons">dashboard</i>
<p class="d-lg-none d-md-block">
Stats
</p>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">notifications</i>
<span class="notification">5</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mike John responded to your email</a>
<a class="dropdown-item" href="#">You have 5 new tasks</a>
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
<a class="dropdown-item" href="#">Another Notification</a>
<a class="dropdown-item" href="#">Another One</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">person</i>
<p class="d-lg-none d-md-block">
Account
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
<a class="dropdown-item" href="/page-user.html">Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/logout/">Log out</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="content" style="margin-top: 0px!important;padding: 0px 0px!important; height: 100%;">
<div class="container-fluid" style="height: 100%;padding-right: 0px;padding-left: 0px;">
<div id="map" style="height: 100%;"></div>
</div>
</div>
</div>
</div>
<div class="fixed-plugin">
<div class="dropdown show-dropdown">
<a href="#" data-toggle="dropdown">
<i class="fa fa-cog fa-2x"> </i>
</a>
<ul class="dropdown-menu">
<li class="header-title"> Sidebar Filters</li>
<li class="adjustments-line">
<a href="javascript:void(0)" class="switch-trigger active-color">
<div class="badge-colors ml-auto mr-auto">
<span class="badge filter badge-purple" data-color="purple"></span>
<span class="badge filter badge-azure" data-color="azure"></span>
<span class="badge filter badge-green" data-color="green"></span>
<span class="badge filter badge-warning" data-color="orange"></span>
<span class="badge filter badge-danger" data-color="danger"></span>
<span class="badge filter badge-rose active" data-color="rose"></span>
</div>
<div class="clearfix"></div>
</a>
</li>
<li class="header-title">Images</li>
<li class="active">
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="https://appsrv1-147a1.kxcdn.com/material-dashboard/img/sidebar-1.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="https://appsrv1-147a1.kxcdn.com/material-dashboard/img/sidebar-2.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="https://appsrv1-147a1.kxcdn.com/material-dashboard/img/sidebar-3.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="https://appsrv1-147a1.kxcdn.com/material-dashboard/img/sidebar-4.jpg" alt="">
</a>
</li>
<li class="button-container">
<a target="_blank" rel="noopener noreferrer" href="https://appseed.us/admin-dashboards/django-dashboard-material" class="btn btn-default btn-block">
See Product
</a>
</li>
<li class="button-container">
<a target="_blank" rel="noopener noreferrer" href="https://appseed.us/support" class="btn btn-primary btn-block">
Get Support
</a>
</li>
</ul>
</div>
</div>
<!-- Core JS Files -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/core/jquery.min.js"></script>
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/core/popper.min.js"></script>
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/core/bootstrap-material-design.min.js"></script>
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<!-- Plugin for the momentJs -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/moment.min.js"></script>
<!-- Plugin for Sweet Alert -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/sweetalert2.js"></script>
<!-- Forms Validations Plugin -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/jquery.validate.min.js"></script>
<!-- Plugin for the Wizard, full documentation here: https://github.com/VinceG/twitter-bootstrap-wizard -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/jquery.bootstrap-wizard.js"></script>
<!-- Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/bootstrap-selectpicker.js"></script>
<!-- Plugin for the DateTimePicker, full documentation here: https://eonasdan.github.io/bootstrap-datetimepicker/ -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/bootstrap-datetimepicker.min.js"></script>
<!-- DataTables.net Plugin, full documentation here: https://datatables.net/ -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/jquery.dataTables.min.js"></script>
<!-- Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/bootstrap-tagsinput.js"></script>
<!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/jasny-bootstrap.min.js"></script>
<!-- Full Calendar Plugin, full documentation here: https://github.com/fullcalendar/fullcalendar -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/fullcalendar.min.js"></script>
<!-- Vector Map plugin, full documentation here: http://jvectormap.com/documentation/ -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/jquery-jvectormap.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/nouislider.min.js"></script>
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
<!-- Library for adding dinamically elements -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/arrive.min.js"></script>
<!-- Chartist JS -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/js/material-dashboard.js?v=2.1.2" type="text/javascript"></script>
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
<script src="https://appsrv1-147a1.kxcdn.com/material-dashboard/demo/demo.js"></script>
<script>
$(document).ready(function() {
$().ready(function() {
$sidebar = $('.sidebar');
$sidebar_img_container = $sidebar.find('.sidebar-background');
$full_page = $('.full-page');
$sidebar_responsive = $('body > .navbar-collapse');
window_width = $(window).width();
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
if (window_width > 767 && fixed_plugin_open == 'Dashboard') {
if ($('.fixed-plugin .dropdown').hasClass('show-dropdown')) {
$('.fixed-plugin .dropdown').addClass('open');
}
}
$('.fixed-plugin a').click(function(event) {
// Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
if ($(this).hasClass('switch-trigger')) {
if (event.stopPropagation) {
event.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
}
});
$('.fixed-plugin .active-color span').click(function() {
$full_page_background = $('.full-page-background');
$(this).siblings().removeClass('active');
$(this).addClass('active');
var new_color = $(this).data('color');
if ($sidebar.length != 0) {
$sidebar.attr('data-color', new_color);
}
if ($full_page.length != 0) {
$full_page.attr('filter-color', new_color);
}
if ($sidebar_responsive.length != 0) {
$sidebar_responsive.attr('data-color', new_color);
}
});
$('.fixed-plugin .background-color .badge').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
var new_color = $(this).data('background-color');
if ($sidebar.length != 0) {
$sidebar.attr('data-background-color', new_color);
}
});
$('.fixed-plugin .img-holder').click(function() {
$full_page_background = $('.full-page-background');
$(this).parent('li').siblings().removeClass('active');
$(this).parent('li').addClass('active');
var new_image = $(this).find("img").attr('src');
if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
$sidebar_img_container.fadeOut('fast', function() {
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
$sidebar_img_container.fadeIn('fast');
});
}
if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
$full_page_background.fadeOut('fast', function() {
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
$full_page_background.fadeIn('fast');
});
}
if ($('.switch-sidebar-image input:checked').length == 0) {
var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
}
if ($sidebar_responsive.length != 0) {
$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
}
});
$('.switch-sidebar-image input').change(function() {
$full_page_background = $('.full-page-background');
$input = $(this);
if ($input.is(':checked')) {
if ($sidebar_img_container.length != 0) {
$sidebar_img_container.fadeIn('fast');
$sidebar.attr('data-image', '#');
}
if ($full_page_background.length != 0) {
$full_page_background.fadeIn('fast');
$full_page.attr('data-image', '#');
}
background_image = true;
} else {
if ($sidebar_img_container.length != 0) {
$sidebar.removeAttr('data-image');
$sidebar_img_container.fadeOut('fast');
}
if ($full_page_background.length != 0) {
$full_page.removeAttr('data-image', '#');
$full_page_background.fadeOut('fast');
}
background_image = false;
}
});
$('.switch-sidebar-mini input').change(function() {
$body = $('body');
$input = $(this);
if (md.misc.sidebar_mini_active == true) {
$('body').removeClass('sidebar-mini');
md.misc.sidebar_mini_active = false;
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
} else {
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar('destroy');
setTimeout(function() {
$('body').addClass('sidebar-mini');
md.misc.sidebar_mini_active = true;
}, 300);
}
// we simulate the window Resize so the charts will get updated in realtime.
var simulateWindowResize = setInterval(function() {
window.dispatchEvent(new Event('resize'));
}, 180);
// we stop the simulation of Window Resize after the animations are completed
setTimeout(function() {
clearInterval(simulateWindowResize);
}, 1000);
});
});
});
</script>
<!-- Specific Page JS goes HERE -->
<!-- Google Maps Plugin -->
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
<script src="https://unpkg.com/esri-leaflet@2.5.1/dist/esri-leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.js"></script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.js"></script>
<script>
var map = L.map('map', {
editable: true,
zoomControl: false,
drawControl: true
}).setView([-4.125826277307029, 104.1881561279297], 10);
maps = L.tileLayer('https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&s=Gal&apistyle=s.t:0|s.e:l|p.v:off', {
maxZoom: 22,
minZoom: 4,
}).addTo(map);
$("#button_hide").click(function() {
$("#panel-samping").css('display', 'none');
$("#button_hide").css('display', 'none');
})
$("#button_unhide").click(function() {
$("#panel-samping").css('display', 'block');
$("#button_hide").css('display', 'block');
})
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment