Remove markers, fade out polyline

resources/views/tracker.blade.php

@@ -59,22 +59,24 @@
                     attribution: 'OpenStreetMap'
                 }).addTo(map);
 
-                /*
-                 * Populate the route line.
-                 */
-                var routePoints = L.polyline([
-                    @foreach($trip->locations as $location)
-                        @if(!in_array($location->id, config('app.current_trip_ignore')))
-                    [{{ $location->latitude }}, {{ $location->longitude }}], // {{$location->id}}
-                        @endif
-                    @endforeach
-                ], {
-                    color: '#3d3d3d'
-                }).addTo(map);
+                @for($idx = 0; $idx <= count($trip->locations); $idx += 100)
+                    /*
+                     * Populate the route line.
+                     */
+                    L.polyline([
+                        @foreach(array_slice($trip->locations, $idx, 100) as $location)
+                            @if(!in_array($location->id, config('app.current_trip_ignore')))
+                        [{{ $location->latitude }}, {{ $location->longitude }}], // {{$location->id}}
+                            @endif
+                        @endforeach
+                    ], {
+                        color: 'rgba(62, 62, 62, {{ ( $idx - (-50) ) / (count($trip->locations) - (-50)) }})'
+                    }).addTo(map);
+                @endfor
 
                 /*
                  * Populate all the checkins and popup texts.
-                 */
+                 *
                 var checkinMarkers = [];
                 var marker = null, popupMarkup = null;
                 var markerIcon = L.icon({
@@ -122,7 +124,7 @@
                 
                 checkinMarkers[{{ $checkin->id }}] = marker;
                 @endforeach
-
+                */
                 /*
                  * Fit the map to the last 25 locations, and then zoom out
                  * (to help provide context).