var map = L.map('map', { editable: true, zoomControl: false, drawControl: true }).setView([-4.117012285203445, 104.0673065185547], 10); var pool = []; var BaseMap = document.getElementById("BaseMap"); var OpenStreetMap = document.getElementById("OpenStreetMap"); var WorldImagery = document.getElementById("WorldImagery"); var BingSatellite = document.getElementById("BingSatellite"); var GoogleSatellite = document.getElementById("GoogleSatellite"); var BING_KEY = 'Anj9XBZaRShAMdbXJlZ16iqEVpjikY1eY_dzqGl451WYkSKV3l_FJaFgMbhwdbLz' loaderPage(false); function loaderPage(stat) { if (stat == true) { $('.page_loader').show(); } else { $('.page_loader').hide(); } }; $("#sidebar").hide() //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 // maps = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { id: 'mapbox/light-v9', tileSize: 512, zoomOffset: -1 }).addTo(map); maps = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 22, minZoom: 3, // tileSize: 512, zoomOffset: -1 }).addTo(map); // BaseMap.onclick = function() { // map.removeLayer(maps) // //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", { // maps = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',{ // id: 'mapbox/light-v9', // tileSize: 512, // zoomOffset: -1 // }).addTo(map); // }; OpenStreetMap.onclick = function() { map.removeLayer(maps) // maps = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { // id: 'mapbox/light-v9', // tileSize: 512, zoomOffset: -1 // }).addTo(map); //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", { maps = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 22, minZoom: 3, }).addTo(map); }; WorldImagery.onclick = function() { map.removeLayer(maps) // https://{s}.tiles.wmflabs.org/osm-no-labels/{z}/{x}/{y}.png // maps = L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", { // maxZoom: 22, // minZoom: 3, // }).addTo(map); maps = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { id: 'mapbox/light-v9', tileSize: 512, zoomOffset: -1 }).addTo(map); }; BingSatellite.onclick = function() { map.removeLayer(maps) maps = L.tileLayer.bing({ bingMapsKey: BING_KEY, maxNativeZoom: 22 }).addTo(map); setTimeout(function() { $('.leaflet-bottom.leaflet-right>.leaflet-control-attribution.leaflet-control').html(`Powered by <a href="https://khansia.co.id" target="_blank">Khansia</a> with <a href="https://leafletjs.com" target="_blank">Leaflet</a>`) }, 100); }; GoogleSatellite.onclick = function() { map.removeLayer(maps) maps = L.tileLayer('http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}&s=Gal&apistyle=s.t:0|s.e:l|p.v:off', { maxZoom: 22, minZoom: 4, }).addTo(map); }; $('#createPolygonTools').click(function() { polygonDrawer.enable(); }); var Marker = {}; var Poly = {}; var request = new XMLHttpRequest(); request.open("GET", "../static/batas.json", false); request.send(null) var batas = JSON.parse(request.responseText); // console.log(batas); var geo_batas = L.geoJson(batas, { style: function(feature) { return { color: "#000000", weight: 1, opacity: 1, fillcolor: "#FFFFFF", fillOpacity: 0.1 }; }, onEachFeature: function(feature, layer) { 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_batas.resetStyle(e.target); } }); } }).addTo(map); map.on(L.Draw.Event.CREATED, function(e) { var layer = e.layer; $("#coordinateZone").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; $("#coordinateZone").val(JSON.stringify(kordinat)); }); polygon_options = { showArea: false, shapeOptions: { stroke: true, color: '#6e83f0', weight: 4, opacity: 0.5, fill: true, fillColor: null, //same as color by default fillOpacity: 0.2, clickable: true } } var polygonDrawer = new L.Draw.Polygon(map, polygon_options); polygonDrawer.on("click", function(event) { shapecoords.innerHTML = event.latlng.toString(); map.fire("click", event); // Trigger a map click as well. }); map.on('draw:created', function(e) { var type = e.layerType, layer = e.layer; // Do whatever you want with the layer. // e.type will be the type of layer that has been draw (polyline, marker, polygon, rectangle, circle) // E.g. add it to the map var lay = layer.addTo(map); Poly = lay; $("#PolygonModal").modal({ backdrop: 'static', keyboard: false }); }); function cheakDFeas(e) { $('#latM').val(); $('#lonM').val(); $("#PointModal").modal(); // Add marker to map at click location; add popup window var newMarker = new L.marker(e.latlng).addTo(map); Marker = newMarker; $('#latM').val(e.latlng.lat); $('#lonM').val(e.latlng.lng); } $('#createRadius').click(function() { map.on('click', cheakDFeas); }) $("#closeP").click(function() { map.removeLayer(Poly); }); $("#closeR").click(function() { map.removeLayer(Marker); map.off('click', cheakDFeas); }); var results = L.layerGroup().addTo(map); // listen for the results event and add every result to the map $('#GetAddress').click(function() { $("#AddressModal").modal("show"); }); $("#id_provinsi ").change(function() { var prov_val = $(this).val(); $.ajax({ url: 'ajax/administrasi/', data: { 'prov_val': prov_val }, dataType: 'json', success: function(data) { var data_all_kab = [] for (var i = 0; i < data['kab_res'].length; i++) { var data_k = data['kab_res'][i]; var data_kab = `<option value="` + data_k + `">` + data_k + `</option>`; data_all_kab.push(data_kab) }; $('#id_kab').html(`<option>Select Kabupaten</option>` + data_all_kab); $('#polypro').val(data['nama_pro']); } }); }); $("#id_kab").change(function() { var kab_val = $(this).val(); var nama_pro = $('#polypro').val(); loaderPage(true); $.ajax({ url: 'ajax/kabupaten/', data: { 'kab_val': kab_val, 'prov_val': nama_pro }, dataType: 'json', success: function(data) { loaderPage(false); var data_all_kab = [] for (var i = 0; i < data['nama_kec'].length; i++) { var data_k = data['nama_kec'][i]; var data_kab = `<option value="` + data_k + `">` + data_k + `</option>`; data_all_kab.push(data_kab) }; $('#id_kec').html(`<option>Select Kecamatan</option>` + data_all_kab); $('#polykab').val(data['nama_kab']); $('#polypro').val(data['nama_pro']); } }); }); // 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>: ` + feature.properties.f1 + `</td> // </tr> // <tr> // <th>Name</th> // <td>: ` + feature.properties.f2 + `</td> // </tr> // <tr> // <th>Information</th> // <td>: ` + feature.properties.f3 + `</td> // </tr> // <tr> // <th>Kelurahan</th> // <td>: ` + feature.administrasi.f1 + `</td> // </tr> // <tr> // <th>Kecamatan</th> // <td>: ` + feature.administrasi.f2 + `</td> // </tr> // <tr> // <th>Kab/Kota</th> // <td>: ` + feature.administrasi.f3 + `</td> // </tr> // <tr> // <th>Provinsi</th> // <td>: ` + 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>: ` + feature.properties.f1 + `</td> // </tr> // <tr> // <th>Name</th> // <td>: ` + feature.properties.f2 + `</td> // </tr> // <tr> // <th>Information</th> // <td>: ` + feature.properties.f3 + `</td> // </tr> // <tr> // <th>Kelurahan</th> // <td>: ` + feature.administrasi.f1 + `</td> // </tr> // <tr> // <th>Kecamatan</th> // <td>: ` + feature.administrasi.f2 + `</td> // </tr> // <tr> // <th>Kab/Kota</th> // <td>: ` + feature.administrasi.f3 + `</td> // </tr> // <tr> // <th>Provinsi</th> // <td>: ` + 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") // }); $.ajaxSetup({ headers: { 'Csrf-Token': $('meta[name="csrf-token"]').attr('content') } }); jQuery(document).ajaxSend(function(event, xhr, settings) { function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } function sameOrigin(url) { // url could be relative or scheme relative or absolute var host = document.location.host; // host + port var protocol = document.location.protocol; var sr_origin = '//' + host; var origin = protocol + sr_origin; // Allow absolute or scheme relative URLs to same origin return (url == origin || url.slice(0, origin.length + 1) == origin + '/') || (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') || // or any other URL that isn't scheme relative or absolute i.e relative. !(/^(\/\/|http:|https:).*/.test(url)); } function safeMethod(method) { return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); } if (!safeMethod(settings.type) && sameOrigin(settings.url)) { xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken')); } }); // 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", "#info", function() { document.getElementsByClassName('leaflet-popup-content')[0].style.width = "301px"; document.getElementsByClassName('leaflet-popup')[0].style.left = "-171px"; }); var geo_jln = L.geoJson(null, { style: function(feature) { return { color: "#fcba03", weight: 5, opacity: 2, fillcolor: "#fcba03", fillOpacity: 0 }; }, onEachFeature: function(feature, layer) { layer.on({ mouseover: function(e) { var layer = e.target; layer.setStyle({ weight: 5, Color: "#067800", fillColor: "#067800", }); if (!L.Browser.ie && !L.Browser.opera) { layer.bringToFront(); } }, mouseout: function(e) { geo_jln.resetStyle(e.target); } }); var popupContent = feature.properties.f2; layer.bindTooltip(popupContent); layer.bindPopup(popupContent); } }).addTo(map); function geo_json_jln(data) { geo_jln.addData(data) } function geo_json_build_osm(data) { geo_build_osm.addData(data) } function geo_json_build_gen(data) { geo_build_gen.addData(data) } $("#id_kec").change(function() { var kec_val = $(this).val(); var kab_val = $('#polykab').val(); var pro_val = $('#polypro').val(); loaderPage(true); $.ajax({ url: 'ajax/kecamatan/', data: { 'kec_val': kec_val, 'kab_val': kab_val, 'pro_val': pro_val }, dataType: 'json', success: function(data) { loaderPage(false); var data_all_kab = [] for (var i = 0; i < data['nama_desa'].length; i++) { var data_k = data['nama_desa'][i]; var data_kab = `<option value="` + data_k + `">` + data_k + `</option>`; data_all_kab.push(data_kab) }; $('#id_desa').html(`<option>Select Desa/Kelurahan</option>` + data_all_kab); $('#polykab').val(data['nama_kab']); $('#polypro').val(data['nama_pro']); $('#polykec').val(data['nama_kec']); } }); }); $(document).on('click', 'li', function() { $('#provinsi').val($(this).text()); $('#provinsiList').fadeOut(); });