Allow users to inspect a cell or feature to read more information

[heidimok]

• stac ipyleaflet version: for release 0.3.0
• Python version: python >= 3.9 (some of the widgets are incompatible at v 3.8)
• Reference column item 5 in the MAAP-ipyleaflet-DevRoadmap

Context

After a user adds layers to display data on a map, they might want to inspect that data to learn more about:

• a cell - the smallest unit within a raster dataset - each with a specific dimension (n*n resolution), and typically representing a single value (unless the value is cleverly encoded)
• a feature - a single point, line or polygon within that dataset - it can carry a lot of attributes, that typically means they are assigned to that feature (i.e. one lake within a dataset of lakes in N America)

Problem

Currently users can pan around the map and zoom in/out, but they cannot select a cell or feature to learn more. This doesn't provide enough information for them.

Ideas

• New widget: inspection/info widget
  • User adds data --> User selects a cell --> User opens inspect widget --> See results
  • User adds data --> User opens inspect widget --> User selects a cell --> See results
• Adding to Drawing widget: Could reframe the drawing one to include more info?
  • User adds data --> User opens draw widget --> User selects a cell or draws box --> See results
  • User adds data --> User selects a cell --> User opens draw widget (would need to rename) --> See results
• Here's an example of an app that shows highlighting to identify a cell.
  
• Usually the inspection tool is associated with a single cell or point location.. and it's assumed that you've either selected a single layer you want results for, or that we would query all visible datasets and present all of those results
• Example where you click and everything is presented to you: https://gis-cityofkennesaw.hub.arcgis.com/apps/5db59e85c2fc4a1c80b73df0ef525c83/explore
  
• Example where you select which layer you are identifying (the i for identify tool is activated): https://maps.durhamnc.gov/gomaps/
  
• Toolbar example derived from QGIS & other desktop GIS applications (this became the default in many web maps but can be overkill for non-GIS users)
  
  

Acceptance Criteria

• Design mockup as reference
• Implementation of a way for users to inspect data based on a single point or cell selection

[emmalu]

Separate info (i) widget could be added as a button above the map, alongside other widget buttons.

[sandrahoang686]

an option for an inspect widget as a way for users to indicate that they'd like to activate selection mode. I don't know what data about the cell we have to show but just some early thoughts here. https://www.figma.com/file/2gezwwtJdUoBc5SD2pB86W/stac_ipyleaflet---Release-0.2?type=design&node-id=28-6811&mode=design&t=uQzNYeWOAZO5nGNB-4

[sandrahoang686]

Addressing the multiple layers issue:

• First get it using for the most top layer and then possibly create a fast follow issue to grab data for all the layers
• If not to much of a push to tackle in this issue, go ahead and tackle
  https://developmentseed.slack.com/archives/C05FRGCA12Q/p1690206719180059?thread_ts=1690204309.207899&cid=C05FRGCA12Q

[heidimok]

UI Update July 27, 2023

• After meeting with @emmalu @sandrahoang686 @wildintellect, I'm showcasing the latest design mockups as reference. The mockup here is only intended to address the immediate issue which is allowing users to select a single point (not area) on the map in order to see a corresponding value for all selected layers.

Overall changes to the DRAW widget

• Rename the draw widget to Interact - other ideas were coordinates, explore, design, inspect...this can be debated so I'm just recommended interact for now.
• This widget includes two features: Select Point (new default - this issue) + Select Area (existing Draw widget)
• In future users may want to also see charts and other analysis so we're creating a bit of room to scale through a widget, but the UI organization within the widget could be improved in the future.

Select Point

• Upon selecting the point button, the map panning becomes a pointer and the users are prompted with a text message to Select a point feature on the map to view its values
• All of the currently selected layers are also displayed as a list with greyed out values
  Direct link to Figma
• Users can then select any point on the map. Though they are clicking on the top layer, there could be multiple layers with different opacities displayed so we'd want the location regardless of the layer.
• Based on the point, the values for each selected layer will be displayed
• If a user selects a new point, the values will change

Select Area (Existing Draw widget)

• The current draw button is now renamed to be Area
• If users click on the Area button, they are able to draw a box (area of interest) on the map
• Once they draw an area of interest, they can see the coordinates displayed as text

[emmalu]

Making a note that we still need to include info from an identified vector feature within the Interact widget. Adding a vector layer can be done by following either the geopandas or geojson sample notebook .

cc @wildintellect @sandrahoang686 @heidimok