Merge remote-tracking branch 'origin/main'

.github/workflows/azure-static-web-apps-orange-cliff-042f7640f.yml

@@ -19,6 +19,7 @@ jobs:
       VITE_REMOTE_HEADER_MENU_ID: ${{ vars.VITE_REMOTE_HEADER_MENU_ID }}
       VITE_REMOTE_FOOTER_MENU_ID: ${{ vars.VITE_REMOTE_FOOTER_MENU_ID }}
       VITE_REMOTE_SOCIAL_LINKS_ID: ${{ vars.VITE_REMOTE_SOCIAL_LINKS_ID }}
+      VITE_LOCATION_API_URL: ${{ vars.VITE_LOCATION_API_URL }}
     name: Build and Deploy Job
     steps:
       - uses: actions/checkout@v3

src/App.scss

@@ -68,3 +68,10 @@
   }
 }
 
+.mapboxgl-popup-content {
+  padding: .85rem 2rem!important;
+
+  .location-link {
+    font-size: .95rem;
+  }
+}

src/App.tsx

@@ -14,14 +14,16 @@ import {
   Layer,
   SymbolLayer,
   FillLayer,
-  Popup,
-  MapboxGeoJSONFeature,
   MapLayerMouseEvent,
   MapRef,
   Marker,
   LineLayer
 } from 'react-map-gl';
 
+import {
+  Popup
+} from 'mapbox-gl';
+
 import {
   Feature,
   FeatureCollection,
@@ -34,6 +36,7 @@ import MapMenu from './components/MapMenu';
 import NavigationMenu from './components/NavigationMenu';
 import SearchResults from './components/SearchResults';
 import Campuses from './components/Campuses';
+import { LocationResult, SearchForLocation } from './services/LocationService';
 
 // Type Imports
 import { Campus }  from './types/Campus';
@@ -52,7 +55,6 @@ function App() {
   const initialZoom = 15;
 
   const mapRef = useRef<MapRef>(null);
-  const [popupData, setPopupData] = useState<MapboxGeoJSONFeature|null>(null);
 
   const [visibility, setVisibility] = useState<Visibility>({
     locations: {
@@ -162,9 +164,30 @@ function App() {
   const [searchResults, setSearchResults] = useState<Array<Feature>>([]);
 
   const handleOnClick = (e: MapLayerMouseEvent) => {
-    if (!e.features) setPopupData(null);
+    if (e.features?.length === 0) return;
+
     const feature = e.features?.pop();
-    if (feature) setPopupData(feature);
+    const popup = new Popup()
+      .setLngLat({
+        lat: feature?.properties!['Latitude'],
+        lng: feature?.properties!['Longitude']
+      })
+      .addTo(mapRef.current!.getMap());
+
+    SearchForLocation(feature?.properties?.Name)
+      .then((responseText: Response) => responseText.json())
+      .then((response: Array<LocationResult>) => {
+        let html = '';
+
+        if (response.length > 0) {
+          const location = response.pop();
+          html = `<a class="location-link" href="${location!.link}" target="_blank">${feature?.properties?.Name}</a>`;
+        } else {
+          html = `<span class="location-link">${feature?.properties?.Name}</span>`
+        }
+
+        popup.setHTML(html);
+      });
   };
 
   const onSearchResultClick = (result: GeoJsonProperties) => {
@@ -322,6 +345,7 @@ function App() {
     type: 'symbol',
     layout: {
       ...defaultLayoutProps,
+      'icon-image': 'location',
       visibility: visibility.locations.buildings! ? 'visible': 'none'
     },
   };
@@ -598,7 +622,7 @@ function App() {
         }}
         mapStyle='mapbox://styles/mapbox/streets-v12'
         mapboxAccessToken={ TOKEN }
-        interactiveLayerIds={['location-layer', 'departments-layer', 'parking-layer']}
+        interactiveLayerIds={['building-point-layer', 'search-result-layer']}
         onClick={handleOnClick}
         ref={mapRef}>
           <SearchResults
@@ -687,17 +711,6 @@ function App() {
           <Marker longitude={campus.longitude} latitude={campus.latitude} anchor="bottom" >
             <img src={campus.img} />
           </Marker>
-
-          {popupData && (
-            <Popup
-              key={popupData.properties!['name']}
-              latitude={popupData.properties!['Latitude']}
-              longitude={popupData.properties!['Longitude']}
-              onClose={() => setPopupData(null)}
-              closeButton={true}>
-                <span className='location-title'>{popupData.properties!['Name']}</span>
-              </Popup>
-          )}
           <MapIcon iconName='location' iconImageSource='/img/location.png' />
           <MapIcon iconName='housing' iconImageSource='/img/locations/housing.png' />
           <MapIcon iconName='dining' iconImageSource='/img/locations/dining.png' />

src/components/SearchResults.tsx

@@ -9,8 +9,6 @@ interface SearchResultsProps {
 }
 
 export default function SearchResults(props: SearchResultsProps) {
-  console.log(props.searchResults);
-
   return (
     <div className='search-control-wrapper rounded'>
       <div className='input-group'>

src/services/LocationService.ts

@@ -0,0 +1,12 @@
+const LOCATIONS_API_URL = import.meta.env.VITE_LOCATION_API_URL;
+
+export interface LocationResult {
+  id: number;
+  slug: string;
+  status: string;
+  link: string;
+}
+
+export function SearchForLocation(location_name: string) {
+  return fetch(`${LOCATIONS_API_URL}?search=${location_name}`);
+}

src/vite-env.d.ts

@@ -5,6 +5,7 @@ interface ImportMetaEnv {
     readonly VITE_REMOTE_HEADER_MENU_ID: number
     readonly VITE_REMOTE_FOOTER_MENU_ID: number
     readonly VITE_REMOTE_SOCIAL_LINKS_ID: number
+    readonly VITE_LOCATION_API_URL: string;
 }
 
 interface ImportMeta {