Fix markers not showing on mobile browsers

This commit is contained in:
Ben Goldsworthy 2022-10-30 02:14:45 +00:00
parent 5ecc34a046
commit 615ebfbd35
3 changed files with 13 additions and 2 deletions

BIN
public/marker-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
public/marker-shadow.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 618 B

View file

@ -88,9 +88,20 @@
*/
var checkinMarkers = [];
var marker = null, popupMarkup = null;
L.Icon.Default.imagePath = "https://track.bengoldsworthy.net/images/";
var markerIcon = L.icon({
iconAnchor: [12, 41],
iconSize: [25, 41],
iconUrl: "images/marker-icon.png",
popupAnchor: [1, -34],
shadowSize: [41, 41],
shadowUrl: "images/marker-shadow.png",
tooltipAnchor: [16, -28]
});
@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 }}],
{
icon: markerIcon
}).addTo(map);
popupMarkup = `<h2 class="popup__title">{!! $checkin->title ?? "<i>Untitled</i>" !!}</h2>`;
popupMarkup += `<p class="popup__note">{!! $checkin->note !!}</p>`;