Added close icon to search bar to allow for searches to be cleared. M…

…oved reusable icons to the assets folder

src/App.tsx

@@ -30,6 +30,29 @@ import {
   GeoJsonProperties
 } from 'geojson';
 
+// Import map icons
+import locationIcon from './assets/location.png';
+import housingIcon from './assets/locations/housing.png';
+import diningIcon from './assets/locations/dining.png';
+import retailIcon from './assets/locations/retail.png';
+import labIcon from './assets/locations/lab.png';
+import recreationIcon from './assets/outdoors/recreation.png';
+import wellBeingIcon from './assets/outdoors/well-being.png';
+import accessibleParkingIcon from './assets/accessibility/accessible-parking.png';
+import autoDoorIcon from './assets/accessibility/automatic-doors.png';
+import buildingRampIcon from './assets/accessibility/building-ramp.png';
+import parkingRampIcon from './assets/accessibility/parking-ramp.png';
+import busIcon from './assets/bus.png';
+import phoneIcon from './assets/phone.png';
+import bikeRackIcon from './assets/other/bike-racks.png';
+import familyIcon from './assets/other/family-solid.png';
+import pantryIcon from './assets/other/pantry.png';
+import artIcon from './assets/other/art.png';
+import serviceIcon from './assets/other/student-service.png';
+
+// Import other icons
+import ucfLogo from './assets/ucf-logo.png';
+
 // Component imports
 import { MapIcon } from './components/MapImage';
 import MapMenu from './components/MapMenu';
