Dm 3508 map component

[bradjohnson92008]

JIRA issue link

https://agile6.atlassian.net/browse/DM-3508

Description - what does this code do?

Allows users to add and display a google map with selected innovations and statuses on a Page builder page.

Testing done - how did you test it/steps on how can another person can test it

1. Sign in an admin and go to /admin/pages
2. Select an existing page or create a new page.
3. Select "Edit" page.
4. Scroll down to the "Add Component Button" and click.
5. In the drop down list select "Google Map"
   
6. Enter a title, short_name, and description (***Keep in mind none of the fields are required - it is completely up to the content creator what they want to display on the page/map.)
   
7. Select as many innovations from the innovation drop down list (ctrl or shift to select multiple) for whose adoptions you would like to see displayed on the map.
8. Select which Adoption Status(es) you want to display on the map. (statuses will not display when map is rendered on page. All markers will be the bright blue default marker.)
   
9. Select the "Update Page" button when finished.
   
10. Ensure the page updates correctly. (green success banner should display at top).
11. To view the page click on the "COMPLETE URL" link at the top of the page.
    
12. Ensure that all adoptions for the selected innovations display in the map and that the Title, Short_name, and description all display correctly if inputted. Also the map should be cenetered on the conus United states. .. (somewhere in Kansas.. lol).
    
13. Click on a Marker and ensure the short_name is displayed if inputted. Also ensure the Facility name (and facility short name or accronym displays in parenthesis next to the facility name). Also ensure that the adoptions for the selected facilities display in the body of the map-marker Info-Window. The adoptions should display the Innovation Name and Tagline or short description for each Innovation.
    

Acceptance criteria

1. Ability to add a map to a Page Builder page
2. Title, Short_name and Description
3. User can enter text
4. Admin can select which innovations' adoptions are displayed on map
5. Reuse code from practice list
6. Admin can select which innovation statuses are displayed on map (Successful, unsuccessful, In progress)
7. Status display: regarding this PB MAP Component. Do not distinguish adoptions by status within the component. If user wants to see adoption statuses they can click the facility link and view all the Facilities adoptions and statuses on the Facilities Show Page.
8. Display a marker on the map for every facility that has an XR Innovation adoptions
9. Each map marker is clickable
10. Info window that displays when marker is clicked is static size: W: 670px H: 339px
11. When clicked, map marker modal displays Facility name and the number of XR Innovations at that facility (like Diffusion Map)
12. When user clicks map, modal with total XR innovations at facility and list of innovations pops up
13. Markers are all same color and don’t have numbers
14. Marker pop up contains a link to the facility on the facility name and a list of Innovations display with innovation name and tagline. Adopted Innovations in the info window are clickable and will take user to the innovations show page.
15. When user clicks map marker, Modal with list of Innovations adopted at that facility displays
16. Total of Innovation Adoptions- only displayed per Facility in map-marker info window for that Facility.
17. Map defaults to Continental US (CONUS) when Communities page is loaded
18. User can zoom in/out on map
19. Monitor performance
20. Review map workflow with Research and Design

General Note: List of XR Innovations:

• Mixed Reality…(MR. MAP)
• Use of Ket for Treatment Resistant Depression)…
• Use of XR for wellness...
• Virtual Reality for CLC…
• Virtual Reality for Management of pain…
• Virtual Reality for pain…

Definition of done

• Unit tests written (if applicable)
• e2e/accessibility tests written (if applicable)
• Events are logged appropriately
• Documentation has been updated, if applicable
• A link has been provided to the originating JIRA issue
• No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs

[camillevilla]

This is working well for me @bradjohnson92008! I support Josh's refactor suggestion for reducing database queries. Consider my other two comments non-blocking.

[JoshingYou1]

Great work on those refactors Brad! 😄 I left some small comments. I noticed we're getting a lot of console warnings for google maps. Hopefully this'll be a quick fix. I also noticed that the info window for the map is not centered, and on mobile, the width of it goes past the screen. We may need to ask Nick for a mobile mockup for the info window, so we can use a different, smaller width.

Console warning

Map info window for desktop and mobile

[bradjohnson92008]

Regarding the InfoWindow positioning. Instead of static width/height.. using maxWidth(400px) and maxHeight(275px) to make this way less noticeable.

[JoshingYou1]

Great work Brad! There were a couple of issues marked as resolved, but were left unchanged, so I flagged them. Other than that everything looks great! We may need to add a story for the console warnings, but it might be able to wait for V2.