Skip to content

Commit

Permalink
DBC22-1337: removed radius display and interaction
Browse files Browse the repository at this point in the history
  • Loading branch information
@ray-oxd
ray-oxd committed Dec 14, 2023
1 parent 3e520d5 commit 8f8a40d
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 115 deletions.
68 changes: 21 additions & 47 deletions src/frontend/src/Components/Map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ import { getEvents } from './data/events.js';
import { getEventsLayer } from './map/layers/eventsLayer.js';
import {
fitMap,
getCameraCircle,
blueLocationMarkup,
redLocationMarkup,
setLocationPin,
Expand Down Expand Up @@ -155,8 +154,6 @@ export default function MapWrapper({
}),
});

const { circle, radiusLayer } = getCameraCircle(camera);

// initialize starting optional layers
layers.current = {
tid: Date.now(),
Expand Down Expand Up @@ -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' })],
Expand All @@ -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);
}
}
Expand All @@ -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);
Expand All @@ -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) => {
Expand Down Expand Up @@ -536,7 +512,6 @@ export default function MapWrapper({
}

function closePopup() {
console.log("closing")
popup.current.setPosition(undefined);

// check for active camera icons
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -684,7 +658,7 @@ export default function MapWrapper({
/>
<div id="popup-content" className="ol-popup-content">
{clickedCamera &&
getCamPopup(clickedCamera, updateClickedCamera, navigate, cameraPopupRef)
getCamPopup(clickedCamera, updateClickedCamera, navigate, cameraPopupRef, isPreview)
}

{clickedEvent &&
Expand Down Expand Up @@ -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));
}
}}>
<CurrentCameraIcon />
Expand Down
1 change: 1 addition & 0 deletions src/frontend/src/Components/cameras/WebcamCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ export default function WebcamCard(props) {
</div>
<p className="label">{camera.caption}</p>
</Card.Body>

<Button variant="primary" className="viewmap-btn" onClick={handleViewOnMap}>View on map<FontAwesomeIcon icon={faMapMarkerAlt} /></Button>
</Card>
);
Expand Down
66 changes: 0 additions & 66 deletions src/frontend/src/Components/map/helper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 = `
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" id="svg-container">
Expand Down
4 changes: 2 additions & 2 deletions src/frontend/src/Components/map/mapPopup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down

0 comments on commit 8f8a40d

Please sign in to comment.