Rumperuu/Where-in-the-World-is-Ben
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

Amend map centering, add comments

Browse source
This commit is contained in:
Ben Goldsworthy 2022-10-19 22:35:02 +00:00
parent 97eb397a8e
commit 5d33b2b4ca
1 changed files with 37 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
resources/views/tracker.blade.php
View file

@ -62,20 +62,28 @@
<footer> <footer>
<script> <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', { L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19, maxZoom: 19,
attribution: 'OpenStreetMap' attribution: 'OpenStreetMap'
}).addTo(map); }).addTo(map);
/*
* Populate the route line.
*/
var routePoints = L.polyline([ var routePoints = L.polyline([
@foreach($trip->locations as $location) @foreach($trip->locations as $location)
[{{ $location->latitude }}, {{ $location->longitude }}], [{{ $location->latitude }}, {{ $location->longitude }}],
@endforeach @endforeach
]).addTo(map); ]).addTo(map);
/*
* Populate all the checkins and popup texts.
*/
var checkinMarkers = []; var checkinMarkers = [];
var marker = null, popupMarkup = null; var marker = null, popupMarkup = null;
@foreach($trip->checkins as $checkin) @foreach($trip->checkins as $checkin)
marker = L.marker([{{ $checkin->location->latitude }}, {{ $checkin->location->longitude }}]).addTo(map); marker = L.marker([{{ $checkin->location->latitude }}, {{ $checkin->location->longitude }}]).addTo(map);
@ -88,11 +96,37 @@
checkinMarkers[{{ $checkin->id }}] = marker; checkinMarkers[{{ $checkin->id }}] = marker;
@endforeach @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( var currLocation = L.marker(
[{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}], [{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}],
{icon: currLocationMarker}
).addTo(map).setZIndexOffset(1000); ).addTo(map).setZIndexOffset(1000);
currLocation.bindPopup('<p>Current location</p>').openPopup(); currLocation.bindPopup('<p>Current location</p>').openPopup();
/*
* Changes the currently-selected popup.
*/
function toggleCheckin(isOpen, checkinId) { function toggleCheckin(isOpen, checkinId) {
if (isOpen) { if (isOpen) {
var checkins = document.querySelectorAll('details'); var checkins = document.querySelectorAll('details');