Amend map centering, add comments

resources/views/tracker.blade.php

@@ -62,20 +62,28 @@
 
         <footer>
             <script>
-                var map = L.map('map').setView([{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}], 7);
+                /*
+                 * Initialise the map
+                 */
+                var map = L.map('map');//.setView([{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}], 7);
                 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                     maxZoom: 19,
                     attribution: 'OpenStreetMap'
                 }).addTo(map);
 
+                /*
+                 * Populate the route line.
+                 */
                 var routePoints = L.polyline([
                     @foreach($trip->locations as $location)
                     [{{ $location->latitude }}, {{ $location->longitude }}],
                     @endforeach
                 ]).addTo(map);
 
+                /*
+                 * Populate all the checkins and popup texts.
+                 */
                 var checkinMarkers = [];
-                
                 var marker = null, popupMarkup = null;
                 @foreach($trip->checkins as $checkin)
                 marker = L.marker([{{ $checkin->location->latitude }}, {{ $checkin->location->longitude }}]).addTo(map);
@@ -88,11 +96,37 @@
                 checkinMarkers[{{ $checkin->id }}] = marker;
                 @endforeach
 
+                /*
+                 * Fit the map to the last 25 locations, and then zoom out
+                 * (to help provide context).
+                 */
+                map.fitBounds([
+                @foreach(array_slice(array_reverse($trip->locations), 0, 25) as $location)
+                    [{{ $location->latitude }}, {{$location->longitude }}],
+                @endforeach    
+                ]);
+                map.zoomOut(2);
+
+                /*
+                 * Add the current location marker.
+                 *
+                 * If this goes before the `fitBounds()`, it ends up uncentered.
+                 * TODO: Revisit once fixed with other popups.
+                 */
+                var currLocationMarker = L.icon({
+                    iconUrl: 'current-location-icon.png',
+                    iconSize: [30, 45],
+                });
+
                 var currLocation = L.marker(
                     [{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}], 
+                    {icon: currLocationMarker} 
                 ).addTo(map).setZIndexOffset(1000);
                 currLocation.bindPopup('<p>Current location</p>').openPopup();
-                
+
+                /*
+                 * Changes the currently-selected popup.
+                 */
                 function toggleCheckin(isOpen, checkinId) {
                     if (isOpen) {
                         var checkins = document.querySelectorAll('details');