[javascript] asdsa

Viewer

  1.  
  2. @{ ViewBag.Title = "Index"; }
  3.  
  4. <input type="hidden" id="hd_path" value="@ViewBag.pathParent" />
  5.  
  6. <h3>Tambah Lokasi Baru</h3>
  7.  
  8. <hr />
  9. <br />
  10.  
  11. <html>
  12.  
  13. <head>
  14.     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  15.  
  16.     <style>
  17.     </style>
  18.  
  19. </head>
  20.  
  21. <body>
  22.     <div class="row" id="form">
  23.  
  24.         <div class="col-md-12">
  25.  
  26.             <div class="form-horizontal">
  27.                 <div class="form-group">
  28.                     <label class="col-md-2">Nama Lokasi</label>
  29.                     <div class="col-md-4">
  30.                         <input type="text" id="tx_namalokasi" name="tx_namalokasi" class="form-control" data-bind="value: location_name" />
  31.                     </div>
  32.                 </div>
  33.             </div>
  34.  
  35.             <div class="form-horizontal">
  36.                 <div class="form-group">
  37.                     <div class="col-md-12">
  38.                         <div class="panel panel-default">
  39.                             <div class="panel-heading">
  40.                                 Tentukan titik koordinat untuk menentukan area lokasi  : <span style="font-size:9px">(*klik pada peta untuk setting titik koordinat)</span>
  41.                             </div>
  42.                             <div class="panel-body">
  43.  
  44.                                 <div class="form-group">
  45.                                     <div class="col-md-12">
  46.                                         <input id="pac-input" class="controls" type="text" placeholder="Search Box">
  47.                                     </div>
  48.                                 </div>
  49.  
  50.                                 <div class="form-group">
  51.                                     <div class="col-md-12">
  52.                                         <div id="map" style="width: 100%;height: 400px;background-color: grey;"></div>
  53.                                     </div>
  54.                                 </div>
  55.  
  56.  
  57.                             </div>
  58.                         </div>
  59.  
  60.  
  61.                     </div>
  62.                 </div>
  63.             </div>
  64.  
  65.             <div class="form-horizontal">
  66.                 <div class="form-group">
  67.                     <div class="col-md-4">
  68.                         <div class="btn-group" role="group" aria-label="Third group">
  69.                             <button id="btn_save" class="btn btn-primary"><i class="glyphicon glyphicon-save"> </i>Simpan</button>
  70.                         </div>
  71.                     </div>
  72.                 </div>
  73.             </div>
  74.  
  75.         </div>
  76.  
  77.     </div>
  78.  
  79.     <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  80.  
  81.     <script>
  82.         var map;
  83.         var arr_marker = [];
  84.  
  85.  
  86.  
  87.         function initMap() {
  88.             // Initialize the map
  89.             map = L.map('map').setView([-6.198138, 106.915365], 15);
  90.  
  91.             // Add a base map layer
  92.             L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  93.                 attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  94.             }).addTo(map);
  95.  
  96.             // Add click event to the map
  97.             map.on('click', function (e) {
  98.                 placeMarker(e.latlng);
  99.                 addMarker({ "latitude": e.latlng.lat, "longtitude": e.latlng.lng });
  100.             });
  101.         }
  102.  
  103.         function placeMarker(latlng) {
  104.             var marker = L.marker(latlng).addTo(map);
  105.  
  106.             marker.on('click', function (e) {
  107.                 map.removeLayer(marker);
  108.                 deleteMarker({ "latitude": e.latlng.lat, "longtitude": e.latlng.lng });
  109.             });
  110.         }
  111.  
  112.         function deleteMarker(latLng) {
  113.             var lat = latLng.latitude;
  114.             var lng = latLng.longtitude;
  115.  
  116.             for (var i = 0; i < arr_marker.length; i++) {
  117.                 if (arr_marker[i].latitude == lat && arr_marker[i].longtitude == lng) {
  118.                     arr_marker.splice(i, 1);
  119.                 }
  120.             }
  121.         }
  122.  
  123.         function addMarker(latLng) {
  124.             arr_marker.push(latLng);
  125.         }
  126.  
  127.         // This initializes the map once the document is fully loaded
  128.         document.addEventListener('DOMContentLoaded', function () {
  129.             initMap();
  130.         });
  131.  
  132.  
  133.         $(document).ready(function () {
  134.  
  135.             $("#btn_save").click(function () {
  136.                 console.log(arr_marker)
  137.                 save();
  138.             })
  139.  
  140.  
  141.             kendo.bind($("#form"), viewModel);
  142.  
  143.         })
  144.  
  145.         function save() {
  146.  
  147.             //console.log(JSON.stringify(viewModel));
  148.  
  149.             viewModel.set("latLng", arr_marker);
  150.  
  151.             $.ajax({
  152.                 type: "POST",
  153.                 url: $("#hd_path").val() + "/SetLocation/AjaxInsertLocation",
  154.                 contentType: "application/json",
  155.                 data: JSON.stringify(viewModel),
  156.                 success: function (response) {
  157.                     if (response.status) {
  158.                         alert(response.remark)
  159.                     } else {
  160.                         alert(response.error)
  161.                     }
  162.                     location.reload();
  163.  
  164.                 },
  165.                 error: function (jqXHR, textStatus, errorThrown) {
  166.                 }
  167.  
  168.             });
  169.  
  170.         }
  171.  
  172.  
  173.         var viewModel = kendo.observable({
  174.             location_id: "",
  175.             location_name: "",
  176.             latLng: [],
  177.         });</script>
  178.  
  179. </body>
  180. </html>
  181.  

Editor

You can edit this paste and save as new:


File Description
  • asdsa
  • Paste Code
  • 05 Oct-2023
  • 5.4 Kb
You can Share it: