Map - Tracking issue

[jcfilben]

Tracking issue for:

• Map - Create design direction and recommendation for map elements and controls #3349
• Map - Create Marker and Clusters, and zoom in/out into components #3377
• Map - Decide on whether we are shipping a importable component or a pattern implementors may reference #3384
  • Map - RESEARCH SPIKE - Create proof of concepts for as many of the MVP features #3393
  • Map - RESEARCH SPIKE - Compare and contrast map alternatives to LeafletJs #3394
• Map - Implement map component assets in code #3386
• Map - Implement map facilitating common use cases #3407
• Map - Consolidate use case and requirements #3395
• Map - Confirm styling for default/neutral marker #3431
• Map - Toggle view type button group in data collection toolbar #3432
• Map - Explore progressive loading for slow (or even offline) connections
• Map - Confirm attribution requirements
• ....

---

Background

Brought up by Greg in office hours 2/9/23:

There is a need to show the physical location of devices on a map. We don't have a way of doing this in Grommet and should provide a recommendation for a tool that should be used as well as how it should be styled.

Edgar also mentioned a need for this. For his use case he needed to be able to show a detailed map down to street addresses. Both Greg and Edgar mentioned having this ready to show at discover.

When you zoom out locations in close proximity should be grouped.

Some tools mentioned: Open Maps, Google Maps API

Sam Goff mentioned he has done a lot of work with google maps api and would be willing to collaborate. Chris Carlozzi mentioned that there are security issues with using Google Maps.

Screenshot shared by Greg of what they currently have implemented:

Main Jira ticket to track this: View Device / Asset View by Location on GLCP-42409

[SOjaHPE]

Child Issues of #42409

• Design System develop a map component for use by this and other future features GLCP-42657
• Split the Epic into just adding location to the table, not the map GLCP-42711

Work with @gregfuruiye and @ecircenis to discuss their use cases

[halocline]

Notes from Aruba (via Fred):

• In networking

• A need for maps, the way people manage their networks is by locations

  • Managing, universities, Home Depots - all stores
  • Locations could be multiple stores, on different floors in buildings
  • Admins, what to know, particular - visualize status of the system
    • How a particular site is doing. Aggregated view of your networks
    • Simple use case, not complicated
    • Able to search in the maps, particular location
    • Zoom in / out
    • Street / Satellite view / 3D views
      • 3D - access points with GPS coordinates
      • Anchor points in buildings, precisely locate assets in buildings
    • Want a clean, simple view of the map.. only important information
    • Need to see if a site is orange or red, can have readability issues for status to communicate w/ user w/o distractions for users
    • Satellite view is useful when users need it
    • Not necessary yet, to show the inside of the building
      • Floor view of the building, it is a 2D view - floor plan is flat
    • Color blindness, accessibility concerns
    • Different types of entities - branch, campus, main, data center - type of site you’re managing, all stores of big box retailer are considered branches.
    • A site will never be all red, all green, all yellow. Raise by exception

• "Locations" are down to GPS coordinates (e.g. coordinates within a building and even across floors in the building --> not just lat, lng, but also a z coordinate)

• The “proportional status” concept needs work — I would think that we should still be able to distill the proportion into a single status indicator and not have to make the user do analysis within the map.

• Reset view control

• Positioning of controls (e.g. layered atop the map or live outside?) — my thinking has been that any data collection views should be able to be substituted for one another. I can represent a data collection as a table, list, grid, or map and have similar controls for each — even let the user choose their preferred method (Fred mentioned the flexibility for users being able to choose their preferred method).

• Connecting nodes (e.g. directionality of networks between sites) was a use case I hadn’t yet considered.

• Site type seemed to be more important than number of devices — that’s a bit different than what I have seen from Private Cloud Enterprise or Compute Ops Manager.

• Where to show site/location detail? How much lifting does the map do vs. serving as a hub that routes to spokes?

• Map can serve as a filter itself (e.g. as I zoom in/out, the locations in my current view are what is shown in my data collection)

• A bit unclear as to what degree they were heading from the 3D aspect. I got mixed messages between desire vs. feasibility.

[halocline]

Resources from Winnie / Storage:

• Figma file
• Staging (might be slightly out of date, but the latest one we know of. There are some visual issues that haven’t been addressed yet.) link

[gregfuruiye]

Matt, Do you have the visualizations from early CoM that we did? Greg Furuiye Designer HPE Experience Studio Hewlett Packard Enterprise From: Matthew Glissmann ***@***.***> Date: Wednesday, April 26, 2023 at 2:33 PM To: grommet/hpe-design-system ***@***.***> Cc: Furuiye, Greg ***@***.***>, Mention ***@***.***> Subject: Re: [grommet/hpe-design-system] Map visualization guidance (Issue #3143) Resources from Winnie / Storage: * Figma file<https://www.figma.com/file/y8kTaJmoTAht3UerdxTm9h/SC_Visual_DataPanorama?node-id=3237%3A103633&t=Qz9l6sBwt529RQmZ-1> * Staging (might be slightly out of date, but the latest one we know of. There are some visual issues that haven’t been addressed yet.) link<http://panorama-ui.us-east-2.elasticbeanstalk.com/data_observability_assets/inventory> — Reply to this email directly, view it on GitHub<#3143 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AEIPRKZVP4VAZXP3C3ABBDDXDGBALANCNFSM6AAAAAAUW54UOI>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[vavalos5]

@gregfuruiye where can we find the CoM visualizations you mentioned?

[gregfuruiye]

@vavalos5 , all of the CoM map explorations are in the Positano Figma file. There are some here and here.

[vavalos5]

Can we include GLC's Figma file here too please. @halocline @SOjaHPE

[halocline]

Can we include GLC's Figma file here too please. @halocline @SOjaHPE

Here you go: https://www.figma.com/file/1AEXMlKGFbUH69zaNkEikS/M1393%3A-PCE-(Multi-%2B-Edge)-%5BIn-Progress%5D?type=design&node-id=1699-142907&t=MhTzZKozCTTbm9aP-4.