Add draggable marker changes

public-report/template/component/location-geocode-header.html

@@ -71,6 +71,7 @@ function displaySuggestions(suggestions) {
 			
 			// Display the selected location details
 			displaySelectedLocation(suggestion);
+			setMapMarker(suggestion.geometry.coordinates);
 		});
 		
 		suggestionsContainer.appendChild(item);

public-report/template/component/map-header.html

@@ -2,11 +2,42 @@
 <script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
 <link href='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.css' rel='stylesheet' />
 <script>
+var map = null;
+var markers = [];
+function setMapMarker(coords) {
+	console.log("Setting map marker", coords);
+	map.jumpTo({
+		center: coords,
+		zoom: 14,
+	});
+	markers.forEach((marker) => marker.remove());
+	addMarker(coords);
+}
+function addMarker(coords) {
+	const marker = new mapboxgl.Marker({
+		color: "#FF0000",
+		draggable: true
+	}).setLngLat(coords).addTo(map);
+	marker.on('dragend', onMapMarkerDragEnd(marker));
+	markers.push(marker);
+}
+function onMapMarkerDragEnd(marker) {
+	return function() {
+		const lngLat = marker.getLngLat();
+		displaySelectedCoordinates(lngLat);
+	}
+}
+function displaySelectedCoordinates(lngLat) {
+	const gpsDisplay = document.getElementById("gps-display");
+	gpsDisplay.classList.remove('d-none');
+	longitude.textContent = lngLat.lng;
+	latitude.textContent = lngLat.lat;
+}
 function onLoadMap() {
 	const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
 	console.log("Setting up the map...");
 	mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;
-	const map = new mapboxgl.Map({
+	map = new mapboxgl.Map({
 		container: "map",
 		center: {
 			lat: 36.2,
@@ -42,14 +73,10 @@ function updateMapWithLocation(map) {
 					},
 					zoom: 14,
 				});
-				const marker = new mapboxgl.Marker({
-					color: "#FF0000",
-					draggable: true
-				}).setLngLat({
-					lat: position.coords.latitude,
-					lng: position.coords.longitude,
-				}).addTo(map);
-
+				addMarker([
+					position.coords.longitude,
+					position.coords.latitude,
+				]);
 			},
 			// on error
 			function(error) {

public-report/template/pool.html

@@ -103,6 +103,16 @@
 					<div class="col-md-12">
 						{{template "location-geocode"}}
 					</div>
+					<div class="col-md-12 d-none" id="gps-display">
+						<div class="location-detail">
+							<div class="detail-label">Longitude</div>
+							<div id="longitude" class="detail-value">-</div>
+						</div>
+						<div class="location-detail">
+							<div class="detail-label">Latitude</div>
+							<div id="latitude" class="detail-value">-</div>
+						</div>
+					</div>
 				</div>
 				
 				<p class="small text-muted mb-2">You can also click on the map to mark the location precisely</p>