@@ -203,6 +226,15 @@ function App() {
   const searchData = (searchQuery: string) => {
     const retval: Array<Feature> = [];
 
+    if (!searchQuery) {
+      setSearchResults(retval);
+      setSearchResultData({
+        type: 'FeatureCollection',
+        features: []
+      });
+      return;
+    }
+
     if (buildingPointData) {
       let locationResults = buildingPointData.features.filter((e: any) => 
         e!.properties!.Name.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -716,34 +748,34 @@ function App() {
           <Source type="geojson" data={searchResultData}>
             <Layer {...searchResultLayer} />
           </Source>
-
           <Marker longitude={campus.longitude} latitude={campus.latitude} anchor="bottom" >
-            <img width={30} src='./img/ucf-logo.png'/>
+            <img width={30} src={ucfLogo} />
           </Marker>
-          <MapIcon iconName='location' iconImageSource='/img/location.png' />
-          <MapIcon iconName='housing' iconImageSource='/img/locations/housing.png' />
-          <MapIcon iconName='dining' iconImageSource='/img/locations/dining.png' />
-          <MapIcon iconName='retail' iconImageSource='/img/locations/retail.png' />
-          <MapIcon iconName='lab' iconImageSource='/img/locations/lab.png' />
-          <MapIcon iconName='recreation' iconImageSource='/img/outdoors/recreation.png' />
-          <MapIcon iconName='wellbeing' iconImageSource='/img/outdoors/well-being.png' />
-          <MapIcon iconName='accessible-parking' iconImageSource='/img/accessibility/accessible-parking.png' />
-          <MapIcon iconName='auto-door' iconImageSource='/img/accessibility/automatic-doors.png' />
-          <MapIcon iconName='building-ramp' iconImageSource='/img/accessibility/building-ramp.png' />
-          <MapIcon iconName='parking-ramp' iconImageSource='/img/accessibility/parking-ramp.png' />
-          <MapIcon iconName='bus' iconImageSource='/img/bus.png' />
-          <MapIcon iconName='phone' iconImageSource='/img/phone.png' />
-          <MapIcon iconName='bike-rack' iconImageSource='/img/other/bike-racks.png' />
-          <MapIcon iconName='family' iconImageSource='/img/other/family-solid.png' />
-          <MapIcon iconName='pantry' iconImageSource='/img/other/pantry.png' />
-          <MapIcon iconName='art' iconImageSource='/img/other/art.png' />
-          <MapIcon iconName='service' iconImageSource='/img/other/student-service.png' />
+
+          <MapIcon iconName='location' iconImageSource={locationIcon} />
+          <MapIcon iconName='housing' iconImageSource={housingIcon} />
+          <MapIcon iconName='dining' iconImageSource={diningIcon} />
+          <MapIcon iconName='retail' iconImageSource={retailIcon} />
+          <MapIcon iconName='lab' iconImageSource={labIcon} />
+          <MapIcon iconName='recreation' iconImageSource={recreationIcon} />
+          <MapIcon iconName='wellbeing' iconImageSource={wellBeingIcon} />
+          <MapIcon iconName='accessible-parking' iconImageSource={accessibleParkingIcon} />
+          <MapIcon iconName='auto-door' iconImageSource={autoDoorIcon} />
+          <MapIcon iconName='building-ramp' iconImageSource={buildingRampIcon} />
+          <MapIcon iconName='parking-ramp' iconImageSource={parkingRampIcon} />
+          <MapIcon iconName='bus' iconImageSource={busIcon} />
+          <MapIcon iconName='phone' iconImageSource={phoneIcon} />
+          <MapIcon iconName='bike-rack' iconImageSource={bikeRackIcon} />
+          <MapIcon iconName='family' iconImageSource={familyIcon} />
+          <MapIcon iconName='pantry' iconImageSource={pantryIcon} />
+          <MapIcon iconName='art' iconImageSource={artIcon} />
+          <MapIcon iconName='service' iconImageSource={serviceIcon} />
         </Map>
       </div>
       <footer className='footer pt-2'>
           <div className="d-flex justify-content-center">
             <div className="flex-shrink-0">
-              <img className='footer-logo-map' src="../img/ucf-logo.png" alt="pegasus logo" />
+              <img className='footer-logo-map' src={ucfLogo} alt="pegasus logo" />
             </div>
               <Campuses campus={campusData} onclick={campusHandler} />
           </div>

src/components/MapImage.tsx

@@ -8,10 +8,17 @@ export interface MapIconProps {
 export function MapIcon(props: MapIconProps) {
     const { current: map } = useMap();
 
+    const blankImage = new Image;
+    blankImage.width = 1;
+    blankImage.height = 1;
+
     if (!map?.hasImage(props.iconName)) {
+      map?.addImage(props.iconName, blankImage);
+
       map?.loadImage(props.iconImageSource, (err, img) => {
           if (err) throw err;
-          if (!map.hasImage(props.iconName)) map.addImage(props.iconName, img!);
+          map.removeImage(props.iconName);
+          map.addImage(props.iconName, img!);
       });
     }
 

src/components/MapMenu.tsx

@@ -1,6 +1,13 @@
 import { Visibility } from '../types/Visibility';
 import './MapMenu.scss';
 
+import checked from '../assets/square-check-solid.png';
+import unchecked from '../assets/square-thin.png';
+
+import busIcon from '../assets/bus.png';
+import phoneIcon from '../assets/phone.png';
+import accessibilityIcon from '../assets/handicap.png';
+
 interface MapMenuProps {
   visibility: Visibility,
   setVisibility: Function
@@ -28,7 +35,7 @@ export default function MapMenu(props: MapMenuProps) {
                           'buildings': !props.visibility.locations.buildings
                         }})
                       }>
-                      <img width={15} src={ props.visibility.locations.buildings ? './img/square-check-solid.png' : './img/square-thin.png' } /> &nbsp; Buildings
+                      <img width={15} src={ props.visibility.locations.buildings ? checked : unchecked } /> &nbsp; Buildings
                     </a>
                   </li>
                   <li>
@@ -41,7 +48,7 @@ export default function MapMenu(props: MapMenuProps) {
                           ...props.visibility.locations,
                           'housing': !props.visibility.locations.housing
                         }})
-                      }><img width={15} src={ props.visibility.locations.housing ? './img/square-check-solid.png' : './img/square-thin.png' } />
+                      }><img width={15} src={ props.visibility.locations.housing ? checked : unchecked } />
                       &nbsp;
                       Housing
                     </a>
@@ -56,7 +63,7 @@ export default function MapMenu(props: MapMenuProps) {
                           ...props.visibility.locations,
                           'dining': !props.visibility.locations.dining
                         }})
-                      }><img width={15} src={ props.visibility.locations.dining ? './img/square-check-solid.png' : './img/square-thin.png' } />
+                      }><img width={15} src={ props.visibility.locations.dining ? checked : unchecked } />
                       &nbsp;
                       Dining
                     </a>
@@ -71,7 +78,7 @@ export default function MapMenu(props: MapMenuProps) {
                           ...props.visibility.locations,
                           'retail': !props.visibility.locations.retail
                         }})
-                      }><img width={15} src={ props.visibility.locations.retail ? './img/square-check-solid.png' : './img/square-thin.png' } />
+                      }><img width={15} src={ props.visibility.locations.retail ? checked : unchecked } />
                       &nbsp;
                       Retail
                     </a>
@@ -86,7 +93,7 @@ export default function MapMenu(props: MapMenuProps) {
                           ...props.visibility.locations,
                           'labs': !props.visibility.locations.labs
                         }})
-                      }><img width={15} src={ props.visibility.locations.labs ? './img/square-check-solid.png' : './img/square-thin.png' } />&nbsp;
+                      }><img width={15} src={ props.visibility.locations.labs ? checked : unchecked } />&nbsp;
                       Labs
                     </a>
                   </li>
