Merge pull request #16 from nafiesl/marker_clusters

Adding Marker Clusters on the Outlet Map

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,30 +22,31 @@
 <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') }});
-    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);
+    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 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;