1var error_message = ""; 2var sebutan_dusun; 3var layers = {}; 4 5function set_marker(marker, daftar_path, judul, nama_wil, favico_desa) { 6 var daftar = JSON.parse(daftar_path); 7 var jml = daftar.length; 8 var jml_path; 9 for (var x = 0; x < jml; x++) { 10 if (daftar[x].path) { 11 daftar[x].path = JSON.parse(daftar[x].path); 12 jml_path = daftar[x].path[0].length; 13 if (isValidPolygonPath(daftar[x].path)) { 14 for (var y = 0; y < jml_path; y++) { 15 daftar[x].path[0][y].reverse(); 16 } 17 18 var label = L.tooltip({ 19 permanent: true, 20 direction: "center", 21 className: "text", 22 }).setContent(judul + " " + daftar[x][nama_wil]); 23 24 var point_style = { 25 iconSize: [1, 1], 26 iconAnchor: [0.5, 0.5], 27 labelAnchor: [0.3, 0], 28 iconUrl: favico_desa, 29 }; 30 31 var marker_style = { 32 stroke: true, 33 color: daftar[x].border ?? "#FFFFFF", 34 opacity: 1, 35 weight: 3, 36 fillColor: daftar[x].warna ?? "#FFFFFF", 37 fillOpacity: 1, 38 dashArray: 4, 39 }; 40 41 daftar[x].path[0].push(daftar[x].path[0][0]); 42 if (daftar[x].lng) { 43 marker.push( 44 turf.point([daftar[x].lng, daftar[x].lat], { 45 content: label, 46 style: L.icon(point_style), 47 }) 48 ); 49 } 50 marker.push( 51 turf.polygon(daftar[x].path, { 52 content: daftar[x][nama_wil], 53 style: marker_style, 54 }) 55 ); 56 } else { 57 error_message += message( 58 null, 59 daftar[x].dusun, 60 daftar[x].rw, 61 daftar[x].rt 62 ); 63 } 64 } 65 } 66} 67 68function set_marker_multi(marker, daftar_path, judul, nama_wil, favico_desa) { 69 if (nama_wil == "dusun") { 70 sebutan_dusun = judul; 71 } 72 73 var daftar = JSON.parse(daftar_path); 74 var jml = daftar.length; 75 var jml_path; 76 for (var x = 0; x < jml; x++) { 77 if (daftar[x].path) { 78 daftar[x].path = JSON.parse(daftar[x].path); 79 var jml_path_x = daftar[x].path.length; 80 if (isValidMultiPolygonPath(daftar[x].path)) { 81 for (var a = 0; a < jml_path_x; a++) { 82 for (var b = 0; b < daftar[x].path[a].length; b++) { 83 jml_path = daftar[x].path[a][0].length; 84 for (var z = 0; z < jml_path; z++) { 85 daftar[x].path[a][0][z].reverse(); 86 } 87 88 var label = L.tooltip({ 89 permanent: true, 90 direction: "center", 91 className: "text", 92 }).setContent(judul + " " + daftar[x][nama_wil]); 93 94 var point_style = { 95 iconSize: [1, 1], 96 iconAnchor: [0.5, 0.5], 97 labelAnchor: [0.3, 0], 98 iconUrl: favico_desa, 99 }; 100 101 var marker_style = { 102 stroke: true, 103 color: daftar[x].border ?? "#FFFFFF", 104 opacity: 1, 105 weight: 3, 106 fillColor: daftar[x].warna ?? "#FFFFFF", 107 fillOpacity: 1, 108 dashArray: 4, 109 }; 110 111 daftar[x].path[a][0].push(daftar[x].path[a][0][0]); 112 113 if (daftar[x].lng) { 114 marker.push( 115 turf.point([daftar[x].lng, daftar[x].lat], { 116 content: label, 117 style: L.icon(point_style), 118 }) 119 ); 120 } 121 122 marker.push( 123 turf.polygon(daftar[x].path[a], { 124 content: daftar[x][nama_wil], 125 style: marker_style, 126 }) 127 ); 128 } 129 } 130 } else { 131 error_message += message( 132 null, 133 daftar[x].dusun, 134 daftar[x].rw, 135 daftar[x].rt 136 ); 137 } 138 } 139 } 140} 141 142function set_marker_desa(marker_desa, desa, judul, favico_desa) { 143 var daerah_desa = JSON.parse(desa["path"]); 144 var jml = daerah_desa.length; 145 146 if (isValidMultiPolygonPath(daerah_desa) || isValidPolygonPath(daerah_desa)) { 147 var style_polygon = { 148 stroke: true, 149 color: "#de2d26", 150 opacity: 1, 151 weight: 3, 152 fillColor: desa["warna"], 153 fillOpacity: 0.8, 154 dashArray: 4, 155 }; 156 157 var point_style = stylePointLogo(favico_desa); 158 if (desa["lng"]) { 159 marker_desa.push( 160 turf.point([desa["lng"], desa["lat"]], { 161 content: desa, 162 style: L.icon(point_style), 163 }) 164 ); 165 } 166 167 for (var x = 0; x < jml; x++) { 168 for (var i = 0; i < daerah_desa[x][0].length; i++) { 169 daerah_desa[x][0][i].reverse(); 170 } 171 daerah_desa[x][0].push(daerah_desa[x][0][0]); 172 marker_desa.push( 173 turf.polygon(daerah_desa[x], { content: desa, style: style_polygon }) 174 ); 175 } 176 } else { 177 error_message += message(judul); 178 } 179} 180 181function set_marker_desa_content( 182 marker_desa, 183 desa, 184 judul, 185 favico_desa, 186 contents 187) { 188 var daerah_desa = JSON.parse(desa["path"]); 189 var jml = daerah_desa.length; 190 content = $(contents).html(); 191 var style_polygon = { 192 stroke: true, 193 color: "#de2d26", 194 opacity: 1, 195 weight: 3, 196 fillColor: desa["warna"], 197 fillOpacity: 0.8, 198 dashArray: 4, 199 }; 200 201 var point_style = stylePointLogo(favico_desa); 202 if (desa["lng"]) { 203 marker_desa.push( 204 turf.point([desa["lng"], desa["lat"]], { 205 name: "kantor_desa", 206 content: "Kantor Desa", 207 style: L.icon(point_style), 208 }) 209 ); 210 } 211 212 for (var x = 0; x < jml; x++) { 213 for (var i = 0; i < daerah_desa[x][0].length; i++) { 214 daerah_desa[x][0][i].reverse(); 215 } 216 daerah_desa[x][0].push(daerah_desa[x][0][0]); 217 marker_desa.push( 218 turf.polygon(daerah_desa[x], { content: content, style: style_polygon }) 219 ); 220 } 221} 222 223function set_marker_persil_content( 224 marker, 225 daftar_path, 226 judul, 227 nama_wil, 228 contents, 229 favico_desa 230) { 231 var daftar = daftar_path == "null" ? new Array() : JSON.parse(daftar_path); 232 var jml = daftar.length; 233 var jml_path; 234 235 for (var x = 0; x < jml; x++) { 236 if (daftar[x].path) { 237 var data = daftar[x]; 238 daftar[x].path = JSON.parse(daftar[x].path); 239 jml_path = daftar[x].path[0].length; 240 for (var y = 0; y < jml_path; y++) { 241 daftar[x].path[0][y].reverse(); 242 } 243 244 content = ` 245 <div class="persil"> 246 <h4>Leter C-Desa </h4> 247 <h4><b>Nomor ${data.nomor}</b> </h4> 248 <hr> 249 <table> 250 <tbody> 251 <tr> 252 <td>Nama Pemilik Tanah </td> 253 <td> : </td> 254 <td> ${data.nama_kepemilikan} </td> 255 </tr> 256 <tr> 257 <td>Kelas Tanah</td> 258 <td> : </td> 259 <td> ${data.kode} </td> 260 </tr> 261 <tr> 262 <td>Lokasi</td> 263 <td> : </td> 264 <td> ${data.alamat} </td> 265 </tr> 266 </tbody></table> 267 </div> 268 `; 269 var label = L.tooltip({ 270 permanent: true, 271 direction: "center", 272 className: "text", 273 }).setContent(judul + " " + daftar[x][nama_wil]); 274 275 var point_style = { 276 iconSize: [1, 1], 277 iconAnchor: [0.5, 0.5], 278 labelAnchor: [0.3, 0], 279 iconUrl: favico_desa, 280 }; 281 282 var marker_style = { 283 stroke: true, 284 color: daftar[x].border ?? "#FFFFFF", 285 opacity: 1, 286 weight: 3, 287 fillColor: daftar[x].warna ?? "#FFFFFF", 288 fillOpacity: 1, 289 dashArray: 4, 290 }; 291 daftar[x].path[0].push(daftar[x].path[0][0]); 292 marker.push( 293 turf.polygon(daftar[x].path, { 294 name: judul, 295 content: content, 296 style: marker_style, 297 }) 298 ); 299 } 300 } 301} 302 303function set_marker_content( 304 marker, 305 daftar_path, 306 judul, 307 nama_wil, 308 contents, 309 favico_desa 310) { 311 var daftar = JSON.parse(daftar_path); 312 var jml = daftar.length; 313 var jml_path; 314 for (var x = 0; x < jml; x++) { 315 if (daftar[x].path) { 316 daftar[x].path = JSON.parse(daftar[x].path); 317 jml_path = daftar[x].path[0].length; 318 for (var y = 0; y < jml_path; y++) { 319 daftar[x].path[0][y].reverse(); 320 } 321 322 content = $(contents + x).html(); 323 var label = L.tooltip({ 324 permanent: true, 325 direction: "center", 326 className: "text", 327 }).setContent(judul + " " + daftar[x][nama_wil]); 328 329 var point_style = { 330 iconSize: [1, 1], 331 iconAnchor: [0.5, 0.5], 332 labelAnchor: [0.3, 0], 333 iconUrl: favico_desa, 334 }; 335 336 var marker_style = { 337 stroke: true, 338 color: daftar[x].border ?? "#FFFFFF", 339 opacity: 1, 340 weight: 3, 341 fillColor: daftar[x].warna ?? "#FFFFFF", 342 fillOpacity: 1, 343 dashArray: 4, 344 }; 345 346 daftar[x].path[0].push(daftar[x].path[0][0]); 347 if (daftar[x].lng) { 348 marker.push( 349 turf.point([daftar[x].lng, daftar[x].lat], { 350 content: label, 351 style: L.icon(point_style), 352 }) 353 ); 354 } 355 marker.push( 356 turf.polygon(daftar[x].path, { 357 name: judul, 358 content: content, 359 style: marker_style, 360 }) 361 ); 362 } 363 } 364} 365 366function set_marker_multi_content( 367 marker, 368 daftar_path, 369 judul, 370 nama_wil, 371 contents, 372 favico_desa 373) { 374 var daftar = JSON.parse(daftar_path); 375 var jml = daftar.length; 376 var jml_path; 377 for (var x = 0; x < jml; x++) { 378 if (daftar[x].path) { 379 daftar[x].path = JSON.parse(daftar[x].path); 380 var jml_path_x = daftar[x].path.length; 381 for (var a = 0; a < jml_path_x; a++) { 382 for (var b = 0; b < daftar[x].path[a].length; b++) { 383 jml_path = daftar[x].path[a][0].length; 384 for (var z = 0; z < jml_path; z++) { 385 daftar[x].path[a][0][z].reverse(); 386 } 387 388 content = $(contents + x).html(); 389 var label = L.tooltip({ 390 permanent: true, 391 direction: "center", 392 className: "text", 393 }).setContent(judul + " " + daftar[x][nama_wil]); 394 395 var point_style = { 396 iconSize: [1, 1], 397 iconAnchor: [0.5, 0.5], 398 labelAnchor: [0.3, 0], 399 iconUrl: favico_desa, 400 }; 401 402 var marker_style = { 403 stroke: true, 404 color: daftar[x].border ?? "#FFFFFF", 405 opacity: 1, 406 weight: 3, 407 fillColor: daftar[x].warna ?? "#FFFFFF", 408 fillOpacity: 1, 409 dashArray: 4, 410 }; 411 412 daftar[x].path[a][0].push(daftar[x].path[a][0][0]); 413 414 if (daftar[x].lng) { 415 marker.push( 416 turf.point([daftar[x].lng, daftar[x].lat], { 417 content: label, 418 style: L.icon(point_style), 419 }) 420 ); 421 } 422 marker.push( 423 turf.polygon(daftar[x].path[a], { 424 name: judul, 425 content: content, 426 style: marker_style, 427 }) 428 ); 429 } 430 } 431 } 432 } 433} 434 435function getBaseLayers(peta, access_token, jenis_peta) { 436 var isValid = validateTokenMapbox(access_token); 437 438 var defaultLayer = L.tileLayer.provider("OpenStreetMap.Mapnik", { 439 attribution: 440 '<a href="https://openstreetmap.org/copyright">© OpenStreetMap</a> | <a href="https://github.com/OpenSID/OpenSID">OpenSID</a>', 441 }); 442 443 var OpenStreetMap = L.tileLayer.provider("OpenStreetMap.HOT", { 444 attribution: 445 '<a href="https://openstreetmap.org/copyright">© OpenStreetMap</a> | <a href="https://github.com/OpenSID/OpenSID">OpenSID</a>', 446 }); 447
448 let mbGLstr, mbGLsat, mbGLstrsat; 449 let baseLayers; 450 451 if (isValid && access_token) { 452 mbGLstr = L.mapboxGL({ 453 accessToken: access_token, 454 style: "mapbox://styles/mapbox/streets-v11", 455 attribution: 456 '<a href="https://www.mapbox.com/about/maps">© Mapbox</a> | <a href="https://github.com/OpenSID/OpenSID">OpenSID</a>', 457 }); 458 459 mbGLsat = L.mapboxGL({ 460 accessToken: access_token, 461 style: "mapbox://styles/mapbox/satellite-v9", 462 attribution: 463 '<a href="https://www.mapbox.com/about/maps">© Mapbox</a> | <a href="https://github.com/OpenSID/OpenSID">OpenSID</a>', 464 }); 465 466 mbGLstrsat = L.mapboxGL({ 467 accessToken: access_token, 468 style: "mapbox://styles/mapbox/satellite-streets-v11", 469 attribution: 470 '<a href="https://www.mapbox.com/about/maps">© Mapbox</a> | <a href="https://github.com/OpenSID/OpenSID">OpenSID</a>', 471 }); 472 473 baseLayers = { 474 OpenStreetMap: defaultLayer, 475 "OpenStreetMap H.O.T.": OpenStreetMap, 476 "Mapbox Streets": mbGLstr, 477 "Mapbox Satellite": mbGLsat, 478 "Mapbox Satellite-Street": mbGLstrsat, 479 }; 480 } else { 481 if (typeof Swal !== "undefined" && typeof Swal.fire === "function") { 482 Swal.fire({ 483 toast: true, 484 position: "top-end", 485 icon: "warning", 486 title: "Token Mapbox Tidak Valid", 487 text: "Peta akan menggunakan OpenStreetMap",
488 showConfirmButton: false, 489 timer: 5000, 490 timerProgressBar: true, 491 }); 492 } 493 494 mbGLstr = L.tileLayer.provider("OpenStreetMap.Mapnik", { 495 attribution: 496 '<a href="https://openstreetmap.org/copyright">© OpenStreetMap</a> | <a href="https://github.com/OpenSID/OpenSID">OpenSID</a>', 497 }); 498 mbGLsat = L.tileLayer.provider("OpenStreetMap.Mapnik", { 499 attribution: 500 '<a href="https://openstreetmap.org/copyright">© OpenStreetMap</a> | <a href="https://github.com/OpenSID/OpenSID">OpenSID</a>', 501 }); 502 mbGLstrsat = L.tileLayer.provider("OpenStreetMap.Mapnik", { 503 attribution: 504 '<a href="https://openstreetmap.org/copyright">© OpenStreetMap</a> | <a href="https://github.com/OpenSID/OpenSID">OpenSID</a>', 505 }); 506 507 baseLayers = { 508 OpenStreetMap: defaultLayer, 509 "OpenStreetMap H.O.T.": OpenStreetMap, 510 }; 511 } 512 513 switch (jenis_peta) { 514 case "1": 515 defaultLayer.addTo(peta); 516 break; 517 case "2": 518 OpenStreetMap.addTo(peta); 519 break; 520 case "3": 521 mbGLstr.addTo(peta); 522 break; 523 case "4": 524 mbGLsat.addTo(peta); 525 break; 526 default: 527 mbGLstrsat.addTo(peta); 528 } 529 530 return baseLayers; 531} 532 533function validateTokenMapbox(access_token) { 534 var isValid = false; 535 536 $.ajax({ 537 url: `https://api.mapbox.com/styles/v1/mapbox/streets-v11?access_token=${access_token}`, 538 type: 'GET', 539 async: false, 540 success: function (response) { 541 isValid = true; // Token is valid 542 }, 543 error: function (xhr, status, error) { 544 console.error("Error validating token:", error); 545 } 546 }); 547 548 return isValid; 549} 550 551function wilayah_property(set_marker, set_content = false, tampil_luas = 0) { 552 const showMeasurements = tampil_luas === "1" ? true : false; 553 554 const wilayah_property = L.geoJSON(turf.featureCollection(set_marker), { 555 pmIgnore: true, 556 showMeasurements: showMeasurements, 557 measurementOptions: { 558 showSegmentLength: false, 559 }, 560 onEachFeature: function (feature, layer) { 561 if (feature.properties.name === "kantor_desa") { 562 layer.bindPopup(feature.properties.content, { 563 className: "kantor_desa", 564 }); 565 } else if (set_content === true) { 566 layer.bindPopup(feature.properties.content); 567 } 568 layer.bindTooltip(feature.properties.content, { 569 sticky: true, 570 direction: "top", 571 }); 572 feature.properties.style; 573 }, 574 style: function (feature) { 575 if (feature.properties.style) { 576 return feature.properties.style; 577 } 578 }, 579 pointToLayer: function (feature, latlng) { 580 if (feature.properties.style) { 581 return L.marker(latlng, { icon: feature.properties.style }); 582 } else { 583 return L.marker(latlng); 584 } 585 }, 586 }); 587 588 return wilayah_property; 589} 590 591 592function overlayWil( 593 marker_desa, 594 marker_dusun, 595 marker_rw, 596 marker_rt, 597 sebutan_desa, 598 sebutan_dusun, 599 set_content = false, 600 tampil_luas 601) { 602 var poligon_wil_desa = wilayah_property(marker_desa, set_content, tampil_luas); 603 var poligon_wil_dusun = wilayah_property(marker_dusun, set_content, tampil_luas); 604 var poligon_wil_rw = wilayah_property(marker_rw, set_content, tampil_luas); 605 var poligon_wil_rt = wilayah_property(marker_rt, set_content, tampil_luas); 606 607 var peta_desa = "Peta Wilayah " + sebutan_desa; 608 var peta_dusun = "Peta Wilayah " + sebutan_dusun; 609 var overlayLayers = new Object(); 610 overlayLayers[peta_desa] = poligon_wil_desa; 611 overlayLayers[peta_dusun] = poligon_wil_dusun; 612 overlayLayers["Peta Wilayah RW"] = poligon_wil_rw; 613 overlayLayers["Peta Wilayah RT"] = poligon_wil_rt; 614 615 return overlayLayers; 616} 617 618function getLatLong(x, y) { 619 var hasil; 620 if (x == "Rectangle" || x == "Line" || x == "Poly") { 621 hasil = JSON.stringify(y._latlngs); 622 } else if (x == "multi") { 623 hasil = JSON.stringify(y); 624 } else { 625 hasil = JSON.stringify(y._latlng); 626 } 627 628 hasil = hasil 629 .replace(/\}/g, "]") 630 .replace(/(\{)/g, "[") 631 .replace(/(\"lat\"\:|\"lng\"\:)/g, "") 632 .replace(/(\"alt\"\:)/g, "") 633 .replace(/(\"ele\"\:)/g, ""); 634 635 return hasil; 636} 637 638function stylePolygonDesa() { 639 var style_polygon = { 640 stroke: true, 641 color: "#de2d26", 642 opacity: 1, 643 weight: 3,
644 fillColor: warna, 645 fillOpacity: 0.5, 646 dashArray: 4, 647 }; 648 return style_polygon; 649} 650 651function stylePointLogo(url) { 652 var style = { 653 iconSize: [32, 32], 654 iconAnchor: [16, 32], 655 popupAnchor: [0, -28], 656 iconUrl: url, 657 }; 658 return style; 659} 660 661function editToolbarPoly() { 662 var options = { 663 position: "topright", // toolbar position, options are 'topleft', 'topright', 'bottomleft', 'bottomright' 664 drawMarker: false, // adds button to draw markers 665 drawCircleMarker: false, // adds button to draw markers 666 drawPolyline: false, // adds button to draw a polyline 667 drawRectangle: false, // adds button to draw a rectangle 668 drawPolygon: true, // adds button to draw a polygon 669 drawCircle: false, // adds button to draw a cricle 670 cutPolygon: false, // adds button to cut a hole in a polygon 671 editMode: true, // adds button to toggle edit mode for all layers 672 removalMode: true, // adds a button to remove layers 673 }; 674 return options; 675} 676 677function editToolbarLine() { 678 var options = { 679 position: "topright", // toolbar position, options are 'topleft', 'topright', 'bottomleft', 'bottomright' 680 drawMarker: false, // adds button to draw markers 681 drawCircleMarker: false, // adds button to draw markers 682 drawPolyline: true, // adds button to draw a polyline 683 drawRectangle: false, // adds button to draw a rectangle 684 drawPolygon: false, // adds button to draw a polygon 685 drawCircle: false, // adds button to draw a cricle 686 cutPolygon: false, // adds button to cut a hole in a polygon 687 editMode: true, // adds button to toggle edit mode for all layers 688 removalMode: true, // adds a button to remove layers 689 }; 690 return options; 691} 692 693function styleGpx() { 694 var style = { 695 color: "red", 696 opacity: 1.0, 697 fillOpacity: 1.0, 698 weight: 3, 699 clickable: true, 700 }; 701 return style; 702} 703 704function eximGpxRegion(layerpeta, multi = false) { 705 L.Control.FileLayerLoad.LABEL = 706 '<img class="icon-map" src="' + 707 BASE_URL + 708 'assets/images/gpx.png" alt="file icon"/>'; 709 L.Control.FileLayerLoad.TITLE = "Impor GPX/KML"; 710 711 const controlGpxPoly = L.Control.fileLayerLoad({ 712 addToMap: true, 713 formats: [".gpx", ".kml"], 714 fitBounds: false, 715 layerOptions: { 716 pointToLayer: function (data, latlng) { 717 return L.marker(latlng); 718 }, 719 }, 720 }); 721 controlGpxPoly.addTo(layerpeta); 722 723 controlGpxPoly.loader.on("data:loaded", function (e) { 724 var type = e.layerType; 725 var layer = e.layer; 726 var coords = []; 727 var geojson = turf.flip(layer.toGeoJSON()); 728 var shape_for_db = JSON.stringify(geojson); 729 var polygon = L.geoJson(JSON.parse(shape_for_db), { 730 pointToLayer: function (feature, latlng) { 731 return L.marker(latlng); 732 }, 733 onEachFeature: function (feature, layer) { 734 coords.push(feature.geometry.coordinates); 735 }, 736 }).addTo(layerpeta); 737 738 var jml = coords[0].length; 739 for (var x = 0; x < jml; x++) { 740 if (coords[0][x].length > 2) { 741 coords[0][x].pop(); 742 } 743 } 744 745 var path = get_path_import(coords, multi); 746 747 if (multi == true) { 748 coords = new Array(coords); 749 } 750 751 const pathJson = JSON.parse(path) 752 if (isValidMultiPolygonPath(pathJson) || isValidPolygonPath(pathJson)){ 753 document.getElementById("path").value = path; 754 controlGpxPoly.options.fitBounds = true; 755 } else { 756 controlGpxPoly.options.fitBounds = false; 757 document.getElementById("path").value = ""; 758 _error('Peta tidak valid') 759 } 760 }); 761 762 return controlGpxPoly; 763} 764 765function eximGpxPoint(layerpeta) { 766 L.Control.FileLayerLoad.LABEL = 767 '<img class="icon-map" src="' + 768 BASE_URL + 769 'assets/images/gpx.png" alt="file icon"/>'; 770 L.Control.FileLayerLoad.TITLE = "Impor GPX/KML"; 771 772 controlGpxPoint = L.Control.fileLayerLoad({ 773 addToMap: false, 774 formats: [".gpx", ".kml"], 775 fitBounds: false, 776 layerOptions: { 777 pointToLayer: function (data, latlng) { 778 layerpeta.eachLayer(function (layer) { 779 if (layer instanceof L.Marker) { 780 layer.remove(); 781 } 782 }); 783 return L.marker(latlng); 784 }, 785 }, 786 }); 787 controlGpxPoint.addTo(layerpeta); 788 789 controlGpxPoint.loader.on("data:loaded", function (e) { 790 var type = e.layerType; 791 var layer = e.layer; 792 var coords = []; 793 var geojson = layer.toGeoJSON(); 794 var shape_for_db = JSON.stringify(geojson); 795 L.geoJson(JSON.parse(shape_for_db), { 796 pointToLayer: function (feature, latlng) { 797 return L.marker(latlng); 798 }, 799 onEachFeature: function (feature, layer) { 800 if (feature.geometry.type == "Point") { 801 coords.push(feature.geometry.coordinates); 802 layerpeta.setView([coords[0][1], coords[0][0]], layerpeta.getZoom()); 803 } else { 804 _error("Pilih file GPX dengan tipe Point"); 805 } 806 }, 807 }).addTo(layerpeta); 808 809 document.getElementById("lat").value = coords[0][1]; 810 document.getElementById("lng").value = coords[0][0]; 811 }); 812 813 return controlGpxPoint; 814} 815 816function eximShp(layerpeta, multi = false) {
817 L.Control.Shapefile = L.Control.extend({ 818 onAdd: function (map) { 819 var thisControl = this; 820 821 var controlDiv = L.DomUtil.create( 822 "div", 823 "leaflet-control-zoom leaflet-bar leaflet-control leaflet-control-command" 824 ); 825 826 // Create the leaflet control. 827 var controlUI = L.DomUtil.create( 828 "div", 829 "leaflet-control-command-interior", 830 controlDiv 831 ); 832 833 // Create the form inside of the leaflet control. 834 var form = L.DomUtil.create( 835 "form", 836 "leaflet-control-command-form", 837 controlUI 838 ); 839 form.action = ""; 840 form.method = "post"; 841 form.enctype = "multipart/form-data"; 842 843 // Create the input file element. 844 var input = L.DomUtil.create( 845 "input", 846 "leaflet-control-command-form-input", 847 form 848 ); 849 input.id = "file"; 850 input.type = "file"; 851 input.accept = ".zip"; 852 input.name = "uploadFile"; 853 input.style.display = "none"; 854 855 L.DomEvent.addListener(form, "click", function () { 856 document.getElementById("file").click(); 857 }).addListener(input, "change", function () { 858 var input = document.getElementById("file"); 859 if (!input.files[0]) { 860 _error("Pilih file shapefile dalam format .zip"); 861 } else { 862 file = input.files[0]; 863 fr = new FileReader(); 864 fr.onload = receiveBinary; 865 fr.readAsArrayBuffer(file); 866 } 867 868 function receiveBinary() { 869 geojson = fr.result; 870 var shpfile = new L.Shapefile(geojson).addTo(map); 871 872 shpfile.once("data:loaded", function (e) { 873 var type = e.layerType; 874 var layer = e.layer; 875 var coords = []; 876 var geojson = turf.flip(shpfile.toGeoJSON()); 877 var shape_for_db = JSON.stringify(geojson); 878 879 var polygon = L.geoJson(JSON.parse(shape_for_db), { 880 pointToLayer: function (feature, latlng) { 881 return L.circleMarker(latlng, { style: style }); 882 }, 883 onEachFeature: function (feature, layer) { 884 coords.push(feature.geometry.coordinates); 885 }, 886 }); 887 888 var jml = coords[0].length; 889 for (var x = 0; x < jml; x++) { 890 if (coords[0][x].length > 2) { 891 coords[0][x].pop(); 892 } 893 } 894 895 var path = get_path_import(coords, multi); 896 897 if (multi == true) { 898 coords = new Array(coords); 899 } 900 901 const pathJson = JSON.parse(path) 902 if (isValidMultiPolygonPath(pathJson) || isValidPolygonPath(pathJson)){ 903 document.getElementById("path").value = path; 904 layerpeta.fitBounds(shpfile.getBounds()); 905 }else { 906 document.getElementById("path").value = ""; 907 _error('Peta tidak valid') 908 } 909 }); 910 } 911 }); 912 913 controlUI.title = "Impor Shapefile (.Zip)"; 914 915 return controlDiv; 916 }, 917 }); 918 919 L.control.shapefile = function (opts) { 920 return new L.Control.Shapefile(opts); 921 }; 922 923 L.control.shapefile({ position: "topleft" }).addTo(layerpeta); 924 925 return eximShp; 926} 927 928function geoLocation(layerpeta) { 929 var lc = L.control 930 .locate({ 931 drawCircle: false, 932 icon: "fa fa-map-marker", 933 locateOptions: { enableHighAccuracy: true }, 934 strings: { 935 title: "Lokasi Saya", 936 popup: "Anda berada di sekitar {distance} {unit} dari titik ini", 937 }, 938 }) 939 .addTo(layerpeta); 940 941 layerpeta.on("locationfound", function (e) { 942 layerpeta.setView(e.latlng); 943 }); 944 945 layerpeta 946 .on("startfollowing", function () { 947 layerpeta.on("dragstart", lc._stopFollowing, lc); 948 }) 949 .on("stopfollowing", function () { 950 layerpeta.off("dragstart", lc._stopFollowing, lc); 951 }); 952 return lc; 953} 954 955function hapusPeta(layerpeta) { 956 layerpeta.on("pm:globalremovalmodetoggled", function (e) { 957 document.getElementById("path").value = ""; 958 }); 959 return hapusPeta; 960} 961 962function hapuslayer(layerpeta) { 963 layerpeta.on("pm:remove", function (e) { 964 var type = e.layerType; 965 var layer = e.layer; 966 var latLngs; 967 968 // set value setelah create polygon 969 var last_path = document.getElementById("path").value; 970 var new_path = getLatLong("Poly", layer).toString(); 971 last_path = last_path 972 .replace(new_path, "") 973 .replace(",,", ",") 974 .replace("[,", "[") 975 .replace(",]", "]"); 976 document.getElementById("path").value = last_path; 977 document.getElementById("zoom").value = layerpeta.getZoom(); 978 }); 979 980 return hapusPeta; 981} 982 983function updateZoom(layerpeta) { 984 layerpeta.on("zoomend", function (e) { 985 document.getElementById("zoom").value = layerpeta.getZoom(); 986 }); 987 return updateZoom; 988} 989 990function addPetaPoly(layerpeta) { 991 layerpeta.on("pm:create", function (e) { 992 var type = e.layerType; 993 var layer = e.layer; 994 var latLngs; 995 996 if (type === "circle") { 997 latLngs = layer.getLatLng(); 998 } else latLngs = layer.getLatLngs(); 999 1000 var p = latLngs; 1001 var polygon = L.polygon(p, { 1002 color: "#A9AAAA", 1003 weight: 4, 1004 opacity: 1, 1005 showMeasurements: true, 1006 measurementOptions: { showSegmentLength: false }, 1007 }).addTo(layerpeta); 1008 1009 polygon.on("pm:edit", function (e) { 1010 document.getElementById("path").value = getLatLong( 1011 "Poly", 1012 e.target 1013 ).toString(); 1014 document.getElementById("zoom").value = layerpeta.getZoom(); 1015 }); 1016 1017 layerpeta.fitBounds(polygon.getBounds()); 1018 1019 // set value setelah create polygon 1020 document.getElementById("path").value = getLatLong( 1021 "Poly", 1022 layer 1023 ).toString(); 1024 document.getElementById("zoom").value = layerpeta.getZoom(); 1025 }); 1026 return addPetaPoly; 1027} 1028 1029function addPetaLine(layerpeta, jenis, tebal, warna) { 1030 var jenis = jenis ?? "solid"; 1031 var tebal = tebal ?? 1; 1032 var warna = warna ?? "#A9AAAA"; 1033 1034 layerpeta.on("pm:create", function (e) { 1035 var type = e.layerType; 1036 var layer = e.layer; 1037 var latLngs; 1038 1039 if (type === "circle") { 1040 latLngs = layer.getLatLng(); 1041 } else latLngs = layer.getLatLngs(); 1042 1043 var p = latLngs; 1044 var polygon = L.polyline(p, {
1045 color: warna, 1046 weight: tebal, 1047 opacity: 1, 1048 dashArray: jenis_garis(jenis), 1049 showMeasurements: true, 1050 measurementOptions: { showSegmentLength: false }, 1051 }).addTo(layerpeta); 1052 1053 polygon.on("pm:edit", function (e) { 1054 document.getElementById("path").value = getLatLong( 1055 "Line", 1056 e.target 1057 ).toString(); 1058 }); 1059 1060 layerpeta.fitBounds(polygon.getBounds()); 1061 1062 // set value setelah create polygon 1063 document.getElementById("path").value = getLatLong( 1064 "Line", 1065 layer 1066 ).toString(); 1067 }); 1068 return addPetaLine; 1069} 1070 1071function old_value(id_path) { 1072 return layers[id_path]; 1073} 1074 1075function addPetaMultipoly(layerpeta) { 1076 layerpeta.on("pm:create", function (e) { 1077 var type = e.layerType; 1078 var layer = e.layer; 1079 var latLngs; 1080 1081 // set value setelah create polygon 1082 if (document.getElementById("path").value == "") { 1083 document.getElementById("path").value = "[]"; 1084 } 1085 1086 var last_path = JSON.parse(document.getElementById("path").value); 1087 var new_path = JSON.parse(getLatLong("Poly", layer).toString()); 1088 last_path.push(new_path); // gabungkan value lama dengan yang baru 1089 1090 e.layer.on("pm:edit", function (f) { 1091 var id_path = f.target._leaflet_id; 1092 var _path = new Array(); 1093 1094 for (i in layerpeta._layers) { 1095 if (layerpeta._layers[i]._path != undefined && layers[i]) { 1096 try { 1097 _path.push(layerpeta._layers[i]._latlngs); 1098 } catch (e) { 1099 _error("problem with " + e + layerpeta._layers[i]); 1100 } 1101 } 1102 } 1103 1104 var new_path = getLatLong("multi", _path).toString(); 1105 document.getElementById("path").value = new_path; 1106 document.getElementById("zoom").value = layerpeta.getZoom(); 1107 }); 1108 layers[e.layer._leaflet_id] = last_path[0]; 1109 1110 document.getElementById("path").value = JSON.stringify(last_path); 1111 document.getElementById("zoom").value = layerpeta.getZoom(); 1112 }); 1113 return addPetaPoly; 1114} 1115 1116function showCurrentPolygon(wilayah, layerpeta, warna, tampil_luas) { 1117 if (!isValidPolygonPath(wilayah)) { 1118 return false; 1119 } 1120 1121 var daerah_wilayah = wilayah; 1122 daerah_wilayah[0].push(daerah_wilayah[0][0]); 1123 var poligon_wilayah = L.polygon(wilayah, { 1124 showMeasurements: true, 1125 measurementOptions: { showSegmentLength: false }, 1126 }).addTo(layerpeta); 1127 1128 luas(poligon_wilayah, tampil_luas); 1129 1130 poligon_wilayah.on("pm:edit", function (e) { 1131 document.getElementById("path").value = getLatLong( 1132 "Poly", 1133 e.target 1134 ).toString(); 1135 document.getElementById("zoom").value = layerpeta.getZoom(); 1136 }); 1137 1138 var layer = poligon_wilayah; 1139 var geojson = layer.toGeoJSON(); 1140 var shape_for_db = JSON.stringify(geojson); 1141 var gpxData = togpx(JSON.parse(shape_for_db)); 1142 1143 $("#exportGPX").on("click", function (event) { 1144 data = "data:text/xml;charset=utf-8," + encodeURIComponent(gpxData); 1145 $(this).attr({ 1146 href: data, 1147 target: "_blank", 1148 }); 1149 }); 1150 1151 layerpeta.fitBounds(poligon_wilayah.getBounds()); 1152 1153 // set value setelah create polygon 1154 document.getElementById("path").value = getLatLong("Poly", layer).toString(); 1155 document.getElementById("zoom").value = layerpeta.getZoom(); 1156 1157 return showCurrentPolygon; 1158} 1159 1160function showCurrentMultiPolygon(wilayah, layerpeta, warna, tampil_luas) { 1161 if (!isValidMultiPolygonPath(wilayah) && !isValidPolygonPath(wilayah)) { 1162 return false; 1163 } 1164 1165 var area_wilayah = JSON.parse(JSON.stringify(wilayah)); 1166 var bounds = new Array(); 1167 1168 var path = new Array(); 1169 for (var i = 0; i < wilayah.length; i++) { 1170 var daerah_wilayah = area_wilayah[i]; 1171 daerah_wilayah[0].push(daerah_wilayah[0][0]); 1172 var poligon_wilayah = L.polygon(daerah_wilayah, { 1173 showMeasurements: true, 1174 measurementOptions: { showSegmentLength: false }, 1175 }).addTo(layerpeta); 1176 1177 luas(poligon_wilayah, tampil_luas); 1178 1179 layers[poligon_wilayah._leaflet_id] = wilayah[i]; 1180 poligon_wilayah.on("pm:edit", function (e) { 1181 var old_path = getLatLong("Poly", { 1182 _latlngs: layers[e.target._leaflet_id], 1183 }).toString(); 1184 var new_path = getLatLong("Poly", e.target).toString(); 1185 var value_path = document.getElementById("path").value;
1185 //ambil value pada input 1186 1187 document.getElementById("path").value = value_path.replace( 1188 old_path, 1189 new_path 1190 ); 1191 document.getElementById("zoom").value = layerpeta.getZoom(); 1192 layers[e.target._leaflet_id] = JSON.parse( 1193 JSON.stringify(e.target._latlngs) 1194 ); // update value layers 1195 }); 1196 var layer = poligon_wilayah; 1197 var geojson = layer.toGeoJSON(); 1198 var shape_for_db = JSON.stringify(geojson); 1199 var gpxData = togpx(JSON.parse(shape_for_db)); 1200 1201 $("#exportGPX").on("click", function (event) { 1202 data = "data:text/xml;charset=utf-8," + encodeURIComponent(gpxData); 1203 $(this).attr({ 1204 href: data, 1205 target: "_blank", 1206 }); 1207 }); 1208 1209 bounds.push(poligon_wilayah.getBounds()); 1210 // set value setelah create masing2 polygon 1211 path.push(layer._latlngs); 1212 } 1213 1214 layerpeta.fitBounds(bounds); 1215 document.getElementById("path").value = getLatLong("multi", path).toString(); 1216 document.getElementById("zoom").value = layerpeta.getZoom(); 1217 return showCurrentPolygon; 1218} 1219 1220function showCurrentPoint(posisi1, layerpeta, mode = true) { 1221 var lokasi_kantor = L.marker(posisi1, { draggable: mode }).addTo(layerpeta); 1222 lokasi_kantor.on("dragend", function (e) { 1223 $("#lat").val(e.target._latlng.lat); 1224 $("#lng").val(e.target._latlng.lng); 1225 $("#map_tipe").val("HYBRID"); 1226 $("#zoom").val(layerpeta.getZoom()); 1227 }); 1228 1229 layerpeta.on("zoomstart zoomend", function (e) { 1230 $("#zoom").val(layerpeta.getZoom()); 1231 }); 1232 1233 var geojson = lokasi_kantor.toGeoJSON(); 1234 var shape_for_db = JSON.stringify(geojson); 1235 var gpxData = togpx(JSON.parse(shape_for_db)); 1236 1237 $("#exportGPX").on("click", function (event) { 1238 data = "data:text/xml;charset=utf-8," + encodeURIComponent(gpxData); 1239 $(this).attr({ 1240 href: data, 1241 target: "_blank", 1242 }); 1243 }); 1244 1245 if ($("a[title='Lokasi Saya']").length == 0) { 1246 var lc = L.control 1247 .locate({ 1248 drawCircle: false, 1249 icon: "fa fa-map-marker", 1250 strings: { 1251 title: "Lokasi Saya", 1252 locateOptions: { enableHighAccuracy: true }, 1253 popup: "Anda berada disekitar {distance} {unit} dari titik ini", 1254 }, 1255 }) 1256 .addTo(layerpeta); 1257 } 1258 1259 layerpeta.on("locationfound", function (e) { 1260 $("#lat").val(e.latlng.lat); 1261 $("#lng").val(e.latlng.lng); 1262 lokasi_kantor.setLatLng(e.latlng); 1263 layerpeta.setView(e.latlng); 1264 }); 1265 1266 layerpeta 1267 .on("startfollowing", function () { 1268 layerpeta.on("dragstart", lc._stopFollowing, lc); 1269 }) 1270 .on("stopfollowing", function () { 1271 layerpeta.off("dragstart", lc._stopFollowing, lc); 1272 }); 1273 1274 return showCurrentPoint; 1275} 1276 1277function showCurrentLine(wilayah, layerpeta, jenis, tebal, warna, tampil_luas) { 1278 var jenis = jenis ?? "solid"; 1279 var tebal = tebal ?? 1; 1280 var warna = warna ?? "#A9AAAA"; 1281 1282 var poligon_wilayah = L.polyline(wilayah, { 1283 color: warna, 1284 weight: tebal, 1285 opacity: 1, 1286 dashArray: jenis_garis(jenis), 1287 showMeasurements: true, 1288 measurementOptions: { showSegmentLength: false }, 1289 }).addTo(layerpeta); 1290 1291 luas(poligon_wilayah, tampil_luas); 1292 1293 poligon_wilayah.on("pm:edit", function (e) { 1294 document.getElementById("path").value = getLatLong( 1295 "Line", 1296 e.target 1297 ).toString(); 1298 }); 1299 1300 var layer = poligon_wilayah; 1301 var geojson = layer.toGeoJSON(); 1302 var shape_for_db = JSON.stringify(geojson); 1303 var gpxData = togpx(JSON.parse(shape_for_db)); 1304 1305 $("#exportGPX").on("click", function (event) { 1306 data = "data:text/xml;charset=utf-8," + encodeURIComponent(gpxData); 1307 $(this).attr({ 1308 href: data, 1309 target: "_blank", 1310 }); 1311 }); 1312 1313 layerpeta.fitBounds(poligon_wilayah.getBounds()); 1314 1315 // set value setelah create polygon 1316 document.getElementById("path").value = getLatLong("Line", layer).toString(); 1317 1318 return showCurrentLine; 1319} 1320 1321function showCurrentArea(wilayah, layerpeta, tampil_luas) { 1322 var daerah_wilayah = wilayah; 1323 daerah_wilayah[0].push(daerah_wilayah[0][0]); 1324 var poligon_wilayah = L.polygon(wilayah, { 1325 showMeasurements: true, 1326 measurementOptions: { showSegmentLength: false }, 1327 }).addTo(layerpeta); 1328 1329 luas(poligon_wilayah, tampil_luas); 1330 1331 poligon_wilayah.on("pm:edit", function (e) { 1332 document.getElementById("path").value = getLatLong( 1333 "Poly", 1334 e.target 1335 ).toString(); 1336 }); 1337 1338 var layer = poligon_wilayah; 1339 var geojson = layer.toGeoJSON(); 1340 var shape_for_db = JSON.stringify(geojson); 1341 var gpxData = togpx(JSON.parse(shape_for_db)); 1342 1343 $("#exportGPX").on("click", function (event) { 1344 data = "data:text/xml;charset=utf-8," + encodeURIComponent(gpxData); 1345 $(this).attr({ 1346 href: data, 1347 target: "_blank", 1348 }); 1349 }); 1350 1351 layerpeta.fitBounds(poligon_wilayah.getBounds()); 1352 1353 // set value setelah create polygon 1354 document.getElementById("path").value = getLatLong("Poly", layer).toString(); 1355 1356 return showCurrentArea; 1357} 1358 1359function setMarkerCustom(marker, layercustom, tampil_luas) { 1360 if (marker.length != 0) { 1361 if (tampil_luas == "1") { 1362 var geojson = L.geoJSON(turf.featureCollection(marker), { 1363 pmIgnore: true, 1364 showMeasurements: true, 1365 measurementOptions: { 1366 showSegmentLength: false, 1367 }, 1368 onEachFeature: function (feature, layer) { 1369 layer.bindPopup(feature.properties.content); 1370 layer.bindTooltip(feature.properties.content); 1371 }, 1372 style: function (feature) { 1373 if (feature.properties.style) { 1374 return feature.properties.style; 1375 } 1376 }, 1377 pointToLayer: function (feature, latlng) { 1378 if (feature.properties.style) { 1379 return L.marker(latlng, { icon: feature.properties.style }); 1380 } else return L.marker(latlng); 1381 }, 1382 }); 1383 } else { 1384 var geojson = L.geoJSON(turf.featureCollection(marker), { 1385 pmIgnore: true, 1386 showMeasurements: false, 1387 measurementOptions: { 1388 showSegmentLength: false, 1389 }, 1390 onEachFeature: function (feature, layer) { 1391 layer.bindPopup(feature.properties.content); 1392 layer.bindTooltip(feature.properties.content); 1393 }, 1394 style: function (feature) { 1395 if (feature.properties.style) { 1396 return feature.properties.style; 1397 } 1398 }, 1399 pointToLayer: function (feature, latlng) { 1400 if (feature.properties.style) { 1401 return L.marker(latlng, { 1402 icon: feature.properties.style, 1403 }); 1404 } else return L.marker(latlng); 1405 }, 1406 }); 1407 } 1408 1409 layercustom.addLayer(geojson); 1410 } 1411 1412 return setMarkerCustom; 1413} 1414 1415function setMarkerCluster(marker, markersList, markers, tampil_luas) { 1416 if (marker.length != 0) { 1417 if (tampil_luas == "1") { 1418 var geojson = L.geoJSON(turf.featureCollection(marker), { 1419 pmIgnore: true, 1420 showMeasurements: true, 1421 measurementOptions: { 1422 showSegmentLength: false, 1423 }, 1424 onEachFeature: function (feature, layer) { 1425 layer.bindPopup(feature.properties.content); 1426 layer.bindTooltip(feature.properties.content); 1427 }, 1428 style: function (feature) { 1429 if (feature.properties.style) { 1430 return feature.properties.style; 1431 } 1432 }, 1433 pointToLayer: function (feature, latlng) { 1434 if (feature.properties.style) { 1435 return L.marker(latlng, { 1436 icon: feature.properties.style, 1437 }); 1438 } else return L.marker(latlng); 1439 }, 1440 }); 1441 } else { 1442 var geojson = L.geoJSON(turf.featureCollection(marker), { 1443 pmIgnore: true, 1444 showMeasurements: false, 1445 measurementOptions: { 1446 showSegmentLength: false, 1447 }, 1448 onEachFeature: function (feature, layer) { 1449 layer.bindPopup(feature.properties.content); 1450 layer.bindTooltip(feature.properties.content); 1451 }, 1452 style: function (feature) { 1453 if (feature.properties.style) { 1454 return feature.properties.style; 1455 } 1456 }, 1457 pointToLayer: function (feature, latlng) { 1458 if (feature.properties.style) { 1459 return L.marker(latlng, { 1460 icon: feature.properties.style, 1461 }); 1462 } else return L.marker(latlng); 1463 }, 1464 }); 1465 } 1466 1467 markersList.push(geojson); 1468 markers.addLayer(geojson); 1469 } 1470 1471 return setMarkerCluster; 1472} 1473 1474function set_marker_area(marker, daftar_path, foto_area) { 1475 var daftar = daftar_path == "null" ? new Array() : JSON.parse(daftar_path); 1476 var jml = daftar.length; 1477 var jml_path; 1478 var lokasi_gambar = foto_area; 1479 1480 for (var x = 0; x < jml; x++) { 1481 if (daftar[x].path) { 1482 daftar[x].path = JSON.parse(daftar[x].path); 1483 jml_path = daftar[x].path[0].length; 1484 for (var y = 0; y < jml_path; y++) { 1485 daftar[x].path[0][y].reverse(); 1486 } 1487 1488 var area_style = { 1489 stroke: true, 1490 opacity: 1, 1491 weight: 3, 1492 fillColor: daftar[x].color, 1493 fillOpacity: 0.5, 1494 }; 1495 1496 daftar[x].path[0].push(daftar[x].path[0][0]); 1497 marker.push( 1498 turf.polygon(daftar[x].path, { 1499 content: popUpContent(daftar[x], lokasi_gambar), 1500 style: area_style, 1501 }) 1502 ); 1503 } 1504 } 1505} 1506 1507function set_marker_garis(marker, daftar_path, foto_garis) { 1508 var daftar = daftar_path == "null" ? new Array() : JSON.parse(daftar_path); 1509 var jml = daftar.length; 1510 var coords; 1511 var lengthOfCoords; 1512 var lokasi_gambar = foto_garis; 1513 1514 for (var x = 0; x < jml; x++) { 1515 if (daftar[x].path) { 1516 daftar[x].path = JSON.parse(daftar[x].path); 1517 coords = daftar[x].path; 1518 lengthOfCoords = coords.length; 1519 for (i = 0; i < lengthOfCoords; i++) { 1520 holdLon = coords[i][0]; 1521 coords[i][0] = coords[i][1]; 1522 coords[i][1] = holdLon; 1523 } 1524 1525 var garis_style = { 1526 stroke: true, 1527 opacity: 1, 1528 weight: daftar[x].tebal, 1529 color: daftar[x].color, 1530 dashArray: jenis_garis(daftar[x].jenis_garis), 1531 }; 1532 1533 marker.push( 1534 turf.lineString(coords, {
1535 content: popUpContent(daftar[x], lokasi_gambar), 1536 style: garis_style, 1537 }) 1538 ); 1539 } 1540 } 1541} 1542 1543function set_marker_lokasi(marker, daftar_path, path_icon, foto_lokasi) { 1544 var daftar = daftar_path == "null" ? new Array() : JSON.parse(daftar_path); 1545 var jml = daftar.length; 1546 var lokasi_gambar = foto_lokasi; 1547 var path_foto = path_icon; 1548 var point_style = { 1549 iconSize: [32, 32], 1550 iconAnchor: [16, 32], 1551 popupAnchor: [0, -28], 1552 }; 1553 1554 for (var x = 0; x < jml; x++) { 1555 if (daftar[x].lat) { 1556 point_style.iconUrl = path_foto + daftar[x].simbol; 1557 1558 marker.push( 1559 turf.point([daftar[x].lng, daftar[x].lat], { 1560 content: popUpContent(daftar[x], lokasi_gambar), 1561 style: L.icon(point_style), 1562 }) 1563 ); 1564 } 1565 } 1566} 1567 1568function set_marker_lokasi_pembangunan( 1569 marker, 1570 daftar_path, 1571 path_icon, 1572 foto_lokasi, 1573 link_progress 1574) { 1575 var daftar = daftar_path == "null" ? new Array() : JSON.parse(daftar_path); 1576 var jml = daftar.length; 1577 var foto; 1578 var content_lokasi; 1579 var lokasi_gambar = foto_lokasi; 1580 1581 for (var x = 0; x < jml; x++) { 1582 if (daftar[x].lat) { 1583 if (daftar[x].foto) { 1584 foto = 1585 '<img src="' + 1586 lokasi_gambar + 1587 daftar[x].foto + 1588 '" style=" width:300px;height:240px;border-radius:1px;-moz-border-radius:3px;-webkit-border-radius:1px;"/>'; 1589 } else foto = ""; 1590 1591 content_lokasi = 1592 '<div id="content">' + 1593 '<h4><b style="color:red"><center>Kegiatan Pembangunan</center></b></h4>' + 1594 '<div id="bodyContent">' + 1595 foto + 1596 "</div>" + 1597 "<table>" + 1598 "<tr>" + 1599 '<td width="100px">Nama Kegiatan</td>' + 1600 '<td width="10px">:</td>' + 1601 '<td><b style="color:red">' + 1602 daftar[x].judul + 1603 "</b></td>" + 1604 "</tr>" + 1605 "<tr>" + 1606 '<td width="100px">Lokasi</td>' + 1607 '<td width="10px">:</td>' + 1608 "<td>" + 1609 daftar[x].alamat + 1610 "</td>" + 1611 "</tr>" + 1612 "<tr>" + 1613 '<td width="100px">Sumber Dana</td>' + 1614 '<td width="10px">:</td>' + 1615 "<td>" + 1616 daftar[x].sumber_dana + 1617 "</td>" + 1618 "</tr>" + 1619 "<tr>" + 1620 '<td width="100px">Anggaran</td>' + 1621 '<td width="10px">:</td>' + 1622 '<td class="rupiah">Rp. ' + 1623 formatRupiah(daftar[x].anggaran) + 1624 "</td>" + 1625 "</tr>" + 1626 "<tr>" + 1627 '<td width="100px">Volume</td>' + 1628 '<td width="10px">:</td>' + 1629 "<td>" + 1630 daftar[x].volume + 1631 "</td>" + 1632 "</tr>" + 1633 "<tr>" + 1634 '<td width="100px">Pelaksana</td>' + 1635 '<td width="10px">:</td>' + 1636 "<td>" + 1637 daftar[x].pelaksana_kegiatan + 1638 "</td>" + 1639 "</tr>" + 1640 "<tr>" + 1641 '<td width="100px">Tahun Anggaran</td>' + 1642 '<td width="10px">:</td>' + 1643 "<td>" + 1644 daftar[x].tahun_anggaran + 1645 "</td>" + 1646 "</tr>" + 1647 "</table>" + 1648 '<center><a href="' + 1649 link_progress + 1650 "/" + 1651 daftar[x].slug + 1652 '" target="_blank" class="btn btn-flat bg-red btn-sm"><i class="fa fa-info"></i> Selengkapnya</a>' + 1653 "</div>"; 1654 1655 marker.push( 1656 turf.point([daftar[x].lng, daftar[x].lat], { 1657 content: content_lokasi, 1658 style: L.icon({ iconSize: [16, 16], iconUrl: path_icon }), 1659 }) 1660 ); 1661 } 1662 } 1663} 1664 1665//Menampilkan OverLayer Area, Garis, Lokasi 1666function tampilkan_layer_area_garis_lokasi( 1667 peta, 1668 daftar_path, 1669 daftar_garis, 1670 daftar_lokasi, 1671 path_icon, 1672 foto_area, 1673 foto_garis, 1674 foto_lokasi, 1675 tampil_luas 1676) { 1677 var marker_area = []; 1678 var marker_garis = []; 1679 var marker_lokasi = []; 1680 var markers = new L.MarkerClusterGroup(); 1681 var markersList = []; 1682 1683 var layer_area = L.featureGroup(); 1684 var layer_garis = L.featureGroup(); 1685 var layer_lokasi = L.featureGroup(); 1686 1687 var layerCustom = { 1688 "Infrastruktur Desa": { 1689 "Infrastruktur (Area)": layer_area, 1690 "Infrastruktur (Garis)": layer_garis, 1691 "Infrastruktur (Lokasi)": layer_lokasi, 1692 }, 1693 }; 1694 1695 //OVERLAY AREA 1696 if (daftar_path) { 1697 set_marker_area(marker_area, daftar_path, foto_area); 1698 } 1699 1700 //OVERLAY GARIS 1701 if (daftar_garis) { 1702 set_marker_garis(marker_garis, daftar_garis, foto_garis); 1703 } 1704 1705 //OVERLAY LOKASI DAN PROPERTI 1706 if (daftar_lokasi) { 1707 set_marker_lokasi(marker_lokasi, daftar_lokasi, path_icon, foto_lokasi); 1708 } 1709 1710 setMarkerCustom(marker_area, layer_area, tampil_luas); 1711 setMarkerCustom(marker_garis, layer_garis, tampil_luas); 1712 setMarkerCluster(marker_lokasi, markersList, markers, tampil_luas); 1713 1714 peta.on("layeradd layerremove", function () { 1715 peta.eachLayer(function (layer) { 1716 if (peta.hasLayer(layer_lokasi)) { 1717 peta.addLayer(markers); 1718 } else { 1719 peta.removeLayer(markers);
1720 peta._layersMaxZoom = 19; 1721 } 1722 }); 1723 }); 1724 1725 return layerCustom; 1726} 1727 1728//Menampilkan OverLayer Area, Garis, Lokasi plus Lokasi Pembangunan 1729function tampilkan_layer_area_garis_lokasi_plus( 1730 peta, 1731 daftar_path, 1732 daftar_garis, 1733 daftar_lokasi, 1734 daftar_lokasi_pembangunan, 1735 path_icon, 1736 path_icon_pembangunan, 1737 foto_area, 1738 foto_garis, 1739 foto_lokasi, 1740 foto_lokasi_pembangunan, 1741 link_progress, 1742 daftar_persil, 1743 tampil_luas 1744) { 1745 var marker_area = []; 1746 var marker_garis = []; 1747 var marker_lokasi = []; 1748 var marker_persil = []; 1749 var marker_lokasi_pembangunan = []; 1750 var markers = new L.MarkerClusterGroup(); 1751 var markersList = []; 1752 var markersP = new L.MarkerClusterGroup(); 1753 var markersListP = []; 1754 1755 var layer_area = L.featureGroup(); 1756 var layer_garis = L.featureGroup(); 1757 var layer_lokasi = L.featureGroup(); 1758 var layer_lokasi_pembangunan = L.featureGroup(); 1759 1760 var layerCustom = { 1761 "Infrastruktur Desa": { 1762 "Infrastruktur (Area)": layer_area, 1763 "Infrastruktur (Garis)": layer_garis, 1764 "Infrastruktur (Lokasi)": layer_lokasi, 1765 "Infrastruktur (Lokasi Pembangunan)": layer_lokasi_pembangunan, 1766 }, 1767 }; 1768 1769 //OVERLAY AREA 1770 if (daftar_path) { 1771 set_marker_area(marker_area, daftar_path, foto_area); 1772 } 1773 1774 //OVERLAY GARIS 1775 if (daftar_garis) { 1776 set_marker_garis(marker_garis, daftar_garis, foto_garis); 1777 } 1778 1779 //OVERLAY LOKASI DAN PROPERTI 1780 if (daftar_lokasi) { 1781 set_marker_lokasi(marker_lokasi, daftar_lokasi, path_icon, foto_lokasi); 1782 } 1783 1784 //OVERLAY LOKASI PEMBANGUNAN 1785 if (daftar_lokasi_pembangunan) { 1786 set_marker_lokasi_pembangunan( 1787 marker_lokasi_pembangunan, 1788 daftar_lokasi_pembangunan, 1789 path_icon_pembangunan, 1790 foto_lokasi_pembangunan, 1791 link_progress 1792 ); 1793 } 1794 1795 //OVERLAY C-desa 1796 if (daftar_persil) { 1797 var layer_persil = L.featureGroup(); 1798 layerCustom["Infrastruktur Desa"]["Letter C-Desa"] = layer_persil; 1799 set_marker_persil_content( 1800 marker_persil, 1801 daftar_persil, 1802 "Persil", 1803 "nomor", 1804 "#isi_popup_persil_", 1805 path_icon_pembangunan 1806 ); 1807 setMarkerCustom(marker_persil, layer_persil, tampil_luas); 1808 } 1809 1810 setMarkerCustom(marker_area, layer_area, tampil_luas); 1811 setMarkerCustom(marker_garis, layer_garis, tampil_luas); 1812 setMarkerCluster(marker_lokasi, markersList, markers, tampil_luas); 1813 setMarkerCluster( 1814 marker_lokasi_pembangunan, 1815 markersListP, 1816 markersP, 1817 tampil_luas 1818 ); 1819 1820 peta.on("layeradd layerremove", function () { 1821 peta.eachLayer(function (layer) { 1822 if (peta.hasLayer(layer_lokasi)) { 1823 peta.addLayer(markers); 1824 } else { 1825 peta.removeLayer(markers); 1826 peta._layersMaxZoom = 19; 1827 } 1828 }); 1829 }); 1830 1831 peta.on("layeradd layerremove", function () { 1832 peta.eachLayer(function (layer) { 1833 if (peta.hasLayer(layer_lokasi_pembangunan)) { 1834 peta.addLayer(markersP); 1835 } else { 1836 peta.removeLayer(markersP); 1837 peta._layersMaxZoom = 19; 1838 } 1839 }); 1840 }); 1841 1842 return layerCustom; 1843} 1844 1845function clearMap(peta) { 1846 for (i in peta._layers) { 1847 if (peta._layers[i]._path != undefined) { 1848 try { 1849 peta.removeLayer(peta._layers[i]); 1850 } catch (e) { 1851 console.log("problem with " + e + peta._layers[i]); 1852 } 1853 } 1854 } 1855} 1856 1857$(document).ready(function () { 1858 $("#modalKecil").on("show.bs.modal", function (e) { 1859 var link = $(e.relatedTarget); 1860 var title = link.data("title"); 1861 var modal = $(this); 1862 modal.find(".modal-title").text(title); 1863 $(this).find(".fetched-data").load(link.attr("href")); 1864 }); 1865 1866 $("#modalSedang").on("show.bs.modal", function (e) { 1867 var link = $(e.relatedTarget); 1868 var title = link.data("title"); 1869 var modal = $(this); 1870 modal.find(".modal-title").text(title); 1871 $(this).find(".fetched-data").load(link.attr("href")); 1872 }); 1873 1874 $("#modalBesar").on("show.bs.modal", function (e) { 1875 var link = $(e.relatedTarget); 1876 var title = link.data("title"); 1877 var modal = $(this); 1878 modal.find(".modal-title").text(title); 1879 $(this).find(".fetched-data").load(link.attr("href")); 1880 }); 1881 return false; 1882}); 1883 1884//Cetak Peta ke PNG 1885function cetakPeta(layerpeta) { 1886 L.control 1887 .browserPrint({ 1888 documentTitle: "Peta_Wilayah", 1889 printModes: [ 1890 L.control.browserPrint.mode.auto("Auto"), 1891 L.control.browserPrint.mode.landscape("Landscape"), 1892 L.control.browserPrint.mode.portrait("Portrait"), 1893 ], 1894 }) 1895 .addTo(layerpeta); 1896 1897 L.Control.BrowserPrint.Utils.registerLayer( 1898 L.MarkerClusterGroup, 1899 "L.MarkerClusterGroup", 1900 function (layer, utils) { 1901 return layer; 1902 } 1903 ); 1904 1905 L.Control.BrowserPrint.Utils.registerLayer( 1906 L.MapboxGL, 1907 "L.MapboxGL", 1908 function (layer, utils) { 1909 return L.mapboxGL(layer.options); 1910 } 1911 ); 1912 1913 return cetakPeta; 1914} 1915 1916//Menambahkan legend ke peta dusun/rw/rt 1917function setlegendPeta( 1918 legenda, 1919 layerpeta, 1920 legendData, 1921 judul, 1922 nama_wil, 1923 judul_wil_atas 1924) { 1925 var daftar = JSON.parse(legendData); 1926 var div = L.DomUtil.create("div", "info legend"); 1927 var labels = ["<strong>Legenda" + " " + " - " + " " + judul + "</strong>"]; 1928 1929 for (var x = 0; x < daftar.length; x++) { 1930 if (daftar[x].path) { 1931 legenda.onAdd = function (layerpeta) { 1932 var categories = [judul + " " + daftar[x][nama_wil]]; 1933 if (judul === "RT") { 1934 var categories = [ 1935 judul + 1936 " " + 1937 daftar[x][nama_wil] + 1938 " " + 1939 judul_wil_atas + 1940 " " + 1941 daftar[x].rw + 1942 " " + 1943 daftar[x].dusun, 1944 ]; 1945 } 1946 if (judul === "RW") { 1947 var categories = [ 1948 judul + 1949 " " + 1950 daftar[x][nama_wil] + 1951 " " + 1952 judul_wil_atas + 1953 " " + 1954 daftar[x].dusun, 1955 ]; 1956 } 1957 for (var i = 0; i < categories.length; i++) { 1958 div.innerHTML += labels.push( 1959 '<i class="circle" style="background:' + 1960 daftar[x].warna + 1961 '"></i> ' + 1962 (categories[i] ? categories[i] + "<br>" : "+") 1963 ); 1964 } 1965 div.innerHTML = labels.join("<br>"); 1966 return div; 1967 }; 1968 legenda.addTo(layerpeta); 1969 } 1970 } 1971 setlegendPrint( 1972 legenda, 1973 layerpeta, 1974 legendData, 1975 judul, 1976 nama_wil, 1977 judul_wil_atas 1978 ); 1979 return setlegendPeta; 1980} 1981 1982function setlegendPrint( 1983 legenda, 1984 layerpeta, 1985 legendData, 1986 judul, 1987 nama_wil, 1988 judul_wil_atas 1989) { 1990 layerpeta.on("browser-print-start", function (e) { 1991 var daftar = JSON.parse(legendData); 1992 var div = L.DomUtil.create("div", "info legend"); 1993 var labels = ["<strong>Legenda" + " " + " - " + " " + judul + "</strong>"]; 1994 1995 for (var x = 0; x < daftar.length; x++) { 1996 if (daftar[x].path) { 1997 legenda.onAdd = function (layerpeta) { 1998 var categories = [judul + " " + daftar[x][nama_wil]]; 1999 if (judul === "RT") { 2000 var categories = [ 2001 judul + 2002 " " + 2003 daftar[x][nama_wil] + 2004 " " + 2005 judul_wil_atas + 2006 " " + 2007 daftar[x].rw + 2008 " " + 2009 daftar[x].dusun, 2010 ]; 2011 } 2012 if (judul === "RW") { 2013 var categories = [ 2014 judul + 2015 " " + 2016 daftar[x][nama_wil] + 2017 " " + 2018 judul_wil_atas + 2019 " " + 2020 daftar[x].dusun, 2021 ]; 2022 } 2023 for (var i = 0; i < categories.length; i++) { 2024 div.innerHTML += labels.push( 2025 '<i class="circle" style="background:' + 2026 daftar[x].warna + 2027 '"></i> ' + 2028 (categories[i] ? categories[i] + "<br>" : "+") 2029 ); 2030 } 2031 div.innerHTML = labels.join("<br>"); 2032 return div; 2033 }; 2034 legenda.addTo(e.printMap); 2035 } 2036 } 2037 }); 2038 return setlegendPrint; 2039} 2040 2041//Menambahkan legend ke peta desa 2042function setlegendPetaDesa(legenda, layerpeta, legendData, judul, nama_wil) { 2043 var daftar = JSON.parse(legendData["path"]); 2044 2045 for (var x = 0; x < daftar.length; x++) { 2046 legenda.onAdd = function (layerpeta) { 2047 var div = L.DomUtil.create("div", "info legend"); 2048 var labels = [ 2049 "<strong>Legenda" + " " + " - " + " " + judul + "</strong>", 2050 ]; 2051 var categories = [judul + " " + legendData["nama_desa"]]; 2052 for (var i = 0; i < categories.length; i++) { 2053 div.innerHTML += labels.push( 2054 '<i class="circle" style="background:' + 2055 legendData["warna"] + 2056 '"></i> ' + 2057 (categories[i] ? categories[i] + "<br>" : "+") 2058 ); 2059 } 2060 div.innerHTML = labels.join("<br>"); 2061 return div; 2062 }; 2063 legenda.addTo(layerpeta); 2064 } 2065 2066 layerpeta.on("browser-print-start", function (e) { 2067 L.control.scale({ position: "bottomleft" }).addTo(e.printMap); 2068 legenda.addTo(e.printMap); 2069 }); 2070 2071 return setlegendPetaDesa; 2072} 2073 2074function get_path_import(coords, multi = false) { 2075 var path = JSON.stringify(coords) 2076 .replace("]],[[", "],[") 2077 .replace("]],[[", "],[") 2078 .replace("]],[[", "],[") 2079 .replace("]],[[", "],[") 2080 .replace("]],[[", "],[") 2081 .replace("]],[[", "],[") 2082 .replace("]],[[", "],[") 2083 .replace("]],[[", "],[") 2084 .replace("]],[[", "],[") 2085 .replace("]],[[", "],[") 2086 .replace("]]],[[[", "],[") 2087 .replace("]]],[[[", "],[") 2088 .replace("]]],[[[", "],[") 2089 .replace("]]],[[[", "],[") 2090 .replace("]]],[[[", "],[") 2091 .replace("[[[[[", "[[[") 2092 .replace("]]]]]", "]]]") 2093 .replace("[[[[", "[[[") 2094 .replace("]]]]", "]]]") 2095 .replace(/,0]/g, "]") 2096 .replace("],null]", "]"); 2097 2098 if (multi == true) { 2099 path = "".concat("[", path, "]"); 2100 } 2101 2102 return path; 2103} 2104 2105function jenis_garis(jenis) { 2106 if (jenis == "dotted") { 2107 dashArray = "1,15"; 2108 } else if (jenis == "dashed") { 2109 dashArray = "10,15"; 2110 } else { 2111 // solid 2112 dashArray = "0"; 2113 } 2114 2115 return dashArray; 2116} 2117 2118function popUpContent(daftar, lokasi_gambar) { 2119 var foto; 2120 var content_area; 2121 2122 if (daftar.foto) { 2123 foto = 2124 '<img src="' + 2125 lokasi_gambar + 2126 "sedang_" + 2127 daftar.foto +
2128 '" style="max-width:200px;height:auto;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border:2px solid #555555;"/>'; 2129 } else foto = ""; 2130 2131 content_area = 2132 '<div id="content">' + 2133 '<div id="siteNotice">' + 2134 "</div>" + 2135 '<h4 id="firstHeading" class="firstHeading text-center">' + 2136 daftar.nama + 2137 "</h4>" + 2138 '<div id="bodyContent"><center>' + 2139 foto + 2140 "</center>" + 2141 '<p style="white-space: pre-line">' + 2142 daftar.desk + 2143 "</p>" + 2144 "</div>" + 2145 "</div>"; 2146 2147 return content_area; 2148} 2149 2150function luas(map, tampil_luas) { 2151 if (tampil_luas == "1") { 2152 return map.showMeasurements(); 2153 } 2154 2155 return map.hideMeasurements(); 2156} 2157 2158function isValidMultiPolygonPath(geojson) { 2159 try { 2160 const { type, coordinates } = turf.multiPolygon(geojson).geometry; 2161 2162 return ( 2163 type === "MultiPolygon" && 2164 Array.isArray(coordinates) && 2165 coordinates.every((polygon) => 2166 polygon.every((ring) => Array.isArray(ring) && ring.length >= 4) 2167 ) 2168 ); 2169 } catch (error) { 2170 return false; 2171 } 2172} 2173 2174function isValidPolygonPath(path) { 2175 // Menambahkan titik awal sebagai titik akhir 2176 path[0].push(path[0][0]); 2177 2178 try { 2179 const { type, coordinates } = turf.polygon(path).geometry; 2180 2181 if (!coordinates[0].every((subPath) => subPath.length > 0)) { 2182 return false; 2183 } 2184 2185 return ( 2186 type === "Polygon" && 2187 Array.isArray(coordinates) && 2188 coordinates.length >= 1 && 2189 coordinates.every((ring) => Array.isArray(ring) && ring.length >= 4) 2190 ); 2191 } catch (error) { 2192 return false; 2193 } 2194} 2195 2196function view_error_path() { 2197 if (error_message) { 2198 $(".content").prepend( 2199 '<div class="callout callout-danger id="error-path">' + 2200 error_message + 2201 "</div>" 2202 ); 2203 } else { 2204 $("#error-path").remove(); 2205 } 2206} 2207 2208function message(desa = null, dusun = null, rw = null, rt = null) { 2209 let message = "- Peta Wilayah <b>"; 2210 2211 if (desa) { 2212 message += " " + desa; 2213 } 2214 2215 if (dusun) { 2216 message += sebutan_dusun + " " + dusun; 2217 } 2218 2219 if (rw && rw != "0") { 2220 message += " RW " + rw; 2221 } 2222 2223 if (rt && rt != "0") { 2224 message += " RT " + rt; 2225 } 2226 2227 return message + "</b> tidak valid.<br>"; 2228} 2229 2230function resetPoint(layer_peta, posisi, zoom) { 2231 $("#reset-peta").click(function () { 2232 $("#lat").val(posisi[0]); 2233 $("#lng").val(posisi[1]); 2234 layer_peta.eachLayer(function (layer) { 2235 if (layer instanceof L.Marker) { 2236 layer_peta.removeLayer(layer); 2237 } 2238 }); 2239 2240 layer_peta.setView(posisi, zoom); 2241 showCurrentPoint(posisi, layer_peta); 2242 }); 2243} 2244 2245function resetPolygon(layer_peta, wilayah, posisi, zoom, multi, warna, TAMPIL_LUAS) { 2246 $("#reset-peta").click(function () { 2247 $("#path").val(wilayah); 2248 layer_peta.eachLayer(function (layer) { 2249 if (layer instanceof L.Polygon) { 2250 layer_peta.removeLayer(layer); 2251 } 2252 }); 2253 2254 layer_peta.setView(posisi, zoom); 2255 2256 if (wilayah) { 2257 if (multi) { 2258 showCurrentMultiPolygon(wilayah, layer_peta, warna, TAMPIL_LUAS); 2259 addPetaMultipoly(layer_peta); 2260 } else { 2261 showCurrentPolygon(wilayah, layer_peta, warna, TAMPIL_LUAS); 2262 addPetaPoly(layer_peta); 2263 } 2264 } 2265 }); 2266}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.