Skip to content
Snippets Groups Projects
Unverified Commit 487cab3d authored by Amy Stamile's avatar Amy Stamile Committed by GitHub
Browse files

Merge pull request #16 from jrcain-usgs/hover-list

hover/clicking a card highlights/zooms its feature
parents d6e41fe9 39c2c8d9
No related branches found
No related tags found
No related merge requests found
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,8 +101,24 @@ 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}}>
<CardActionArea onMouseEnter={cardHover} onMouseLeave={eraseHover} onClick={cardClick}>
<CardContent sx={{padding: 1.2, paddingBottom: 0}}>
<div className="resultContainer" >
<div className="resultImgDiv">
......@@ -118,6 +134,7 @@ export function FootprintCard(props){
</div>
</div>
</CardContent>
</CardActionArea>
<CardActions>
<div className="resultLinks">
<Stack direction="row" spacing={1}>
......
......@@ -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]){
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment