Skip to content

Commit

Permalink
fixed a bug where the marker was visible with undefined geo inputs.
Browse files Browse the repository at this point in the history
  • Loading branch information
lmueller27 committed Jul 6, 2023
1 parent b2668ba commit 6f514b7
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 4 deletions.
9 changes: 5 additions & 4 deletions app/components/collapsibleMap.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { formState, myColors } from "../shared/utils"
import { useRef, useState } from "react"
import styles from './form.module.css'

export default function CollapsibleMap({ state, setState, center, setCenter }: { state: formState, setState:React.Dispatch<React.SetStateAction<formState>>, center: [number, number], setCenter: React.Dispatch<React.SetStateAction<[number, number]>> }) {
export default function CollapsibleMap({ state, setState, center, setCenter }: { state: formState, setState: React.Dispatch<React.SetStateAction<formState>>, center: [number, number], setCenter: React.Dispatch<React.SetStateAction<[number, number]>> }) {

const [zoom, setZoom] = useState(11)
const [mapOpen, setMapOpen] = useState(true);
Expand All @@ -14,8 +14,8 @@ export default function CollapsibleMap({ state, setState, center, setCenter }: {

return (
<div>
<button type="button" onClick={()=>setMapOpen(!mapOpen)}>{mapOpen ? <p><FontAwesomeIcon icon={faChevronUp} color={myColors.IconBlue}/> Collapse Map</p> : <p><FontAwesomeIcon icon={faChevronDown} color={myColors.IconBlue}/> Expand Map <FontAwesomeIcon icon={faMapLocationDot} color={myColors.IconBlue}/></p>}</button>
<div ref={mapRef} className={styles.mapSpace} style={mapOpen?{height: mapRef.current?.scrollHeight+'px'}:{height:"0px"}}>
<button type="button" onClick={() => setMapOpen(!mapOpen)}>{mapOpen ? <p><FontAwesomeIcon icon={faChevronUp} color={myColors.IconBlue} /> Collapse Map</p> : <p><FontAwesomeIcon icon={faChevronDown} color={myColors.IconBlue} /> Expand Map <FontAwesomeIcon icon={faMapLocationDot} color={myColors.IconBlue} /></p>}</button>
<div ref={mapRef} className={styles.mapSpace} style={mapOpen ? { height: mapRef.current?.scrollHeight + 'px' } : { height: "0px" }}>
<Map
height={300}
defaultCenter={[50.8, 6.10]}
Expand All @@ -28,7 +28,8 @@ export default function CollapsibleMap({ state, setState, center, setCenter }: {
setZoom(zoom)
}}>
<Draggable offset={[6, 20]} anchor={[Number(state.latitude), Number(state.longitude)]} onDragEnd={updateMarker}>
<FontAwesomeIcon icon={faLocationDot} color={myColors.IconBlue} />
{(!Number.isNaN(state.latitude) && !Number.isNaN(state.longitude)) && (state.latitude != undefined && state.longitude != undefined) ?
<FontAwesomeIcon icon={faLocationDot} color={myColors.IconBlue} /> : null}
</Draggable>
</Map>
</div>
Expand Down
2 changes: 2 additions & 0 deletions app/components/form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@ export default function Form(props: any) {
// not used
const [inputIsIncomplete, setInputIsIncomplete] = useState(false)

const [center, setCenter] = useState<[number, number]>([50.80, 6.10])

return (
<div className={styles.form}>
<InputSpace state={state} setState={setState} />
Expand Down

0 comments on commit 6f514b7

Please sign in to comment.