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): ...@@ -15,7 +15,7 @@ class Dashboard(generic.TemplateView):
all = all_.fetchall() all = all_.fetchall()
with conn.cursor() as kel: 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() kel_res_ = kel.fetchall()
with conn.cursor() as kec: with conn.cursor() as kec:
...@@ -152,16 +152,13 @@ class Dashboard(generic.TemplateView): ...@@ -152,16 +152,13 @@ class Dashboard(generic.TemplateView):
return render (request, self.template_name, context) return render (request, self.template_name, context)
class SearchLocation(generic.TemplateView): class SearchLocation(generic.TemplateView):
template_name = "maps/maps.html" template_name = "layout/coba.html"
# @method_decorator(login_required(login_url='maps:login')) # @method_decorator(login_required(login_url='maps:login'))
def get(self, request): def get(self, request):
return redirect("apps:dashboard") 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})
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})
class SearchRadius(generic.TemplateView): class SearchRadius(generic.TemplateView):
template_name = "maps/maps.html" template_name = "maps/maps.html"
......
static/css/plugin.css
View file @ 0809dfd0
...@@ -46,8 +46,7 @@ ...@@ -46,8 +46,7 @@
.fixed-plugin .dropdown-menu { .fixed-plugin .dropdown-menu {
right: 80px; right: 80px;
left: auto; width: 685px;
width: 290px;
border-radius: 0.1875rem; border-radius: 0.1875rem;
padding: 0 10px; padding: 0 10px;
} }
...@@ -1059,9 +1058,8 @@ ...@@ -1059,9 +1058,8 @@
} }
.fixed-plugin .dropdown .dropdown-menu { .fixed-plugin .dropdown .dropdown-menu {
top: -40px !important; top: -40px;
opacity: 0; opacity: 0;
left: -303px !important;
transform-origin: 100% 0; transform-origin: 100% 0;
} }
......
static/demo/demo.css
View file @ 0809dfd0
.tim-typo { .tim-typo {
padding-left: 25%; padding-left: 25%;
margin-bottom: 40px; margin-bottom: 40px;
position: relative; position: relative;
width: 100%; width: 100%;
} }
.tim-typo .tim-note { .tim-typo .tim-note {
bottom: 5px; bottom: 5px;
color: #c0c1c2; color: #c0c1c2;
display: block; display: block;
font-weight: 400; font-weight: 400;
font-size: 13px; font-size: 13px;
line-height: 15px; line-height: 15px;
left: 0; left: 0;
margin-left: 20px; margin-left: 20px;
position: absolute; position: absolute;
width: 260px; width: 260px;
} }
/* offline-doc */ /* offline-doc */
.offline-doc .navbar.navbar-transparent { .offline-doc .navbar.navbar-transparent {
padding-top: 25px; padding-top: 25px;
border-bottom: none; border-bottom: none;
} }
.offline-doc .navbar.navbar-transparent .navbar-minimize { .offline-doc .navbar.navbar-transparent .navbar-minimize {
display: none; display: none;
} }
.offline-doc .navbar.navbar-transparent .navbar-brand, .offline-doc .navbar.navbar-transparent .navbar-brand,
.offline-doc .navbar.navbar-transparent .collapse .navbar-nav .nav-link { .offline-doc .navbar.navbar-transparent .collapse .navbar-nav .nav-link {
color: #FFFFFF !important; color: #FFFFFF !important;
} }
.offline-doc .footer { .offline-doc .footer {
z-index: 3 !important; z-index: 3 !important;
} }
.offline-doc .page-header .container { .offline-doc .page-header .container {
z-index: 3; z-index: 3;
} }
.offline-doc .page-header:after { .offline-doc .page-header:after {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
content: ""; content: "";
display: block; display: block;
height: 100%; height: 100%;
left: 0; left: 0;
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 2; z-index: 2;
} }
#map { #map {
z-index: 2; z-index: 2;
height: calc(100vh - 70px); height: calc(100vh - 70px);
margin-top: 70px;
} }
\ No newline at end of file
static/js/maps.js
View file @ 0809dfd0
...@@ -67,6 +67,12 @@ request.send(null) ...@@ -67,6 +67,12 @@ request.send(null)
var batas = JSON.parse(request.responseText); var batas = JSON.parse(request.responseText);
console.log(batas); console.log(batas);
// map.on('click', function(e) {
// });
var geo_batas = L.geoJson(batas, { var geo_batas = L.geoJson(batas, {
style: function(feature) { style: function(feature) {
return { return {
...@@ -79,6 +85,9 @@ var geo_batas = L.geoJson(batas, { ...@@ -79,6 +85,9 @@ var geo_batas = L.geoJson(batas, {
}, },
onEachFeature: function(feature, layer) { onEachFeature: function(feature, layer) {
layer.on({ layer.on({
click: function(e) {
},
mouseover: function(e) { mouseover: function(e) {
var layer = e.target; var layer = e.target;
layer.setStyle({ layer.setStyle({
...@@ -264,273 +273,273 @@ $("#id_kab").change(function() { ...@@ -264,273 +273,273 @@ $("#id_kab").change(function() {
var geocodeService = L.esri.Geocoding.geocodeService(); var geocodeService = L.esri.Geocoding.geocodeService();
var geocoderNominatim = new L.Control.Geocoder.Nominatim(); var geocoderNominatim = new L.Control.Geocoder.Nominatim();
var geo_build_gen = L.geoJson(null, { // var geo_build_gen = L.geoJson(null, {
style: function(feature) { // style: function(feature) {
if (feature.properties.f4 == 'osm') { // if (feature.properties.f4 == 'osm') {
return { // return {
color: "#00ff00", // color: "#00ff00",
weight: 1, // weight: 1,
opacity: 2, // opacity: 2,
zIndex: 1000 // zIndex: 1000
}; // };
} // }
if (feature.properties.f4 == 'gen') { // if (feature.properties.f4 == 'gen') {
return { // return {
color: "#ff0008", // color: "#ff0008",
weight: 1, // weight: 1,
opacity: 2, // opacity: 2,
zIndex: 1000 // zIndex: 1000
}; // };
} // }
if (feature.properties.f4 == 'new') { // if (feature.properties.f4 == 'new') {
return { // return {
color: "#0400ed", // color: "#0400ed",
weight: 1, // weight: 1,
opacity: 2, // opacity: 2,
zIndex: 1000 // zIndex: 1000
}; // };
} // }
}, // },
onEachFeature: function(feature, layer) { // onEachFeature: function(feature, layer) {
if (feature.properties) { // if (feature.properties) {
var lattitud, longitud; // var lattitud, longitud;
if (feature.geometry.type == 'MultiPolygon') { // if (feature.geometry.type == 'MultiPolygon') {
lattitud = feature.geometry.coordinates[0][0][0][1]; // lattitud = feature.geometry.coordinates[0][0][0][1];
longitud = feature.geometry.coordinates[0][0][0][0]; // longitud = feature.geometry.coordinates[0][0][0][0];
} else { // } else {
lattitud = feature.geometry.coordinates[0][0][1]; // lattitud = feature.geometry.coordinates[0][0][1];
longitud = feature.geometry.coordinates[0][0][0]; // longitud = feature.geometry.coordinates[0][0][0];
}; // };
layer.on({ // layer.on({
click: function(e) { // click: function(e) {
$('#id_poly').val(feature.properties.f1); // $('#id_poly').val(feature.properties.f1);
$('#id_poly_delete').val(feature.properties.f1); // $('#id_poly_delete').val(feature.properties.f1);
} // }
}); // });
$("#list-polygon tbody").append(` // $("#list-polygon tbody").append(`
<tr class="feature-row" id="` + L.stamp(layer) + `" lat="` + lattitud + `" lng="` + longitud + `"> // <tr class="feature-row" id="` + L.stamp(layer) + `" lat="` + lattitud + `" lng="` + longitud + `">
<td class="feature-name"> // <td class="feature-name">
` + feature.properties.f2 + ` // ` + feature.properties.f2 + `
</td> // </td>
</tr>`); // </tr>`);
pool.push({ // pool.push({
name: feature.properties.f2, // name: feature.properties.f2,
id: L.stamp(layer), // id: L.stamp(layer),
lat: lattitud, // lat: lattitud,
lng: longitud // lng: longitud
}); // });
} // }
layer.on({ // layer.on({
mouseover: function(e) { // mouseover: function(e) {
var layer = e.target; // var layer = e.target;
layer.setStyle({ // layer.setStyle({
weight: 1, // weight: 1,
Color: "#067800", // Color: "#067800",
fillColor: "#067800", // fillColor: "#067800",
}); // });
if (!L.Browser.ie && !L.Browser.opera) { // if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront(); // layer.bringToFront();
} // }
}, // },
mouseout: function(e) { // mouseout: function(e) {
geo_build_gen.resetStyle(e.target); // geo_build_gen.resetStyle(e.target);
} // }
}); // });
var content = ` // var content = `
<div class="tabbable"> // <div class="tabbable">
<ul class="nav nav-tabs nav-tabs-bottom nav-justified"> // <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 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> // <li><a href="#right-tab2-feas-upl" data-toggle="tab" id="edit">Edit Buildings</a></li>
</ul> // </ul>
<div class="tab-content"> // <div class="tab-content">
<div class="tab-pane active" id="left-tab1-feas-upl" style="padding-bottom: 17px;"> // <div class="tab-pane active" id="left-tab1-feas-upl" style="padding-bottom: 17px;">
<div style="width: 350px; margin-left:10px;"> // <div style="width: 350px; margin-left:10px;">
<table> // <table>
<tr> // <tr>
<th>Id</th> // <th>Id</th>
<td>:&nbsp` + feature.properties.f1 + `</td> // <td>:&nbsp` + feature.properties.f1 + `</td>
</tr> // </tr>
<tr> // <tr>
<th>Name</th> // <th>Name</th>
<td>:&nbsp` + feature.properties.f2 + `</td> // <td>:&nbsp` + feature.properties.f2 + `</td>
</tr> // </tr>
<tr> // <tr>
<th>Information</th> // <th>Information</th>
<td>:&nbsp` + feature.properties.f3 + `</td> // <td>:&nbsp` + feature.properties.f3 + `</td>
</tr> // </tr>
<tr> // <tr>
<th>Kelurahan</th> // <th>Kelurahan</th>
<td>:&nbsp` + feature.administrasi.f1 + `</td> // <td>:&nbsp` + feature.administrasi.f1 + `</td>
</tr> // </tr>
<tr> // <tr>
<th>Kecamatan</th> // <th>Kecamatan</th>
<td>:&nbsp` + feature.administrasi.f2 + `</td> // <td>:&nbsp` + feature.administrasi.f2 + `</td>
</tr> // </tr>
<tr> // <tr>
<th>Kab/Kota</th> // <th>Kab/Kota</th>
<td>:&nbsp` + feature.administrasi.f3 + `</td> // <td>:&nbsp` + feature.administrasi.f3 + `</td>
</tr> // </tr>
<tr> // <tr>
<th>Provinsi</th> // <th>Provinsi</th>
<td>:&nbsp` + feature.administrasi.f4 + `</td> // <td>:&nbsp` + feature.administrasi.f4 + `</td>
</tr> // </tr>
</table> // </table>
</div><br> // </div><br>
<input id='delet-pol' class="btn btn-warning" type="submit" value="DELETE"> // <input id='delet-pol' class="btn btn-warning" type="submit" value="DELETE">
</div> // </div>
<div class="tab-pane" id="right-tab2-feas-upl" style="padding-bottom: 17px;"> // <div class="tab-pane" id="right-tab2-feas-upl" style="padding-bottom: 17px;">
<div id="map-edit" style="width:500px;height: 250px;"> // <div id="map-edit" style="width:500px;height: 250px;">
</div><br> // </div><br>
<input id='buttonsaveedit' class="btn btn-primary" type="submit" value="Save"> // <input id='buttonsaveedit' class="btn btn-primary" type="submit" value="Save">
</div> // </div>
<input type="text" name="coordinateZoneedit" class="hidden" id="coordinateZoneedit" value=""> // <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='id-poly' id="id-poly" value="` + feature.properties.f1 + `">
<input class="hidden" type="text" name='sumber' id="sumber" value="gen"> // <input class="hidden" type="text" name='sumber' id="sumber" value="gen">
</div> // </div>
</div>`; // </div>`;
layer.bindPopup(content); // layer.bindPopup(content);
} // }
}).addTo(map); // }).addTo(map);
var geo_build_osm = L.geoJson(null, { // var geo_build_osm = L.geoJson(null, {
style: function(feature) { // style: function(feature) {
if (feature.properties.f4 == 'osm') { // if (feature.properties.f4 == 'osm') {
return { // return {
color: "#00ff00", // color: "#00ff00",
weight: 1, // weight: 1,
opacity: 2, // opacity: 2,
zIndex: 1000 // zIndex: 1000
}; // };
} // }
if (feature.properties.f4 == 'gen') { // if (feature.properties.f4 == 'gen') {
return { // return {
color: "#ff0008", // color: "#ff0008",
weight: 1, // weight: 1,
opacity: 2, // opacity: 2,
zIndex: 1000 // zIndex: 1000
}; // };
} // }
}, // },
onEachFeature: function(feature, layer) { // onEachFeature: function(feature, layer) {
if (feature.properties) { // if (feature.properties) {
var lattitud, longitud; // var lattitud, longitud;
if (feature.geometry.type == 'MultiPolygon') { // if (feature.geometry.type == 'MultiPolygon') {
lattitud = feature.geometry.coordinates[0][0][0][1]; // lattitud = feature.geometry.coordinates[0][0][0][1];
longitud = feature.geometry.coordinates[0][0][0][0]; // longitud = feature.geometry.coordinates[0][0][0][0];
} else { // } else {
lattitud = feature.geometry.coordinates[0][0][1]; // lattitud = feature.geometry.coordinates[0][0][1];
longitud = feature.geometry.coordinates[0][0][0]; // longitud = feature.geometry.coordinates[0][0][0];
}; // };
layer.on({ // layer.on({
click: function(e) { // click: function(e) {
$('#id_poly').val(feature.properties.f1); // $('#id_poly').val(feature.properties.f1);
$('#id_poly_delete').val(feature.properties.f1); // $('#id_poly_delete').val(feature.properties.f1);
} // }
}); // });
pool.push({ // pool.push({
name: feature.properties.f2, // name: feature.properties.f2,
id: L.stamp(layer), // id: L.stamp(layer),
lat: lattitud, // lat: lattitud,
lng: longitud // lng: longitud
}); // });
} // }
layer.on({ // layer.on({
mouseover: function(e) { // mouseover: function(e) {
var layer = e.target; // var layer = e.target;
layer.setStyle({ // layer.setStyle({
weight: 1, // weight: 1,
Color: "#067800", // Color: "#067800",
fillColor: "#067800", // fillColor: "#067800",
}); // });
if (!L.Browser.ie && !L.Browser.opera) { // if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront(); // layer.bringToFront();
} // }
}, // },
mouseout: function(e) { // mouseout: function(e) {
geo_build_osm.resetStyle(e.target); // geo_build_osm.resetStyle(e.target);
} // }
}); // });
var content = `<div class="tabbable"> // var content = `<div class="tabbable">
<ul class="nav nav-tabs nav-tabs-bottom nav-justified"> // <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 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> // <li><a href="#right-tab2-feas-upl" data-toggle="tab" id="edit">Edit Buildings</a></li>
</ul> // </ul>
<div class="tab-content"> // <div class="tab-content">
<div class="tab-pane active" id="left-tab1-feas-upl" style="padding-bottom: 17px;"> // <div class="tab-pane active" id="left-tab1-feas-upl" style="padding-bottom: 17px;">
<div style="width: 350px; margin-left:10px;"> // <div style="width: 350px; margin-left:10px;">
<table> // <table>
<tr> // <tr>
<th>Id</th> // <th>Id</th>
<td>:&nbsp` + feature.properties.f1 + `</td> // <td>:&nbsp` + feature.properties.f1 + `</td>
</tr> // </tr>
<tr> // <tr>
<th>Name</th> // <th>Name</th>
<td>:&nbsp` + feature.properties.f2 + `</td> // <td>:&nbsp` + feature.properties.f2 + `</td>
</tr> // </tr>
<tr> // <tr>
<th>Information</th> // <th>Information</th>
<td>:&nbsp` + feature.properties.f3 + `</td> // <td>:&nbsp` + feature.properties.f3 + `</td>
</tr> // </tr>
<tr> // <tr>
<th>Kelurahan</th> // <th>Kelurahan</th>
<td>:&nbsp` + feature.administrasi.f1 + `</td> // <td>:&nbsp` + feature.administrasi.f1 + `</td>
</tr> // </tr>
<tr> // <tr>
<th>Kecamatan</th> // <th>Kecamatan</th>
<td>:&nbsp` + feature.administrasi.f2 + `</td> // <td>:&nbsp` + feature.administrasi.f2 + `</td>
</tr> // </tr>
<tr> // <tr>
<th>Kab/Kota</th> // <th>Kab/Kota</th>
<td>:&nbsp` + feature.administrasi.f3 + `</td> // <td>:&nbsp` + feature.administrasi.f3 + `</td>
</tr> // </tr>
<tr> // <tr>
<th>Provinsi</th> // <th>Provinsi</th>
<td>:&nbsp` + feature.administrasi.f4 + `</td> // <td>:&nbsp` + feature.administrasi.f4 + `</td>
</tr> // </tr>
</table> // </table>
</div><br> // </div><br>
<input id='delet-pol' class="btn btn-warning" type="submit" value="DELETE"> // <input id='delet-pol' class="btn btn-warning" type="submit" value="DELETE">
</div> // </div>
<div class="tab-pane" id="right-tab2-feas-upl" style="padding-bottom: 17px;"> // <div class="tab-pane" id="right-tab2-feas-upl" style="padding-bottom: 17px;">
<div id="map-edit" style="width:500px;height: 250px;"> // <div id="map-edit" style="width:500px;height: 250px;">
</div><br> // </div><br>
<input id='buttonsaveedit' class="btn btn-primary" type="submit" value="Save"> // <input id='buttonsaveedit' class="btn btn-primary" type="submit" value="Save">
</div> // </div>
<input type="text" name="coordinateZoneedit" class="hidden" id="coordinateZoneedit" value=""> // <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='id-poly' id="id-poly" value="` + feature.properties.f1 + `">
<input class="hidden" type="text" name='sumber' id="sumber" value="osm"> // <input class="hidden" type="text" name='sumber' id="sumber" value="osm">
</div> // </div>
</div>`; // </div>`;
layer.bindPopup(content); // layer.bindPopup(content);
} // }
}).addTo(map); // }).addTo(map);
// $("#edit").click(function() { // $("#edit").click(function() {
// alert("cel") // alert("cel")
...@@ -576,138 +585,138 @@ jQuery(document).ajaxSend(function(event, xhr, settings) { ...@@ -576,138 +585,138 @@ jQuery(document).ajaxSend(function(event, xhr, settings) {
} }
}); });
map.on('contextmenu', function(e) { // map.on('contextmenu', function(e) {
$("#map-create").remove(); // $("#map-create").remove();
// document.getElementsByClassName('leaflet-popup-content').style.width = "550px"; // // document.getElementsByClassName('leaflet-popup-content').style.width = "550px";
var popup = L.popup() // var popup = L.popup()
.setLatLng(e.latlng) // .setLatLng(e.latlng)
.setContent(` // .setContent(`
<div id="map-create" style="height: 250px;"> // <div id="map-create" style="height: 250px;">
<input type="button" id="create" value="Create" style="z-index: 1000;position:relative;"> // <input type="button" id="create" value="Create" style="z-index: 1000;position:relative;">
</div> // </div>
<br> // <br>
<label class="control-label col-lg-2 label-12">Name</label> // <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> // <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> // <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> // <input type="text" class="form-control" name="info_create" id="info_create" value=""><br>
<div class="row"> // <div class="row">
<div class="col-md-2"> // <div class="col-md-2">
</div> // </div>
<div class="col-md-7"> // <div class="col-md-7">
</div> // </div>
<div class="col-md-3"> // <div class="col-md-3">
<input type="button" class="btn btn-primary" id="create_save" value="SAVE" style="margin-right:30px;"> // <input type="button" class="btn btn-primary" id="create_save" value="SAVE" style="margin-right:30px;">
</div> // </div>
</div> // </div>
<input type="text" name="poly_create" class="hidden" id="poly_create" value=""> // <input type="text" name="poly_create" class="hidden" id="poly_create" value="">
`) // `)
.openOn(map); // .openOn(map);
map.openPopup(popup); // map.openPopup(popup);
var map_create = L.map('map-create', { // var map_create = L.map('map-create', {
editable: true, // editable: true,
zoomControl: false, // zoomControl: false,
drawControl: true // drawControl: true
}).setView([e.latlng.lat, e.latlng.lng], 20.5); // }).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}', { // map_created = L.tileLayer('https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 22, // maxZoom: 22,
minZoom: 4, // minZoom: 4,
}).addTo(map_create); // }).addTo(map_create);
map_create.invalidateSize(); // map_create.invalidateSize();
$('#create').click(function() { // $('#create').click(function() {
polygonDraweredit.enable(); // polygonDraweredit.enable();
}); // });
var Marker = {}; // var Marker = {};
var Poly = {}; // var Poly = {};
map_create.on(L.Draw.Event.CREATED, function(e) { // map_create.on(L.Draw.Event.CREATED, function(e) {
var layer = e.layer; // var layer = e.layer;
$("#poly_create").empty(); // $("#poly_create").empty();
var type = e.layerType; // var type = e.layerType;
var layer = e.layer; // var layer = e.layer;
var shape = layer.toGeoJSON(); // var shape = layer.toGeoJSON();
let geoShape = shape.geometry.coordinates[0]; // let geoShape = shape.geometry.coordinates[0];
let kordinat = ""; // let kordinat = "";
for (j in geoShape) { // for (j in geoShape) {
kordinat += geoShape[j][0] + ' ' + geoShape[j][1]; // kordinat += geoShape[j][0] + ' ' + geoShape[j][1];
if (j <= (geoShape.length - 2)) { // if (j <= (geoShape.length - 2)) {
kordinat += ', '; // kordinat += ', ';
} // }
} // }
window.thisBaseDrawPolygonLayer = layer; // window.thisBaseDrawPolygonLayer = layer;
$("#poly_create").val(JSON.stringify(kordinat)); // $("#poly_create").val(JSON.stringify(kordinat));
}); // });
polygon_options = { // polygon_options = {
showArea: false, // showArea: false,
shapeOptions: { // shapeOptions: {
stroke: true, // stroke: true,
color: '#6e83f0', // color: '#6e83f0',
weight: 1.5, // weight: 1.5,
opacity: 2, // opacity: 2,
fill: true, // fill: true,
fillColor: null, //same as color by default // fillColor: null, //same as color by default
fillOpacity: 0.3, // fillOpacity: 0.3,
clickable: true // clickable: true
} // }
} // }
var polygonDraweredit = new L.Draw.Polygon(map_create, polygon_options); // var polygonDraweredit = new L.Draw.Polygon(map_create, polygon_options);
polygonDraweredit.on("click", function(event) { // polygonDraweredit.on("click", function(event) {
shapecoords.innerHTML = event.latlng.toString(); // shapecoords.innerHTML = event.latlng.toString();
map_create.fire("click", event); // Trigger a map click as well. // map_create.fire("click", event); // Trigger a map click as well.
}); // });
map_create.on('draw:created', function(e) { // map_create.on('draw:created', function(e) {
var type = e.layerType, // var type = e.layerType,
layer = e.layer; // layer = e.layer;
var lay = layer.addTo(map_create); // var lay = layer.addTo(map_create);
Poly = lay; // 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({ // $(document).on("click", "#create_save", function(e) {
url: "api/v1/create/", // var polygin = $('#poly_create').val();
data: { // var name_poly = $('#name_create').val();
'polygon': polygin, // var info_poly = $('#info_create').val();
'name': name_poly, // loaderPage(true);
'info': info_poly
}, // $.ajax({
dataType: 'json', // url: "api/v1/create/",
// data: {
success: function(data) { // 'polygon': polygin,
map.closePopup(); // 'name': name_poly,
loaderPage(false); // 'info': info_poly
} // },
}); // dataType: 'json',
});
// success: function(data) {
// map.closePopup();
// loaderPage(false);
// }
// });
// });
$(document).on("click", "#info", function() { $(document).on("click", "#info", function() {
document.getElementsByClassName('leaflet-popup-content')[0].style.width = "301px"; document.getElementsByClassName('leaflet-popup-content')[0].style.width = "301px";
......
static/js/scripts.js
View file @ 0809dfd0
...@@ -76,7 +76,19 @@ $("#button_hide").click(function() { ...@@ -76,7 +76,19 @@ $("#button_hide").click(function() {
$("#button_unhide").click(function() { $("#button_unhide").click(function() {
$("#thisFooter").css('display', 'block'); $("#thisFooter").css('display', 'block');
$("#button_unhide").css('display', 'none'); $("#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) { ...@@ -121,11 +133,11 @@ attributionControl.onAdd = function(map) {
map.addControl(attributionControl); map.addControl(attributionControl);
var zoomControl = L.control.zoom({ var zoomControl = L.control.zoom({
position: "topleft" position: "bottomright"
}).addTo(map); }).addTo(map);
var locateControl = L.control.locate({ var locateControl = L.control.locate({
position: "topleft", position: "bottomright",
drawCircle: false, drawCircle: false,
follow: true, follow: true,
setView: true, setView: true,
......
templates/includes/css-o.html
View file @ 0809dfd0
...@@ -2,9 +2,10 @@ ...@@ -2,9 +2,10 @@
.footer { .footer {
background: #ffffffa6; background: #ffffffa6;
position: fixed; position: fixed;
left: 0; left: 0px;
right: 0; right: 0px;
bottom: 0; bottom: 0;
width: 1000px;
height: 170px; height: 170px;
z-index: 999; z-index: 999;
} }
...@@ -94,11 +95,30 @@ ...@@ -94,11 +95,30 @@
width: 40px; width: 40px;
font-size: 10pt; font-size: 10pt;
font-family: tahoma; font-family: tahoma;
margin-bottom: 5px; right: 60px;
margin-right: 23px;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0;
z-index: 99999999; 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> </style>
\ No newline at end of file
templates/includes/js-o.html
View file @ 0809dfd0
...@@ -32,360 +32,417 @@ ...@@ -32,360 +32,417 @@
onEachFeature: function(feature, layer) { onEachFeature: function(feature, layer) {
layer.on({ layer.on({
click: function(e) { click: function(e) {
content = `<div class="modal-dialog modal-md"> content = `<thead style="text-align: center;">
<div class="modal-content"> <tr>
<div class="modal-header"> <th style="padding: 0 0 0 0px;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <img src="static/img/maps/bing.png" alt="Image" style="width: 100%;max-height: 237px;height:237"> </th>
<h4 class="modal-title">INFORMASI</h4> </tr>
</div> </thead>
<div class="modal-body" style:"padding:5px"> <tbody>
<div class="tabbable"> <tr style="height: 100px;">
<ul class="nav nav-tabs nav-tabs-bottom nav-justified"> <th>
<li class="active text-primary" id="feature-title"><a href="#left-tab1-feas-upl" data-toggle="tab" id="info">Informasi Administrasi</a></li> <div>
<li><a href="#right-tab2-feas-upl" data-toggle="tab" id="edit">Informasi Kependudukan</a></li> <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif;
<li><a href="#right-tab3-feas-upl" data-toggle="tab" id="edit">Inf. Pendidikan & Pekerjaan</a></li> letter-spacing: 0;
</ul> font-weight: 400;">
<div class="tab-content"> <span style="font-size: x-large;
<div class="tab-pane active" id="left-tab1-feas-upl" style="padding-bottom: 17px;"> font-family: ui-serif;">
<div style="margin-left:10px;"> ` + feature.administrasi.f2 + ` , ` + feature.administrasi.f3 + `, ` + feature.administrasi.f4 + `
<table> </span>
<tr>
<th>Kode Desa</th> </h1>
<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>
</div> </div>
</div> </th>
</div> </tr>
</div> <tr>
</div> <th>
</div>`; <label class="text-semibold" style="margin-left:10px">Informasi Umum</label>
$("#modal-kelurahan").modal("show"); <div>
$("#modal-kelurahan").html(content); <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) { 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; var layer = e.target;
layer.setStyle({ layer.setStyle({
weight: 0.5, weight: 0.5,
...@@ -777,18 +834,18 @@ ...@@ -777,18 +834,18 @@
layer.on({ layer.on({
click: function(e) { click: function(e) {
var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) { //var geogeo = geocodeService.reverse().latlng(e.latlng).run(function(error, result) {
var content = `<div class="tabbable"> var content = `<thead style="text-align: center;">
<ul class="nav nav-tabs nav-tabs-bottom nav-justified"> <tr>
<li class="active text-primary" id="feature-title"><a href="#right-tab2-feas-upl" data-toggle="tab">Information</a></li> <th style="padding: 0 0 0 0px;">
<li><a href="#right-tab3-feas-upl" data-toggle="tab" id="edit">Edit Buildings</a></li> <img src="static/img/maps/bing.png" alt="Image" style="width: 100%;max-height: 237px;height:237"> </th>
</ul> </tr>
</thead>
<div class="tab-content" style="margin-botttom:-40px"> <tbody>
<tr>
<th>
<div class="tab-pane active" id="right-tab2-feas-upl"> <label class="text-semibold" style="margin-left:10px">Informasi Umum</label>
<div style="width: 530px; margin-left:10px; padding-bottom:0px"> <div>
<table> <table>
<tr> <tr>
<th>Name</th> <th>Name</th>
...@@ -796,7 +853,7 @@ ...@@ -796,7 +853,7 @@
</tr> </tr>
<tr> <tr>
<th>Information</th> <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>
<tr> <tr>
<th>Kelurahan</th> <th>Kelurahan</th>
...@@ -815,27 +872,66 @@ ...@@ -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> <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> </tr>
</table> </table>
</div><br> </div>
<input id='buttondelete' class="btn btn-warning" type="submit" value="Delete" style="bottom:-60px;z-index:9;"> </th>
</tr>
</div> <tr>
<div class="tab-pane" id="right-tab3-feas-upl"> <th>
<div id="map-edit" style="width:500px;height: 250px;"> <div class="tab-pane" id="right-tab3-feas-upl">
</div><br> <div id="map-edit" style="width:500px;height: 250px;">
<input id='buttonsaveedit' class="btn btn-primary" type="submit" value="Save" style="bottom:-60px;z-index:9;"> </div>
<input id='buttondelete' class="btn btn-warning" type="submit" value="Delete" style="bottom:-60px;z-index:9;"> </th
</div> </tr>
<input type="text" name="coordinateZoneedit" class="hidden" id="coordinateZoneedit" value=""> </tbody>
<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>`;
`;
$("#isi_panel").html(content)
$("#feature-info").html(content);
if (error) {
return;
}
});
$('#id_poly').val(feature.properties.f1); $('#id_poly').val(feature.properties.f1);
$('#id_poly_edit').val(feature.properties.f1); $('#id_poly_edit').val(feature.properties.f1);
...@@ -855,7 +951,7 @@ ...@@ -855,7 +951,7 @@
$('#id_poly_delete').val(feature.properties.f1); $('#id_poly_delete').val(feature.properties.f1);
$("#coordinateZoneedit").val(feature.geometry); $("#coordinateZoneedit").val(feature.geometry);
$("#featureModal").modal("show"); $("#panel-samping").css("display", "block");
$("#button-ijo").html(` $("#button-ijo").html(`
<a class='btn btn-danger' href="#" id="delete_1">Delete</a> <a class='btn btn-danger' href="#" id="delete_1">Delete</a>
<a class='btn btn-warning' href="#" id='edit_1'>Edit</a> <a class='btn btn-warning' href="#" id='edit_1'>Edit</a>
...@@ -991,12 +1087,6 @@ ...@@ -991,12 +1087,6 @@
var hasil = (JSON.stringify(polyly.toGeoJSON())) var hasil = (JSON.stringify(polyly.toGeoJSON()))
$("#coordinateZoneedit").val(hasil); $("#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 @@ ...@@ -37,57 +37,121 @@
<!-- /main navbar --> <!-- /main navbar -->
<div>
</div>
<div class="fixed-plugin" style="position: absolute;z-index: 999;top: 60px;"> <div class="fixed-plugin" style="position: absolute;z-index: 999;top: 60px;">
<div class="dropdown show-dropdown"> <div class="dropdown show-dropdown">
<a href="#" data-toggle="dropdown"> <a href="#" data-toggle="dropdown">
<i class="fa fa-cog fa-2x"> </i> <i class="fa fa-cog fa-2x"> </i>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu" style="left: -700!important;">
<li class="header-title"> Sidebar Filters</li> <li class="header-title"> Sidebar Filters</li>
<li class="adjustments-line"> <div class="dropdown-content-body">
<a href="javascript:void(0)" class="switch-trigger active-color"> <div class="row text-center">
<div class="badge-colors ml-auto mr-auto"> <div class="col-md-3">
<span class="badge filter badge-purple" data-color="purple"></span> <ul class="menu-list">
<span class="badge filter badge-azure" data-color="azure"></span> <li>
<span class="badge filter badge-green" data-color="green"></span> <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="OpenStreetMap">
<span class="badge filter badge-warning" data-color="orange"></span> <img src="{% static 'img/maps/osm.PNG' %}" alt="" style="max-width: 180px; max-height:180px;">
<span class="badge filter badge-danger" data-color="danger"></span> <span class="menu-heading">
<span class="badge filter badge-rose active" data-color="rose"></span> &nbsp;&nbsp;Google Street</span>
</a>
</li>
</ul>
</div> </div>
<div class="clearfix"></div> <div class="col-md-3 align-center">
</a> <ul class="menu-list">
</li> <li>
<li class="header-title">Images</li> <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="WorldImagery">
<li class="active"> <img src="{% static 'img/maps/esri.png' %}" alt="" style="max-width: 180px; max-height:180px;">
<a class="img-holder switch-trigger" href="javascript:void(0)"> <span class="menu-heading">
<img src="/static/img/sidebar-1.jpg" alt=""> &nbsp;&nbsp;World Imagery</span>
</a> </a>
</li> </li>
<li> </ul>
<a class="img-holder switch-trigger" href="javascript:void(0)"> </div>
<img src="/static/img/sidebar-2.jpg" alt=""> <div class="col-md-3">
</a> <ul class="menu-list">
</li> <li>
<li> <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="BingSatellite">
<a class="img-holder switch-trigger" href="javascript:void(0)"> <img src="{% static 'img/maps/bing.png' %}" alt="" style="max-width: 180px; max-height:180px;">
<img src="/static/img/sidebar-3.jpg" alt=""> <span class="menu-heading">
</a> &nbsp;&nbsp;Bing Satellite</span>
</li> </a>
<li> </li>
<a class="img-holder switch-trigger" href="javascript:void(0)"> </ul>
<img src="/static/img/sidebar-4.jpg" alt=""> </div>
</a> <div class="col-md-3">
</li> <ul class="menu-list">
<li class="button-container"> <li>
<a target="_blank" rel="noopener noreferrer" href="https://appseed.us/admin-dashboards" class="btn btn-default btn-block"> <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="GoogleSatellite">
More Templates <img src="{% static 'img/maps/esri.png' %}" alt="" style="max-width: 180px; max-height:180px;">
</a> <span class="menu-heading">
</li> &nbsp;&nbsp;Google Satellite</span>
<li class="button-container"> </a>
<a target="_blank" rel="noopener noreferrer" href="https://appseed.us" class="btn btn-primary btn-block"> </li>
AppSeed </ul>
</a> </div>
</li> <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> </ul>
</div> </div>
</div> </div>
...@@ -100,52 +164,159 @@ ...@@ -100,52 +164,159 @@
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
width: auto;"> </i> width: auto;"> </i>
</a> </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="header-title"> Sidebar Filters</li>
<li class="adjustments-line"> <!-- <div id="sidebar" onmouseleave="overll()">
<a href="javascript:void(0)" class="switch-trigger active-color"> <div class="sidebar-wrapper">
<div class="badge-colors ml-auto mr-auto"> <div class="panel panel-default" id="features">
<span class="badge filter badge-purple" data-color="purple"></span> <div class="panel-body"> -->
<span class="badge filter badge-azure" data-color="azure"></span> <div class="row">
<span class="badge filter badge-green" data-color="green"></span> <div class="col-md-6">
<span class="badge filter badge-warning" data-color="orange"></span>
<span class="badge filter badge-danger" data-color="danger"></span> <div class="checkbox">
<span class="badge filter badge-rose active" data-color="rose"></span> <label>
<input type="checkbox" id="geo_tuplah" onclick="geotuplah()" style="margin-top:2px;">
lahan
</label>
</div> </div>
<div class="clearfix"></div> <div class="checkbox">
</a> <label>
</li> <input type="checkbox" id="geo_building" onclick="geobangunan()" style="margin-top:2px;">
<li class="header-title">Images</li> Bangunan
<li class="active"> </label>
<a class="img-holder switch-trigger" href="javascript:void(0)"> </div>
<img src="/static/img/sidebar-1.jpg" alt="">
</a> <div class="checkbox">
</li> <label>
<li> <input type="checkbox" id="geo_jalan" onclick="geojalan()" style="margin-top:2px;">
<a class="img-holder switch-trigger" href="javascript:void(0)"> Jalan
<img src="/static/img/sidebar-2.jpg" alt=""> </label>
</a> </div>
</li>
<li> <div class="checkbox">
<a class="img-holder switch-trigger" href="javascript:void(0)"> <label>
<img src="/static/img/sidebar-3.jpg" alt=""> <input type="checkbox" id="geo_sungai" onclick="geosungai()" style="margin-top:2px;">
</a> Sungai
</li> </label>
<li> </div>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="/static/img/sidebar-4.jpg" alt=""> </div>
</a> <div class="col-md-6">
</li> <ul id="myUL">
<li class="button-container"> <li>
<a target="_blank" rel="noopener noreferrer" href="https://appseed.us/admin-dashboards" class="btn btn-default btn-block"> <div class="ceret">
More Templates <label>
</a> <input type="checkbox" id="batas_all" onclick="batasall()" style="margin-top:2px;">
</li> Batas Teritori
<li class="button-container"> </label>
<a target="_blank" rel="noopener noreferrer" href="https://appseed.us" class="btn btn-primary btn-block"> </div>
AppSeed <ul class="nasted">
</a> <div class="checkbox">
</li> <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> </ul>
</div> </div>
</div> </div>
......
templates/includes/o.html
View file @ 0809dfd0
...@@ -230,14 +230,15 @@ ...@@ -230,14 +230,15 @@
</div> </div>
</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="infoLongitude">
<input type="hidden" id="infoLatitude"> <input type="hidden" id="infoLatitude">
<input type="hidden" id="infoLimitx"> <input type="hidden" id="infoLimitx">
<div> <div>
<a href="#" class="btn btn-default" id="button_hide"><span class="caret" style="margin-left: -5px;"></span></a> <a href="#" class="btn btn-default" id="button_hide"><span class="caret" style="margin-left: -5px;"></span></a>
</div> </div>
<div class="row"> <div class="row" id="info-footer">
<div class="col-xs-12"> <div class="col-xs-12">
...@@ -350,9 +351,9 @@ ...@@ -350,9 +351,9 @@
</div> </div>
</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> <i><b>
Sumber : DUKCAPIL, Desember 2019 Sumber : DUKCAPIL, 2019
</b></i> </b></i>
</div> </div>
......
templates/layout/base.html
View file @ 0809dfd0
...@@ -91,9 +91,10 @@ ...@@ -91,9 +91,10 @@
.sidebar-table { .sidebar-table {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 60px; top: -20px;
bottom: 0px; bottom: -485px;
overflow: auto; overflow: auto;
background-color: white;
} }
.page_loader { .page_loader {
...@@ -147,6 +148,26 @@ ...@@ -147,6 +148,26 @@
.leaflet-control-attribution { .leaflet-control-attribution {
display: none; 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> </style>
{% include 'includes/css-o.html' %} {% include 'includes/css-m.html' %} {% include 'includes/css-o.html' %} {% include 'includes/css-m.html' %}
...@@ -175,171 +196,77 @@ ...@@ -175,171 +196,77 @@
<link href="{% static 'css/colors.css' %}" rel="stylesheet" type="text/css"> <link href="{% static 'css/colors.css' %}" rel="stylesheet" type="text/css">
<script src="{% static 'js/Leaflet.Editables.js' %}"></script> <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> </head>
<body> <body>
{% include 'includes/navbar.html' %} {% 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-table">
<div class="sidebar-wrapper"> <table class="table table-hover tasks-list" id="isi_panel">
<div class="panel panel-default" id="features">
<div class="panel-body"> <!-- panel samping js disini -->
<div class="row">
<div class="col-md-6"> </table>
<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> </div>
</div> </div>
</div> </div>
</div> </div>
{% endblock content %}
<div id="map"></div>
</div> </div>
...@@ -399,9 +326,6 @@ ...@@ -399,9 +326,6 @@
<script src="{% static 'js/scripts.js' %}"></script> <script src="{% static 'js/scripts.js' %}"></script>
</body> </body>
</html> </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