diff --git a/src/components/presentational/ResultsAccessories.jsx b/src/components/presentational/ResultsAccessories.jsx index ab83fac6c91a95185341081d2878c5b433020425..bfe761efe6be9aa0986f24d3391538656876e3e8 100644 --- a/src/components/presentational/ResultsAccessories.jsx +++ b/src/components/presentational/ResultsAccessories.jsx @@ -1,5 +1,5 @@ import React from "react"; -import { Card, CardContent, CardActions, Skeleton, Chip, Stack} from "@mui/material"; +import { Card, CardContent, CardActions, Skeleton, Chip, Stack, CardActionArea} from "@mui/material"; // icons import PreviewIcon from "@mui/icons-material/Preview"; @@ -101,23 +101,40 @@ export function FootprintCard(props){ geoTiffViewer.openModal(); }; + const cardClick = () => { + window.postMessage(["zoomFootprint", props.feature], "*"); + }; + + const cardHover = () => { + window.postMessage(["highlightFootprint", props.feature], "*"); + }; + + const eraseHover = () => { + window.postMessage(["unhighlightFootprint"], "*"); + }; + + + + return( <Card sx={{ width: 250, margin: 1}}> - <CardContent sx={{padding: 1.2, paddingBottom: 0}}> - <div className="resultContainer" > - <div className="resultImgDiv"> - <img className="resultImg" src={props.feature.assets.thumbnail.href} /> - </div> - <div className="resultData"> - <div className="resultSub"> - <strong>ID:</strong> {props.feature.id} + <CardActionArea onMouseEnter={cardHover} onMouseLeave={eraseHover} onClick={cardClick}> + <CardContent sx={{padding: 1.2, paddingBottom: 0}}> + <div className="resultContainer" > + <div className="resultImgDiv"> + <img className="resultImg" src={props.feature.assets.thumbnail.href} /> </div> - <div className="resultSub"> - <strong>Date:</strong> {props.feature.properties.datetime} + <div className="resultData"> + <div className="resultSub"> + <strong>ID:</strong> {props.feature.id} + </div> + <div className="resultSub"> + <strong>Date:</strong> {props.feature.properties.datetime} + </div> </div> </div> - </div> - </CardContent> + </CardContent> + </CardActionArea> <CardActions> <div className="resultLinks"> <Stack direction="row" spacing={1}> diff --git a/src/js/AstroMap.js b/src/js/AstroMap.js index 781dd8d81380a46737abbc1839d4a914244b39cb..a15f0bc1a525f5e804d533a9e8b0445accdca99e 100644 --- a/src/js/AstroMap.js +++ b/src/js/AstroMap.js @@ -50,6 +50,7 @@ export default L.Map.AstroMap = L.Map.extend({ this._footprintControl = null; this._geoLayers = []; this._htmllegend = null; + this._hovHighlight = null; // Set by layer collection or baselayerchange event this._currentLayer = null; @@ -141,6 +142,19 @@ export default L.Map.AstroMap = L.Map.extend({ const collectionId = event.data[1]; this.setVisibleCollections(collectionId); } + else if (event.data[0] === "zoomFootprint") { + const feature = event.data[1]; + this.zoomFootprint(feature); + } + else if (event.data[0] === "highlightFootprint") { + const feature = event.data[1]; + this.highlightFootprint(feature); + } + else if (event.data[0] === "unhighlightFootprint") { + if (this._hovHighlight) { + this._hovHighlight.remove(); + } + } } }, @@ -175,6 +189,25 @@ export default L.Map.AstroMap = L.Map.extend({ return clonedFeatures; }, + zoomFootprint: function (feature) { + let zoomTarget = L.geoJSON(feature); + this.fitBounds(zoomTarget.getBounds()); + }, + + highlightFootprint: function(feature){ + + if(this._hovHighlight) { + this._hovHighlight.remove(); + } + + // Add Wrap? + + // Add feature to (this) map + this._hovHighlight = L.geoJSON(feature, { + style: { fillColor: "#FFFFFF", color: "#FFFFFF" } + }).addTo(this); + }, + setVisibleCollections: function(collectionId){ for(let i = 0; i < this._geoLayers.length; i++) { if(this._geoLayers[i]){