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

src/components/presentational/ResultsAccessories.jsx

+30 −13
Original line number Diff line number Diff line 
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}>

src/js/AstroMap.js

+33 −0
Original line number Diff line number Diff line
@@ -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]){