@@ -112,7 +119,7 @@ export default function MapMenu(props: MapMenuProps) {
                           ...props.visibility.outdoors,
                           'greenspaces': !props.visibility.outdoors.greenspaces
                         }})
-                      }><img width={15} src={ props.visibility.outdoors.greenspaces ? './img/square-check-solid.png' : './img/square-thin.png' } />
+                      }><img width={15} src={ props.visibility.outdoors.greenspaces ? checked : unchecked } />
                       &nbsp;
                       Green Spaces
                     </a>
@@ -127,7 +134,7 @@ export default function MapMenu(props: MapMenuProps) {
                           ...props.visibility.outdoors,
                           'recreation': !props.visibility.outdoors.recreation
                         }})
-                      }><img width={15} src={ props.visibility.outdoors.recreation ? './img/square-check-solid.png' : './img/square-thin.png' } />
+                      }><img width={15} src={ props.visibility.outdoors.recreation ? checked : unchecked } />
                       &nbsp;
                       Recreation
                     </a>
@@ -142,7 +149,7 @@ export default function MapMenu(props: MapMenuProps) {
                           ...props.visibility.outdoors,
                           'wellBeing': !props.visibility.outdoors.wellBeing
                         }})
-                      }><img width={15} src={ props.visibility.outdoors.wellBeing ? './img/square-check-solid.png' : './img/square-thin.png' } />
+                      }><img width={15} src={ props.visibility.outdoors.wellBeing ? checked : unchecked } />
                       &nbsp;
                       Well-Being
                     </a>
@@ -158,7 +165,7 @@ export default function MapMenu(props: MapMenuProps) {
                       href='#bikeRack'
                       id="bikeRacks"
                       onClick={() => props.setVisibility({ ...props.visibility, 'bikeRacks': !props.visibility['bikeRacks'] })}
-                    > <img width={15} src={ props.visibility.bikeRacks ? './img/square-check-solid.png' : './img/square-thin.png' } />
+                    > <img width={15} src={ props.visibility.bikeRacks ? checked : unchecked } />
                     &nbsp;
                       Bike Racks
                     </a>
@@ -169,7 +176,7 @@ export default function MapMenu(props: MapMenuProps) {
                     id="family"
                     href='#family'
                     onClick={() => props.setVisibility({ ...props.visibility, 'family': !props.visibility['family'] })}
-                  ><img width={15} src={ props.visibility.family ? './img/square-check-solid.png' : './img/square-thin.png' } />
+                  ><img width={15} src={ props.visibility.family ? checked : unchecked } />
                   &nbsp;
                     Family Resources
                   </a>  
@@ -180,7 +187,7 @@ export default function MapMenu(props: MapMenuProps) {
                     id="pantry"
                     href='#pantry'
                     onClick={() => props.setVisibility({ ...props.visibility, 'knightsPantry': !props.visibility['knightsPantry'] })}
-                  > <img width={15} src={ props.visibility.knightsPantry ? './img/square-check-solid.png' : './img/square-thin.png' } />
+                  > <img width={15} src={ props.visibility.knightsPantry ? checked : unchecked } />
                   &nbsp;
                     Knight's Pantry
                   </a>  
@@ -191,7 +198,7 @@ export default function MapMenu(props: MapMenuProps) {
                     id="art"
                     href='#art'
                     onClick={() => props.setVisibility({ ...props.visibility, 'art': !props.visibility['art'] })}
-                  ><img width={15} src={ props.visibility.art ? './img/square-check-solid.png' : './img/square-thin.png' } />
+                  ><img width={15} src={ props.visibility.art ? checked : unchecked } />
                   &nbsp; Art
                   </a>  
                 </li>
@@ -201,7 +208,7 @@ export default function MapMenu(props: MapMenuProps) {
                     id="services"
                     href='#services'
                     onClick={() => props.setVisibility({ ...props.visibility, 'studentServices': !props.visibility['studentServices'] })}
-                  > <img width={15} src={ props.visibility.studentServices ? './img/square-check-solid.png' : './img/square-thin.png' } />
+                  > <img width={15} src={ props.visibility.studentServices ? checked : unchecked } />
                   &nbsp;
                     Student Services
                   </a>  
@@ -215,7 +222,7 @@ export default function MapMenu(props: MapMenuProps) {
         <div className='d-flex justify-content-end me-3 pb-1'>
         <div className="btn-group btn-group-sm my-1" role="group" aria-label="Basic checkbox toggle button group">     
             <a className="btn dropdown-toggle rounded-end-0 d-flex align-items-center" id="accessibility" href="#accessibility" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-              <img width={30} src='./img/handicap.png' alt="Accessibility" />
+              <img width={30} src={accessibilityIcon} alt="Accessibility" />
 
             </a>
               <ul className="dropdown-menu">
@@ -230,7 +237,7 @@ export default function MapMenu(props: MapMenuProps) {
                         'parking': !props.visibility.accessibility.parking
                       }})
                     }
-                  > <img width={15} src={ props.visibility.accessibility.parking ? './img/square-check-solid.png' : './img/square-thin.png' } />
+                  > <img width={15} src={ props.visibility.accessibility.parking ? checked : unchecked } />
                   &nbsp;
                     Parking
                   </a>  
@@ -246,7 +253,7 @@ export default function MapMenu(props: MapMenuProps) {
                         'buildingRamps': !props.visibility.accessibility.buildingRamps
                       }})
                     }
