From 8f8a40df7f288e5320ef025fcbe44d745157cb05 Mon Sep 17 00:00:00 2001 From: ray Date: Thu, 14 Dec 2023 11:10:57 -0800 Subject: [PATCH] DBC22-1337: removed radius display and interaction --- src/frontend/src/Components/Map.js | 68 ++++++------------- .../src/Components/cameras/WebcamCard.js | 1 + src/frontend/src/Components/map/helper.js | 66 ------------------ src/frontend/src/Components/map/mapPopup.js | 4 +- 4 files changed, 24 insertions(+), 115 deletions(-) diff --git a/src/frontend/src/Components/Map.js b/src/frontend/src/Components/Map.js index c00720f3e..5c3400bf0 100644 --- a/src/frontend/src/Components/Map.js +++ b/src/frontend/src/Components/Map.js @@ -24,7 +24,6 @@ import { getEvents } from './data/events.js'; import { getEventsLayer } from './map/layers/eventsLayer.js'; import { fitMap, - getCameraCircle, blueLocationMarkup, redLocationMarkup, setLocationPin, @@ -155,8 +154,6 @@ export default function MapWrapper({ }), }); - const { circle, radiusLayer } = getCameraCircle(camera); - // initialize starting optional layers layers.current = { tid: Date.now(), @@ -190,14 +187,7 @@ export default function MapWrapper({ // create map mapRef.current = new Map({ target: mapElement.current, - layers: radiusLayer - ? [ - vectorLayer, - radiusLayer, - ] - : [ - vectorLayer, - ], + layers: [vectorLayer], overlays: [popup.current], view: mapView.current, controls: [new ScaleLine({ units: 'metric' })], @@ -212,13 +202,15 @@ export default function MapWrapper({ await loadCameras(); await loadEvents(); } - if(camera){ - popup.current.setPosition(handleCenter(camera) - ); + + if (camera && !isPreview) { + popup.current.setPosition(handleCenter(camera)); popup.current.getElement().style.top = '40px'; - if(camera.event_type){ + + if (camera.event_type) { updateClickedEvent(camera); - }else{ + + } else { updateClickedCamera(camera); } } @@ -230,7 +222,6 @@ export default function MapWrapper({ // Click states const resetClickedStates = (clickedFeature) => { - console.log("resetting click state") if (clickedCameraRef.current && clickedFeature != clickedCameraRef.current) { clickedCameraRef.current.setStyle(cameraStyles['static']); updateClickedCamera(null); @@ -252,37 +243,22 @@ export default function MapWrapper({ } const camClickHandler = (feature) => { - const camData = feature.getProperties(); - if (isPreview) { - // Only switch context on clicking cameras within circle - if (circle && - circle.intersectsCoordinate(fromLonLat(camData.location.coordinates)) - ) { - mapView.current.animate({ - center: fromLonLat(camData.location.coordinates), - }); - - cameraHandler(camData); - } - - } else { - resetClickedStates(feature); + resetClickedStates(feature); - // set new clicked camera feature - feature.setStyle(cameraStyles['active']); - feature.setProperties({ clicked: true }, true); + // set new clicked camera feature + feature.setStyle(cameraStyles['active']); + feature.setProperties({ clicked: true }, true); - popup.current.setPosition( - feature.getGeometry().getCoordinates(), - ); - popup.current.getElement().style.top = '40px'; + popup.current.setPosition( + feature.getGeometry().getCoordinates(), + ); + popup.current.getElement().style.top = '40px'; - updateClickedCamera(feature); + updateClickedCamera(feature); - cameraPopupRef.current = popup; + cameraPopupRef.current = popup; - setTimeout(resetCameraPopupRef, 500); - } + setTimeout(resetCameraPopupRef, 500); } const eventClickHandler = (feature) => { @@ -536,7 +512,6 @@ export default function MapWrapper({ } function closePopup() { - console.log("closing") popup.current.setPosition(undefined); // check for active camera icons @@ -569,7 +544,6 @@ export default function MapWrapper({ const setRelatedGeometry = (event, state) => { if (event.getId()) { - console.log("checking related geometry"); const relatedFeature = layers.current['eventsLayer'] .getSource() .getFeatureById(event.ol_uid); @@ -684,7 +658,7 @@ export default function MapWrapper({ />
{clickedCamera && - getCamPopup(clickedCamera, updateClickedCamera, navigate, cameraPopupRef) + getCamPopup(clickedCamera, updateClickedCamera, navigate, cameraPopupRef, isPreview) } {clickedEvent && @@ -713,7 +687,7 @@ export default function MapWrapper({ variant="primary" onClick={() => { if (camera) { - setZoomPan(mapView, null, fromLonLat(camera.location.coordinates)); + setZoomPan(mapView, 12, fromLonLat(camera.location.coordinates)); } }}> diff --git a/src/frontend/src/Components/cameras/WebcamCard.js b/src/frontend/src/Components/cameras/WebcamCard.js index f8ffcee37..bdd65a0af 100644 --- a/src/frontend/src/Components/cameras/WebcamCard.js +++ b/src/frontend/src/Components/cameras/WebcamCard.js @@ -131,6 +131,7 @@ export default function WebcamCard(props) {

{camera.caption}

+ ); diff --git a/src/frontend/src/Components/map/helper.js b/src/frontend/src/Components/map/helper.js index 6216ab83d..cbf1d126d 100644 --- a/src/frontend/src/Components/map/helper.js +++ b/src/frontend/src/Components/map/helper.js @@ -2,13 +2,8 @@ import { lineString, bbox } from "@turf/turf"; // Openlayers -import { Circle } from 'ol/geom.js'; import { fromLonLat, transformExtent } from 'ol/proj'; -import { Style } from 'ol/style.js'; -import Feature from 'ol/Feature.js'; import Overlay from 'ol/Overlay.js'; -import VectorLayer from 'ol/layer/Vector'; -import VectorSource from 'ol/source/Vector'; // Styling import { eventStyles } from '../data/featureStyleDefinitions.js'; @@ -104,67 +99,6 @@ export const zoomOut = (mapView) => { setZoomPan(mapView, mapView.getZoom() - 1); } -// Geometry -export const getCameraCircle = (camera) => { - if (!camera) { - return {}; - } - - if (typeof camera === 'string') { - camera = JSON.parse(camera); - } - const circle = new Circle(fromLonLat(camera.location.coordinates), 5000); - const circleFeature = new Feature({ - geometry: circle, - }); - - circleFeature.setStyle( - new Style({ - renderer(coordinates, state) { - const [[x, y], [x1, y1]] = coordinates; - const ctx = state.context; - const dx = x1 - x; - const dy = y1 - y; - const radius = Math.sqrt(dx * dx + dy * dy); - - const innerRadius = 0; - const outerRadius = radius * 1.4; - - const gradient = ctx.createRadialGradient( - x, - y, - innerRadius, - x, - y, - outerRadius, - ); - gradient.addColorStop(0, 'rgba(255,0,0,0)'); - gradient.addColorStop(0.6, 'rgba(255,0,0,0.2)'); - gradient.addColorStop(1, 'rgba(255,0,0,0.8)'); - ctx.beginPath(); - ctx.arc(x, y, radius, 0, 2 * Math.PI, true); - ctx.fillStyle = gradient; - ctx.fill(); - - ctx.arc(x, y, radius, 0, 2 * Math.PI, true); - ctx.strokeStyle = 'rgba(255,0,0,1)'; - ctx.stroke(); - }, - }), - ); - - const radiusLayer = new VectorLayer({ - source: new VectorSource({ - features: [circleFeature], - }), - }); - - return { - circle: circle, - radiusLayer: radiusLayer, - }; -} - // Location pins export const blueLocationMarkup = ` diff --git a/src/frontend/src/Components/map/mapPopup.js b/src/frontend/src/Components/map/mapPopup.js index cd9d96181..6b83b5604 100644 --- a/src/frontend/src/Components/map/mapPopup.js +++ b/src/frontend/src/Components/map/mapPopup.js @@ -48,12 +48,12 @@ function renderCamGroup(camFeature, setClickedCamera, currentCamData) { return res; } -export function getCamPopup(camFeature, setClickedCamera, navigate, cameraPopupRef) { +export function getCamPopup(camFeature, setClickedCamera, navigate, cameraPopupRef, isPreview) { const rootCamData = camFeature.id ? camFeature : camFeature.getProperties(); const camData = !rootCamData.groupIndex ? rootCamData : rootCamData.camGroup[rootCamData.groupIndex]; const handlePopupClick = (e) => { - if (!cameraPopupRef.current) { + if (!cameraPopupRef.current && !isPreview) { navigate(`/cameras/${camData.id}`); cameraPopupRef.current = null; }