From cb5c00e510dc6309cfdb7fa7bc30f48ce866ffa2 Mon Sep 17 00:00:00 2001
From: Nafies Luthfi <nafiesl@gmail.com>
Date: Mon, 5 Apr 2021 21:29:03 +0800
Subject: [PATCH] Update coordinate from pointing on the map

---
 .../views/users/partials/edit_death.blade.php      | 48 ++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/resources/views/users/partials/edit_death.blade.php b/resources/views/users/partials/edit_death.blade.php
index fff0c56..dca9ecc 100644
--- a/resources/views/users/partials/edit_death.blade.php
+++ b/resources/views/users/partials/edit_death.blade.php
@@ -12,3 +12,51 @@
         <div class="col-md-6">{!! FormField::text('cemetery_location_longitude', ['label' => __('address.longitude'), 'value' => old('cemetery_location_longitude', $user->getMetadata('cemetery_location_longitude'))]) !!}</div>
     </div>
 </fieldset>
+<div id="mapid"></div>
+
+@section('ext_css')
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
+  integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+  crossorigin=""/>
+
+<style>
+    #mapid { height: 300px; }
+</style>
+@endsection
+
+@section('script')
+<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
+  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
+  crossorigin=""></script>
+<script>
+    var mapCenter = [{{ $user->getMetadata('cemetery_location_latitude') }}, {{ $user->getMetadata('cemetery_location_longitude') }}];
+    var map = L.map('mapid').setView(mapCenter, 18);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+
+    var marker = L.marker(mapCenter).addTo(map);
+    function updateMarker(lat, lng) {
+        marker
+        .setLatLng([lat, lng])
+        .bindPopup("Your location :  " + marker.getLatLng().toString())
+        .openPopup();
+        return false;
+    };
+
+    map.on('click', function(e) {
+        let latitude = e.latlng.lat.toString().substring(0, 15);
+        let longitude = e.latlng.lng.toString().substring(0, 15);
+        $('#cemetery_location_latitude').val(latitude);
+        $('#cemetery_location_longitude').val(longitude);
+        updateMarker(latitude, longitude);
+    });
+
+    var updateMarkerByInputs = function() {
+        return updateMarker( $('#cemetery_location_latitude').val() , $('#cemetery_location_longitude').val());
+    }
+    $('#cemetery_location_latitude').on('input', updateMarkerByInputs);
+    $('#cemetery_location_longitude').on('input', updateMarkerByInputs);
+</script>
+@endsection