CT Redesign: Add Map control and update search results view for Locat…

…ion search #23686 (#17247)

* Name search autocomplete

* Create mapboxToken.js

* fetchSearchByLocationResults

* cleanup

* cleanup

* set state correctly at beginning of action

* AC 3

* rmeove countries from mapbox call

* Search updates

* Reducer cleanup

* Delete SearchForm

* Update search.js

* Styling fix

* Preview version updates

* Version fixes

* Preview display

* Cleanup

* m

* track current tab in store, split results

* put tab in url and load correct tab if present

* search instead of tab in url

* move out common component

* rename to SearchAccordion

* render search results stuff

* css cleanup

* Delete SearchSchools.jsx

* move to containers

* Update SearchResults.jsx

* Update SearchResults.jsx

* remove map display from 23686

* Update SearchResults.jsx

* Update SearchResults.jsx

* results box

* styling location cards

* clean up search result cards for location search

* max number to letter conversion handle any number

* move to helpers

* center map on search lat/long

* raidus junk

* cleanup

* Update constants.js

* bounding box tweaks

* Update SearchResults.jsx

* succeeded

* map markers are on the page

* Update constants.js

* markers

* Update SearchResults.jsx

* Update SearchResults.jsx

* pre-merge setup

* fixed issues and changed how bounding box after search is determined so as to work with use my current location

* map display for results using magic

* clean making map show results

* AC met

* Update SearchResults.jsx

* Update SearchResults.jsx

* Update _gi-search-location.scss

* on click map markers go gray

* Update LandingPage.jsx

* Update SearchResultCard.jsx

* kick jenkins

* fix scrolling issue

* Update Dockerfile

* Update Dockerfile

* i doubt it fixes the issue

* cleanup

* disable all tests in sandbox

* revert test skipping

* mapbogl css import

* change import order

* tleunen/eslint-import-resolver-babel-module#34 (comment)

* Revert "tleunen/eslint-import-resolver-babel-module#34 (comment)"

This reverts commit 5b6ff62.

* https://stackoverflow.com/a/49523565/1669481

* revert

* Delete LandingPage.unit.spec.jsx

Co-authored-by: Devin McCurdy <[email protected]>

src/applications/gi-sandbox/components/location/SearchResults.jsx

@@ -1,13 +1,104 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
+import { scroller } from 'react-scroll';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import mapboxgl from 'mapbox-gl';
+import { getScrollOptions } from 'platform/utilities/ui';
 
 import SearchResultCard from '../search/SearchResultCard';
+import { mapboxToken } from '../../utils/mapboxToken';
+import { MapboxInit } from '../../constants';
 import TuitionAndHousingEstimates from '../../containers/TuitionAndHousingEstimates';
 import RefineYourSearch from '../../containers/RefineYourSearch';
-import { numberToLetter } from '../../utils/helpers';
+import { numberToLetter, createId } from '../../utils/helpers';
 
 export default function SearchResults({ search }) {
   const { count, results } = search.location;
   const { location } = search.query;
+  const map = useRef(null);
+  const mapContainer = useRef(null);
+
+  const setupMap = () => {
+    if (map.current) return; // initialize map only once
+
+    mapboxgl.accessToken = mapboxToken;
+
+    const mapInit = new mapboxgl.Map({
+      container: mapContainer.current,
+      style: 'mapbox://styles/mapbox/outdoors-v11',
+      center: [MapboxInit.centerInit.longitude, MapboxInit.centerInit.latitude],
+      zoom: MapboxInit.zoomInit,
+    });
+    mapInit.addControl(
+      new mapboxgl.NavigationControl({
+        // Hide rotation control.
+        showCompass: false,
+      }),
+      'top-left',
+    );
+
+    // Remove mapbox logo from tab order
+    const mapBoxLogo = document.querySelector(
+      'a.mapboxgl-ctrl-logo.mapboxgl-compact',
+    );
+    if (mapBoxLogo) mapBoxLogo.setAttribute('tabIndex', -1);
+
+    mapInit.on('load', () => {
+      mapInit.resize();
+    });
+
+    map.current = mapInit;
+  };
+
+  useEffect(() => {
+    if (mapContainer.current) {
+      setupMap();
+    }
+  }, []); // <-- empty array means 'run once'
+
+  const addMapMarker = (institution, index, locationBounds) => {
+    const { latitude, longitude, name } = institution;
+    const letter = numberToLetter(index + 1);
+
+    const markerElement = document.createElement('div');
+    markerElement.className = 'location-letter-marker';
+    markerElement.innerText = letter;
+
+    const popup = new mapboxgl.Popup();
+    popup.on('open', () => {
+      const locationSearchResults = document.getElementById(
+        'location-search-results',
+      );
+
+      scroller.scrollTo(
+        `${createId(name)}-result-card-placeholder`,
+        getScrollOptions({
+          containerId: 'location-search-results',
+          offset: -locationSearchResults.getBoundingClientRect().top,
+        }),
+      );
+    });
+
+    locationBounds.extend(new mapboxgl.LngLat(longitude, latitude));
+    new mapboxgl.Marker(markerElement)
+      .setLngLat([longitude, latitude])
+      .setPopup(popup)
+      .addTo(map.current);
+  };
+
+  useEffect(
+    () => {
+      if (!map.current || results.length === 0) return; // wait for map to initialize
+
+      const locationBounds = new mapboxgl.LngLatBounds();
+
+      results.forEach((institution, index) => {
+        addMapMarker(institution, index, locationBounds);
+      });
+
+      map.current.fitBounds(locationBounds, { padding: 20 });
+    },
+    [results],
+  );
 
   const resultCards = results.map((institution, index) => {
     const { name, city, state, distance } = institution;
@@ -72,7 +163,30 @@ export default function SearchResults({ search }) {
           )}
         </div>
 
-        <div className={'usa-width-two-thirds'} />
+        <div className={'usa-width-two-thirds'}>
+          <map
+            ref={mapContainer}
+            id="mapbox-gl-container"
+            aria-label="Find VA locations on an interactive map"
+            aria-describedby="map-instructions"
+            className={'desktop-map-container'}
+            role="region"
+          >
+            <div
+              id="search-area-control-container"
+              className={'mapboxgl-ctrl-top-center'}
+            >
+              <button
+                id="search-area-control"
+                className={'usa-button'}
+                onClick={() => {}}
+                aria-live="assertive"
+              >
+                Search this area of the map
+              </button>
+            </div>
+          </map>
+        </div>
       </div>
     </>
   );