From 32134f39f6053b297e5c2754ef7e362d89597515 Mon Sep 17 00:00:00 2001
From: Nafies Luthfi <nafiesl@gmail.com>
Date: Tue, 30 Mar 2021 22:48:01 +0800
Subject: [PATCH 1/3] Adding marker clusters

---
 resources/views/outlets/map.blade.php | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/resources/views/outlets/map.blade.php b/resources/views/outlets/map.blade.php
index 32e7666..1f9cadb 100644
--- a/resources/views/outlets/map.blade.php
+++ b/resources/views/outlets/map.blade.php
@@ -10,6 +10,8 @@
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
     integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
     crossorigin=""/>
+<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
+<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
 
 <style>
     #mapid { min-height: 500px; }
@@ -20,6 +22,7 @@
 <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
     integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
     crossorigin=""></script>
+<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
 
 <script>
     var map = L.map('mapid').setView([{{ config('leaflet.map_center_latitude') }}, {{ config('leaflet.map_center_longitude') }}], {{ config('leaflet.zoom_level') }});
@@ -28,23 +31,26 @@
     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 markers = L.markerClusterGroup();
 
     axios.get('{{ route('api.outlets.index') }}')
     .then(function (response) {
         console.log(response.data);
-        L.geoJSON(response.data, {
+        var marker = L.geoJSON(response.data, {
             pointToLayer: function(geoJsonPoint, latlng) {
                 return L.marker(latlng);
             }
         })
         .bindPopup(function (layer) {
             return layer.feature.properties.map_popup_content;
-        }).addTo(map);
+        });
+        markers.addLayer(marker);
     })
     .catch(function (error) {
         console.log(error);
     });
 
+    map.addLayer(markers);
     @can('create', new App\Outlet)
     var theMarker;
 

From 1042f884afe8790f5629c56ecb95aa005a0548c1 Mon Sep 17 00:00:00 2001
From: Nafies Luthfi <nafiesl@gmail.com>
Date: Wed, 31 Mar 2021 09:48:04 +0800
Subject: [PATCH 2/3] Fix missing marker popup

---
 resources/views/outlets/map.blade.php | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/resources/views/outlets/map.blade.php b/resources/views/outlets/map.blade.php
index 1f9cadb..e7c0a17 100644
--- a/resources/views/outlets/map.blade.php
+++ b/resources/views/outlets/map.blade.php
@@ -38,19 +38,18 @@
         console.log(response.data);
         var marker = L.geoJSON(response.data, {
             pointToLayer: function(geoJsonPoint, latlng) {
-                return L.marker(latlng);
+                return L.marker(latlng).bindPopup(function (layer) {
+                    return layer.feature.properties.map_popup_content;
+                });
             }
-        })
-        .bindPopup(function (layer) {
-            return layer.feature.properties.map_popup_content;
         });
         markers.addLayer(marker);
     })
     .catch(function (error) {
         console.log(error);
     });
-
     map.addLayer(markers);
+
     @can('create', new App\Outlet)
     var theMarker;
 

From 85068cd26e280fff13876ec47714ab0960896362 Mon Sep 17 00:00:00 2001
From: Nafies Luthfi <nafiesl@gmail.com>
Date: Wed, 31 Mar 2021 10:20:52 +0800
Subject: [PATCH 3/3] Remove unused lines

---
 resources/views/outlets/map.blade.php | 2 --
 1 file changed, 2 deletions(-)

diff --git a/resources/views/outlets/map.blade.php b/resources/views/outlets/map.blade.php
index e7c0a17..094dda7 100644
--- a/resources/views/outlets/map.blade.php
+++ b/resources/views/outlets/map.blade.php
@@ -26,7 +26,6 @@
 
 <script>
     var map = L.map('mapid').setView([{{ config('leaflet.map_center_latitude') }}, {{ config('leaflet.map_center_longitude') }}], {{ config('leaflet.zoom_level') }});
-    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'
@@ -35,7 +34,6 @@
 
     axios.get('{{ route('api.outlets.index') }}')
     .then(function (response) {
-        console.log(response.data);
         var marker = L.geoJSON(response.data, {
             pointToLayer: function(geoJsonPoint, latlng) {
                 return L.marker(latlng).bindPopup(function (layer) {