From e49a0b6e453da5981325a49a20141dc82794850e Mon Sep 17 00:00:00 2001
From: Nafies Luthfi <nafiesl@gmail.com>
Date: Sun, 16 Dec 2018 20:37:09 +0800
Subject: [PATCH] Add interactive map pointer on outlet create form

---
 resources/views/outlets/create.blade.php | 48 ++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/resources/views/outlets/create.blade.php b/resources/views/outlets/create.blade.php
index c68f2cc..2ea1134 100644
--- a/resources/views/outlets/create.blade.php
+++ b/resources/views/outlets/create.blade.php
@@ -36,6 +36,7 @@
                             </div>
                         </div>
                     </div>
+                    <div id="mapid"></div>
                 </div>
                 <div class="card-footer">
                     <input type="submit" value="{{ __('outlet.create') }}" class="btn btn-success">
@@ -46,3 +47,50 @@
     </div>
 </div>
 @endsection
+
+@section('styles')
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
+    integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
+    crossorigin=""/>
+
+<style>
+    #mapid { height: 300px; }
+</style>
+@endsection
+
+@push('scripts')
+<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
+    integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
+    crossorigin=""></script>
+<script>
+    var mapCenter = ['-3.313695', '114.590148'];
+    var map = L.map('mapid').setView(mapCenter, 13);
+
+    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);
+        $('#latitude').val(latitude);
+        $('#longitude').val(longitude);
+        updateMarker(latitude, longitude);
+    });
+
+    var updateMarkerByInputs = function() {
+        return updateMarker( $('#latitude').val() , $('#longitude').val());
+    }
+    $('#latitude').on('input', updateMarkerByInputs);
+    $('#longitude').on('input', updateMarkerByInputs);
+</script>
+@endpush