Show map location in outlet detail

7 years ago · 8c0732009e
5 changed files with 58 additions and 7 deletions
--- a/public/images/marker-icon-green.png
+++ b/public/images/marker-icon-green.png
--- a/public/images/marker-shadow.png
+++ b/public/images/marker-shadow.png
--- a/resources/lang/en/outlet.php
+++ b/resources/lang/en/outlet.php
@ -28,8 +28,10 @@ return [
    'undeleteable'   => 'Outlet data cannot be deleted.',

    // Attributes
-    'name'      => 'Outlet Name',
-    'address'   => 'Outlet Address',
-    'latitude'  => 'Latitude',
-    'longitude' => 'Longitude',
+    'name'       => 'Outlet Name',
+    'address'    => 'Outlet Address',
+    'latitude'   => 'Latitude',
+    'longitude'  => 'Longitude',
+    'location'   => 'Location',
+    'coordinate' => 'Coordinate',
 ];
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@ -9,15 +9,13 @@

    <title>{{ config('app.name', 'Laravel') }}</title>

-    <!-- Scripts -->
-    <script src="{{ asset('js/app.js') }}" defer></script>
-
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+    @yield('styles')
 </head>
 <body>
    <div id="app">
@ -79,5 +77,8 @@
            @yield('content')
        </main>
    </div>
+    <!-- Scripts -->
+    <script src="{{ asset('js/app.js') }}"></script>
+    @stack('scripts')
 </body>
 </html>
--- a/resources/views/outlets/show.blade.php
+++ b/resources/views/outlets/show.blade.php
@ -25,5 +25,53 @@
            </div>
        </div>
    </div>
+    <div class="col-md-6">
+        <div class="card">
+            <div class="card-header">{{ trans('outlet.location') }}</div>
+            @if ($outlet->coordinate)
+            <div class="card-body" id="mapid"></div>
+            @else
+            <div class="card-body">{{ __('outlet.no_coordinate') }}</div>
+            @endif
+        </div>
+    </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: 400px; }
+    .popup-content-row { margin: 6px 0; }
+</style>
+@endsection
+@push('scripts')
+<!-- Make sure you put this AFTER Leaflet's CSS -->
+<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
+    integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
+    crossorigin=""></script>
+
+<script>
+    var map = L.map('mapid').setView([{{ $outlet->latitude }}, {{ $outlet->longitude }}], 16);
+
+    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 myIcon = L.icon({
+        iconUrl: "{{ url('images/marker-icon-green.png') }}",
+        shadowUrl: "{{ url('images/marker-shadow.png') }}",
+        iconSize: [25, 41],
+        iconAnchor: [12, 41],
+        popupAnchor: [1, -34],
+        shadowSize: [41, 41],
+        className: "marker-icon-green",
+    });
+
+    L.marker([{{ $outlet->latitude }}, {{ $outlet->longitude }}], { icon: myIcon }).addTo(map)
+        .bindPopup('{!! $outlet->map_popup_content !!}');
+</script>
+@endpush