-
-
-
-
{gettext('Location')}
+
+
+
+
-
+
{gettext('Location')}
- )
+
+
);
};
ClusterPhotos.propTypes = {
- view: PropTypes.object,
+ metadata: PropTypes.object,
markerIds: PropTypes.array,
onClose: PropTypes.func,
- onDelete: PropTypes.func,
};
export default ClusterPhotos;
diff --git a/frontend/src/metadata/views/map/index.js b/frontend/src/metadata/views/map/index.js
index cf57e2bda61..a4d51bf9eb7 100644
--- a/frontend/src/metadata/views/map/index.js
+++ b/frontend/src/metadata/views/map/index.js
@@ -14,7 +14,7 @@ import './index.css';
const Map = () => {
const [showGallery, setShowGallery] = useState(false);
const [markerIds, setMarkerIds] = useState([]);
- const { metadata, store } = useMetadataView();
+ const { metadata } = useMetadataView();
const repoID = window.sfMetadataContext.getSetting('repoID');
@@ -51,10 +51,6 @@ const Map = () => {
window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_MAP_VIEW_TOOLBAR, false);
}, []);
- const onDeleteLocationPhotos = useCallback((ids) => {
- store.deleteLocationPhotos(ids);
- }, [store]);
-
useEffect(() => {
window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.MAP_VIEW, metadata.view);
}, [metadata.view]);
@@ -62,7 +58,7 @@ const Map = () => {
return (
<>
{showGallery ? (
-
+
) : (
)}
diff --git a/frontend/src/metadata/views/map/main.js b/frontend/src/metadata/views/map/main.js
index d1f04d94c0c..e9770b9fc48 100644
--- a/frontend/src/metadata/views/map/main.js
+++ b/frontend/src/metadata/views/map/main.js
@@ -71,10 +71,26 @@ const Main = ({ validImages, onOpen }) => {
}
}, []);
+ const saveMapState = useCallback(() => {
+ if (!mapRef.current) return;
+ const point = mapRef.current.getCenter && mapRef.current.getCenter();
+ const zoom = mapRef.current.getZoom && mapRef.current.getZoom();
+ window.sfMetadataContext.localStorage.setItem('map-center', point);
+ window.sfMetadataContext.localStorage.setItem('map-zoom', zoom);
+ }, []);
+
+ const loadMapState = useCallback(() => {
+ const savedCenter = window.sfMetadataContext.localStorage.getItem('map-center') || DEFAULT_POSITION;
+ const savedZoom = window.sfMetadataContext.localStorage.getItem('map-zoom') || DEFAULT_ZOOM;
+ return { center: savedCenter, zoom: savedZoom };
+ }, []);
+
const onClickMarker = useCallback((e, markers) => {
+ saveMapState();
+
const imageIds = markers.map(marker => marker._imageId);
onOpen(imageIds);
- }, [onOpen]);
+ }, [onOpen, saveMapState]);
const renderMarkersBatch = useCallback(() => {
if (!validImages.length || !clusterRef.current) return;
@@ -110,23 +126,23 @@ const Main = ({ validImages, onOpen }) => {
const renderBaiduMap = useCallback(() => {
if (!mapRef.current || !window.BMap.Map) return;
- let mapCenter = window.sfMetadataContext.localStorage.getItem('map-center') || DEFAULT_POSITION;
+ let { center, zoom } = loadMapState();
// ask for user location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((userInfo) => {
- mapCenter = { lng: userInfo.coords.longitude, lat: userInfo.coords.latitude };
- window.sfMetadataContext.localStorage.setItem('map-center', mapCenter);
+ center = { lng: userInfo.coords.longitude, lat: userInfo.coords.latitude };
+ window.sfMetadataContext.localStorage.setItem('map-center', center);
});
}
- if (!isValidPosition(mapCenter?.lng, mapCenter?.lat)) return;
+ if (!isValidPosition(center?.lng, center?.lat)) return;
- const gcPosition = wgs84_to_gcj02(mapCenter.lng, mapCenter.lat);
+ const gcPosition = wgs84_to_gcj02(center.lng, center.lat);
const bdPosition = gcj02_to_bd09(gcPosition.lng, gcPosition.lat);
const { lng, lat } = bdPosition;
mapRef.current = new window.BMap.Map('sf-metadata-map-container', { enableMapClick: false });
const point = new window.BMap.Point(lng, lat);
- mapRef.current.centerAndZoom(point, DEFAULT_ZOOM);
+ mapRef.current.centerAndZoom(point, zoom);
mapRef.current.enableScrollWheelZoom(true);
const savedValue = window.sfMetadataContext.localStorage.getItem('map-type');
@@ -138,7 +154,7 @@ const Main = ({ validImages, onOpen }) => {
batchIndexRef.current = 0;
renderMarkersBatch();
- }, [addMapController, initializeClusterer, initializeUserMarker, renderMarkersBatch, getMapType]);
+ }, [addMapController, initializeClusterer, initializeUserMarker, renderMarkersBatch, getMapType, loadMapState]);
useEffect(() => {
const switchMapTypeSubscribe = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.SWITCH_MAP_TYPE, (newType) => {
@@ -150,7 +166,7 @@ const Main = ({ validImages, onOpen }) => {
switchMapTypeSubscribe();
};
- }, [getMapType]);
+ }, [getMapType, saveMapState]);
useEffect(() => {
if (mapInfo.type === MAP_PROVIDER.B_MAP) {
diff --git a/frontend/src/metadata/views/map/overlay/custom-image-overlay.js b/frontend/src/metadata/views/map/overlay/custom-image-overlay.js
index b58ecd096ea..b882bfbe114 100644
--- a/frontend/src/metadata/views/map/overlay/custom-image-overlay.js
+++ b/frontend/src/metadata/views/map/overlay/custom-image-overlay.js
@@ -30,13 +30,30 @@ const customImageOverlay = (center, image, callback) => {
this._div.append(label);
const eventHandler = (event) => {
- event.stopPropagation();
event.preventDefault();
this._callback && this._callback(event, [{ _imageId: this._imageId }]);
};
if (Utils.isDesktop()) {
- this._div.addEventListener('click', eventHandler);
+ let clickTimeout;
+ this._div.addEventListener('click', (event) => {
+ if (clickTimeout) {
+ clearTimeout(clickTimeout);
+ clickTimeout = null;
+ return;
+ }
+ clickTimeout = setTimeout(() => {
+ eventHandler(event);
+ clickTimeout = null;
+ }, 300);
+ });
+ this._div.addEventListener('dblclick', (e) => {
+ e.preventDefault();
+ if (clickTimeout) {
+ clearTimeout(clickTimeout);
+ clickTimeout = null;
+ }
+ });
} else {
this._div.addEventListener('touchend', eventHandler);
}
diff --git a/media/js/map/marker-clusterer.js b/media/js/map/marker-clusterer.js
index 5f7e3100f0d..41f1aca44f1 100644
--- a/media/js/map/marker-clusterer.js
+++ b/media/js/map/marker-clusterer.js
@@ -580,14 +580,29 @@ var BMapLib = window.BMapLib = BMapLib || {};
var thatMap = this._map;
var thatBounds = this.getBounds();
- this._clusterMarker.addEventListener("click",(event) => {
- // thatMap.setViewport(thatBounds);
+ let clickTimeout;
+ this._clusterMarker.addEventListener("click", (event) => {
+ if (clickTimeout) {
+ clearTimeout(clickTimeout);
+ clickTimeout = null;
+ return;
+ }
+ clickTimeout = setTimeout(() => {
if (this._markerClusterer && typeof this._markerClusterer.getCallback() === 'function') {
- const markers = this._markers;
- this._markerClusterer.getCallback()(event, markers);
+ const markers = this._markers;
+ this._markerClusterer.getCallback()(event, markers);
}
+ clickTimeout = null;
+ }, 300); // Delay to differentiate between single and double click
});
+ this._clusterMarker.addEventListener("dblclick", (event) => {
+ if (clickTimeout) {
+ clearTimeout(clickTimeout);
+ clickTimeout = null;
+ }
+ // Do nothing on double click
+ });
};
/**