-                  ><img width={15} src={ props.visibility.accessibility.buildingRamps ? './img/square-check-solid.png' : './img/square-thin.png' } />
+                  ><img width={15} src={ props.visibility.accessibility.buildingRamps ? checked : unchecked } />
                   &nbsp;
                     Building Ramps
                   </a>
@@ -262,7 +269,7 @@ export default function MapMenu(props: MapMenuProps) {
                         'curbRamps': !props.visibility.accessibility.curbRamps
                       }})
                     }
-                  > <img width={15} src={ props.visibility.accessibility.curbRamps ? './img/square-check-solid.png' : './img/square-thin.png' } />
+                  > <img width={15} src={ props.visibility.accessibility.curbRamps ? checked : unchecked } />
                   &nbsp;
                     Parking Ramps
                   </a>
@@ -278,7 +285,7 @@ export default function MapMenu(props: MapMenuProps) {
                         'autoDoors': !props.visibility.accessibility.autoDoors
                       }})
                     }
-                  ><img width={15} src={ props.visibility.accessibility.autoDoors ? './img/square-check-solid.png' : './img/square-thin.png' } />
+                  ><img width={15} src={ props.visibility.accessibility.autoDoors ? checked : unchecked } />
                   &nbsp;
                     Automatic Doors
                   </a>
@@ -290,15 +297,13 @@ export default function MapMenu(props: MapMenuProps) {
                 id="shuttleStops"
                 href='#shuttleStops'
                 onClick={() => props.setVisibility({ ...props.visibility, 'shuttleStops': !props.visibility['shuttleStops'] })} >
-              <img width={30} src='./img/bus.png' alt="bus logo"/></a>
+              <img width={30} src={busIcon} alt="bus logo"/></a>
               <a
                 className={props.visibility.emergencyPhones ? 'btn btn-dark rounded-0 d-flex align-items-center' : 'btn rounded-0 d-flex align-items-center'}
                 id="blueLightPhones"
                 href='#blueLightPhones'
                 onClick={() => props.setVisibility({ ...props.visibility, 'emergencyPhones': !props.visibility['emergencyPhones'] })} >
-              <img width={30} src='./img/phone.png' alt="emergency phones"/></a> 
-
-
+              <img width={30} src={phoneIcon} alt="emergency phones"/></a> 
           </div>
         </div>
         </div>

src/components/SearchResults.tsx

@@ -1,6 +1,10 @@
 import { Feature } from 'geojson';
 
+import closeIcon from '../assets/xmark-solid.png';
+import searchIcon from '../assets/search-white.png';
+
 import './SearchResults.scss';
+import { useState } from 'react';
 
 interface SearchResultsProps {
   searchResults: Array<Feature>,
@@ -9,16 +13,30 @@ interface SearchResultsProps {
 }
 
 export default function SearchResults(props: SearchResultsProps) {
+  const [searchQuery, setSearchQuery] = useState<string>('');
+
   return (
     <div className='search-control-wrapper rounded'>
       <div className='input-group'>
       <input
         className='form-control'
         type='text'
         placeholder='Find locations, services, parking & more... '
-        onChange={(e) => props.searchData(e.target.value)} />
+        value={searchQuery}
+        onChange={(e) => {
+          setSearchQuery(e.target.value);
+          props.searchData(e.target.value)
+        }} />
         <div className="input-group-text border-0 bg-black" id="search-addon">
-          <img width={20} src="./img/search-white.png" />
+          {
+          searchQuery !== '' ? (
+            <img width={20} src={closeIcon} onClick={() => {
+              props.searchData(null)
+              setSearchQuery('');
+            }} />
+          ) : (
+            <img width={20} src={searchIcon} />
+          ) }
         </div>
       </div>  
       {props.searchResults && props.searchResults.length > 0 && (