<div id="map" class="w-100" style="height: 30em;"></div>

@section('page-scripts')
	<script type="text/javascript" src="//unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
	<link type='text/css' href="//unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel='stylesheet'>

	<script type="text/javascript">
		var map = new maplibregl.Map({
			container: 'map', // container id
			style: '/js/maplibre-style.json', // style URL
			center: [{{ $o->gps_lon }}, {{ $o->gps_lat }}], // starting position [lng, lat]
			zoom: 12 // starting zoom
		});

		let marker = new maplibregl.Marker()
			.setLngLat([{{ $o->gps_lon }}, {{ $o->gps_lat }}])
			.addTo(map);
	</script>
@append