@panoramax/web-viewer 4.0.3-develop-a14de8c5 → 4.0.3-develop-a32876ba

package/config/jest/mocks.js

@@ -79,7 +79,9 @@ jest.mock("maplibre-gl", () => ({
 	GeolocateControl: class {
 		onAdd() {;}
 	},
-	Marker: jest.fn(),
+	Marker: class {
+		setDraggable() {;}
+	},
 	Popup: function() {
 		return {
 			on: jest.fn(),

package/docs/reference/components/ui/Map.md

@@ -17,7 +17,7 @@
     * [.onceLayerReady(layerId)](#Panoramax.components.ui.Map+onceLayerReady) ⇒ <code>Promise</code>
     * [.setVisibleUsers(visibleIds)](#Panoramax.components.ui.Map+setVisibleUsers)
     * [.filterUserLayersContent(dataType, filter)](#Panoramax.components.ui.Map+filterUserLayersContent)
-    * [.displayPictureMarker(lon, lat, heading, [skipCenter])](#Panoramax.components.ui.Map+displayPictureMarker)
+    * [.displayPictureMarker(lon, lat, heading, [skipCenter], [picId])](#Panoramax.components.ui.Map+displayPictureMarker)
     * [.reloadLayersStyles()](#Panoramax.components.ui.Map+reloadLayersStyles)
     * [.addEventListener(type, listener)](#Panoramax.components.ui.Map+addEventListener)
     * [.setVisibleUsers(visibleIds)](#Panoramax.components.ui.Map+setVisibleUsers)
@@ -51,6 +51,7 @@ A shorthand `addEventListener` function is added for simpler usage.
 | [options.raster] | <code>object</code> |  | The MapLibre raster source for aerial background. This must be a JSON object following [MapLibre raster source definition](https://maplibre.org/maplibre-style-spec/sources/#raster). |
 | [options.background] | <code>string</code> | <code>&quot;streets&quot;</code> | Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street. |
 | [options.attributionControl.customAttribution] | <code>string</code> |  | To override default map attribution. |
+| [options.picMarkerDraggable] | boolean | false | To make the picture marker draggable, default to false. |
 
 **Example**  
 ```js
@@ -148,7 +149,7 @@ Filter the visible data content in all visible map layers
 
 <a name="Panoramax.components.ui.Map+displayPictureMarker"></a>
 
-### map.displayPictureMarker(lon, lat, heading, [skipCenter])
+### map.displayPictureMarker(lon, lat, heading, [skipCenter], [picId])
 Shows on map a picture position and heading.
 
 **Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map)  

package/docs/reference/components/ui/MapMore.md

@@ -17,7 +17,7 @@
     * [.onceLayerReady(layerId)](Map.md/#Panoramax.components.ui.Map+onceLayerReady) ⇒ <code>Promise</code>
     * [.setVisibleUsers(visibleIds)](Map.md/#Panoramax.components.ui.Map+setVisibleUsers)
     * [.filterUserLayersContent(dataType, filter)](Map.md/#Panoramax.components.ui.Map+filterUserLayersContent)
-    * [.displayPictureMarker(lon, lat, heading, [skipCenter])](#Panoramax.components.ui.Map+displayPictureMarker)
+    * [.displayPictureMarker(lon, lat, heading, [skipCenter], [picId])](#Panoramax.components.ui.Map+displayPictureMarker)
     * [.reloadLayersStyles()](Map.md/#Panoramax.components.ui.Map+reloadLayersStyles)
     * [.addEventListener(type, listener)](Map.md/#Panoramax.components.ui.Map+addEventListener)
     * ["filters-changed"](#Panoramax.components.ui.MapMore+event_filters-changed)
@@ -148,7 +148,7 @@ Filter the visible data content in all visible map layers
 
 <a name="Panoramax.components.ui.Map+displayPictureMarker"></a>
 
-### mapMore.displayPictureMarker(lon, lat, heading, [skipCenter])
+### mapMore.displayPictureMarker(lon, lat, heading, [skipCenter], [picId])
 Shows on map a picture position and heading.
 
 **Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.0.3-develop-a14de8c5",
+  "version": "4.0.3-develop-a32876ba",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/core/Editor.js

@@ -149,6 +149,7 @@ export default class Editor extends Basic {
 				background: this.background,
 				supplementaryStyle: this._createMapStyle(),
 				zoom: 15, // Hack to avoid _initMapPosition call
+				picMarkerDraggable: true,
 			});
 			linkMapAndPhoto(this);
 			this.loader.setAttribute("value", 50);

package/src/components/ui/Map.js

@@ -37,6 +37,7 @@ maplibregl.addProtocol("pmtiles", new pmtiles.Protocol().tile);
  * @param {object} [options.raster] The MapLibre raster source for aerial background. This must be a JSON object following [MapLibre raster source definition](https://maplibre.org/maplibre-style-spec/sources/#raster).
  * @param {string} [options.background=streets] Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street.
  * @param {string} [options.attributionControl.customAttribution] To override default map attribution.
+ * @param {boolean} [options.picMarkerDraggable] To make the picture marker draggable, default to false.
  * @fires Panoramax.components.ui.Map#background-changed
  * @fires Panoramax.components.ui.Map#users-changed
  * @fires Panoramax.components.ui.Map#sequence-hover
@@ -421,8 +422,9 @@ export default class Map extends maplibregl.Map {
 	 * @param {number} lat The latitude
 	 * @param {number} heading The heading
 	 * @param {boolean} [skipCenter=false] Set to true to avoid map centering on marker
+	 * @param {string} picId The picture Id
 	 */
-	displayPictureMarker(lon, lat, heading, skipCenter = false) {
+	displayPictureMarker(lon, lat, heading, skipCenter = false, picId = null) {
 		this._picMarkerPreview.remove();
 
 		// Show marker corresponding to selection
@@ -431,6 +433,7 @@ export default class Map extends maplibregl.Map {
 				.setLngLat([lon, lat])
 				.setRotation(heading)
 				.addTo(this);
+			this._picMarker.picId = picId ;
 		}
 		else {
 			this._picMarker.remove();
@@ -880,8 +883,12 @@ export default class Map extends maplibregl.Map {
 		img.src = selected ? MarkerSelectedSVG : MarkerBaseSVG;
 		img.alt = "";
 		return new maplibregl.Marker({
-			element: img
-		});
+			element: img,
+			picId: null
+		})
+			// only picMarker could be draggable, don't for picMarkerPreview.
+			.setDraggable(selected && this._options.picMarkerDraggable)
+		;
 	}
 
 	/**

package/src/utils/map.js

@@ -408,7 +408,7 @@ export function linkMapAndPhoto(parent) {
 			}
 		}
 		else {
-			parent.map.displayPictureMarker(e.detail.lon, e.detail.lat, parent.psv.getXY().x, e.detail.first);
+			parent.map.displayPictureMarker(e.detail.lon, e.detail.lat, parent.psv.getXY().x, e.detail.first, e.detail.picId);
 			if(parent?.isMapWide?.()) {
 				parent?.mini?.removeAttribute("collapsed");
 			}