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 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 // icons
import PreviewIcon from "@mui/icons-material/Preview"; import PreviewIcon from "@mui/icons-material/Preview";
...@@ -101,8 +101,24 @@ export function FootprintCard(props){ ...@@ -101,8 +101,24 @@ export function FootprintCard(props){
geoTiffViewer.openModal(); geoTiffViewer.openModal();
}; };
const cardClick = () => {
window.postMessage(["zoomFootprint", props.feature], "*");
};
const cardHover = () => {
window.postMessage(["highlightFootprint", props.feature], "*");
};
const eraseHover = () => {
window.postMessage(["unhighlightFootprint"], "*");
};
return( return(
<Card sx={{ width: 250, margin: 1}}> <Card sx={{ width: 250, margin: 1}}>
<CardActionArea onMouseEnter={cardHover} onMouseLeave={eraseHover} onClick={cardClick}>
<CardContent sx={{padding: 1.2, paddingBottom: 0}}> <CardContent sx={{padding: 1.2, paddingBottom: 0}}>
<div className="resultContainer" > <div className="resultContainer" >
<div className="resultImgDiv"> <div className="resultImgDiv">
...@@ -118,6 +134,7 @@ export function FootprintCard(props){ ...@@ -118,6 +134,7 @@ export function FootprintCard(props){
</div> </div>
</div> </div>
</CardContent> </CardContent>
</CardActionArea>
<CardActions> <CardActions>
<div className="resultLinks"> <div className="resultLinks">
<Stack direction="row" spacing={1}> <Stack direction="row" spacing={1}>
......
...@@ -50,6 +50,7 @@ export default L.Map.AstroMap = L.Map.extend({ ...@@ -50,6 +50,7 @@ export default L.Map.AstroMap = L.Map.extend({
this._footprintControl = null; this._footprintControl = null;
this._geoLayers = []; this._geoLayers = [];
this._htmllegend = null; this._htmllegend = null;
this._hovHighlight = null;
// Set by layer collection or baselayerchange event // Set by layer collection or baselayerchange event
this._currentLayer = null; this._currentLayer = null;
...@@ -141,6 +142,19 @@ export default L.Map.AstroMap = L.Map.extend({ ...@@ -141,6 +142,19 @@ export default L.Map.AstroMap = L.Map.extend({
const collectionId = event.data[1]; const collectionId = event.data[1];
this.setVisibleCollections(collectionId); 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({ ...@@ -175,6 +189,25 @@ export default L.Map.AstroMap = L.Map.extend({
return clonedFeatures; 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){ setVisibleCollections: function(collectionId){
for(let i = 0; i < this._geoLayers.length; i++) { for(let i = 0; i < this._geoLayers.length; i++) {
if(this._geoLayers[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