Add interactive map on outlet markers/locations

app/Http/Controllers/Api/OutletController.php

@@ -6,6 +6,7 @@ use App\Outlet;
 use Illuminate\Http\Request;
 use App\Http\Controllers\Controller;
 use App\Http\Resources\OutletCollection;
+use App\Http\Resources\Outlet as OutletResource;
 
 class OutletController extends Controller
 {
@@ -15,4 +16,28 @@ class OutletController extends Controller
 
         return new OutletCollection($outlets);
     }
+
+    public function geoJSON(Request $request)
+    {
+        $outlets = Outlet::all();
+
+        $geoJSONdata = $outlets->map(function ($outlet) {
+            return [
+                'type'       => 'Feature',
+                'properties' => new OutletResource($outlet),
+                'geometry'   => [
+                    'type'        => 'Point',
+                    'coordinates' => [
+                        $outlet->longitude,
+                        $outlet->latitude,
+                    ],
+                ],
+            ];
+        });
+
+        return response()->json([
+            'type'     => 'FeatureCollection',
+            'features' => $geoJSONdata,
+        ]);
+    }
 }

app/Http/Controllers/OutletMapController.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class OutletMapController extends Controller
+{
+    public function index(Request $request)
+    {
+        return view('outlets.map');
+    }
+}

resources/views/layouts/app.blade.php

@@ -37,6 +37,7 @@
                     <!-- Right Side Of Navbar -->
                     <ul class="navbar-nav ml-auto">
                         <!-- Authentication Links -->
+                        <li class="nav-item"><a class="nav-link" href="{{ route('outlet_map.index') }}">{{ __('outlet.list') }}</a></li>
                         @guest
                             <li class="nav-item">
                                 <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>

resources/views/outlets/map.blade.php

@@ -0,0 +1,61 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="container">
+    <div class="card">
+        <div class="card-header">{{ __('outlet.list') }}</div>
+
+        <div class="card-body" id="mapid"></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 { min-height: 500px; }
+</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(['-3.333333', '114.583333'], 12);
+    var baseUrl = "{{ url('/') }}";
+
+    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);
+
+    axios.get('{{ route('api.outlets.geojson') }}')
+    .then(function (response) {
+        console.log(response.data);
+        L.geoJSON(response.data, {
+            pointToLayer: function(geoJsonPoint, latlng) {
+                var myIcon = L.icon({
+                    iconUrl: baseUrl + '/images/marker-icon-green.png',
+                    shadowUrl: baseUrl + '/images/marker-shadow.png',
+                    iconSize: [25, 41],
+                    iconAnchor: [12, 41],
+                    popupAnchor: [1, -34],
+                    shadowSize: [41, 41],
+                    className: 'marker-icon-green',
+                });
+                return L.marker(latlng, { icon: myIcon });
+            }
+        })
+        .bindPopup(function (layer) {
+            return layer.feature.properties.map_popup_content;
+        }).addTo(map);
+    })
+    .catch(function (error) {
+        console.log(error);
+    });
+</script>
+@endpush

routes/api.php

@@ -22,4 +22,5 @@ Route::group(['as' => 'api.', 'namespace' => 'Api'], function () {
      * Outlets Endpoints
      */
     Route::get('outlets', 'OutletController@index')->name('outlets.index');
+    Route::get('outlets-geojson', 'OutletController@geoJSON')->name('outlets.geojson');
 });

routes/web.php

@@ -22,4 +22,5 @@ Route::get('/home', 'HomeController@index')->name('home');
 /*
  * Outlets Routes
  */
+Route::get('/our_outlets', 'OutletMapController@index')->name('outlet_map.index');
 Route::resource('outlets', 'OutletController');