Skip to content

Commit

Permalink
add click to place marker
Browse files Browse the repository at this point in the history
  • Loading branch information
@NwinNwin
NwinNwin committed Aug 31, 2023
1 parent ab2c2f2 commit 904f77f
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 99 deletions.
208 changes: 116 additions & 92 deletions src/components/Home/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@ import {
DrawerOverlay,
DrawerContent,
DrawerCloseButton,
Alert,
AlertIcon,
AlertTitle,
AlertDescription,
} from "@chakra-ui/react";
import { SettingsIcon, ChevronDownIcon, StarIcon } from "@chakra-ui/icons";
import logo from "../../assets/images/small_logo.png";
Expand Down Expand Up @@ -91,7 +95,6 @@ export default function Home() {
const [focusLocation, setFocusLocation] = useState();
const [screenWidth, setScreenWidth] = useState(window.screen.width);
const [uploadImg, setUploadImg] = useState("");
console.log("In parent, setUploadImg type:", typeof setUploadImg);

// LOGIN MODAL
const {
Expand Down Expand Up @@ -333,6 +336,7 @@ export default function Home() {
</InputGroup>
</Flex>
</Flex>

<Flex
position="relative"
marginTop={{ base: "1vh", md: "2%" }}
Expand All @@ -347,100 +351,120 @@ export default function Home() {
flexDirection="row"
justifyContent="space-between"
>
<Button
backgroundColor="#a881af"
boxShadow="2xl"
color="white"
onClick={onOpen}
fontSize={{ base: "xl", md: "2xl" }}
size="lg"
gap={2}
>
<SettingsIcon />
Filter
</Button>
<Filter
setFindFilter={setFindFilter}
findFilter={findFilter}
onOpen={onOpen}
isOpen={isOpen}
onClose={onClose}
/>
<Button
display={{ md: "none" }}
colorScheme="blue"
onClick={onResultsBarOpen}
fontSize="2xl"
boxShadow="2xl"
size="lg"
gap={2}
>
<StarIcon />
</Button>
{isEdit ? (
<Flex>
<Alert
status="warning"
textAlign="center"
alignItems="center"
justifyContent="center"
height="80px"
border="3px red solid"
borderRadius="20px"
boxShadow="xl"
>
<AlertIcon />
<AlertTitle>Click on the Map to place your item 📍</AlertTitle>
</Alert>
</Flex>
) : (
<>
<Button
backgroundColor="#a881af"
boxShadow="2xl"
color="white"
onClick={onOpen}
fontSize={{ base: "xl", md: "2xl" }}
size="lg"
gap={2}
>
<SettingsIcon />
Filter
</Button>
<Filter
setFindFilter={setFindFilter}
findFilter={findFilter}
onOpen={onOpen}
isOpen={isOpen}
onClose={onClose}
/>
<Button
display={{ md: "none" }}
colorScheme="blue"
onClick={onResultsBarOpen}
fontSize="2xl"
boxShadow="2xl"
size="lg"
gap={2}
>
<StarIcon />
</Button>

<Drawer
isOpen={isResultsBarOpen}
placement="right"
onClose={onResultsBarClose}
size="full"
>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton size="lg" />
<DrawerHeader>
{isFilterOff() ? (
<Text fontSize="2xl">All Posts</Text>
) : (
<Flex alignItems="center" gap={1}>
<Text fontSize="2xl" color="green">
Filter: ON
</Text>
<SettingsIcon color="green" />
</Flex>
)}
</DrawerHeader>
<DrawerBody overflow="hidden">
<Flex width="100%" flexDir="column">
<Flex>
<InputGroup
mb="1%"
width="90%"
mx="auto"
size={{ base: "md", md: "lg" }}
>
<InputLeftAddon children="🔎" />
<Input
type="teal"
value={search}
placeholder="Search Items ..."
isDisabled={!loading}
onChange={(e) => setSearch(e.target.value)}
/>
</InputGroup>
<Drawer
isOpen={isResultsBarOpen}
placement="right"
onClose={onResultsBarClose}
size="full"
>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton size="lg" />
<DrawerHeader>
{isFilterOff() ? (
<Text fontSize="2xl">All Posts</Text>
) : (
<Flex alignItems="center" gap={1}>
<Text fontSize="2xl" color="green">
Filter: ON
</Text>
<SettingsIcon color="green" />
</Flex>
)}
</DrawerHeader>
<DrawerBody overflow="hidden">
<Flex width="100%" flexDir="column">
<Flex>
<InputGroup
mb="1%"
width="90%"
mx="auto"
size={{ base: "md", md: "lg" }}
>
<InputLeftAddon children="🔎" />
<Input
type="teal"
value={search}
placeholder="Search Items ..."
isDisabled={!loading}
onChange={(e) => setSearch(e.target.value)}
/>
</InputGroup>

<Button
colorScheme="green"
size="md"
fontSize="xl"
mr={3}
onClick={onOpen}
>
<SettingsIcon />
</Button>
</Flex>
<Button
colorScheme="green"
size="md"
fontSize="xl"
mr={3}
onClick={onOpen}
>
<SettingsIcon />
</Button>
</Flex>

<ResultsBar
search={search}
findFilter={findFilter}
setData={setData}
setFocusLocation={setFocusLocation}
onResultsBarClose={onResultsBarClose}
/>
</Flex>
</DrawerBody>
<DrawerFooter></DrawerFooter>
</DrawerContent>
</Drawer>
<ResultsBar
search={search}
findFilter={findFilter}
setData={setData}
setFocusLocation={setFocusLocation}
onResultsBarClose={onResultsBarClose}
/>
</Flex>
</DrawerBody>
<DrawerFooter></DrawerFooter>
</DrawerContent>
</Drawer>
</>
)}
</Flex>
<Flex position="absolute">
<Map
Expand Down
38 changes: 33 additions & 5 deletions src/components/Map/Map.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
useMap,
Rectangle,
Circle,
useMapEvents,
} from "react-leaflet";
import { useDisclosure } from "@chakra-ui/react";
import InfoModal from "../InfoModal/InfoModal";
Expand All @@ -41,7 +42,7 @@ export default function Map({
setFocusLocation,
setUploadImg,
uploadImg,
upload
upload,
}) {
const { user } = UserAuth();
const { data, setLoading } = useContext(DataContext);
Expand Down Expand Up @@ -75,7 +76,6 @@ export default function Map({
}
}, [focusLocation, setFocusLocation]);


const allMarkers = data
.filter((item) => {
return (
Expand Down Expand Up @@ -172,7 +172,7 @@ export default function Map({
itemDate: "",
});
setIsCreate(!isCreate);
setUploadImg("")
setUploadImg("");
})
.catch((err) => console.log(err));

Expand Down Expand Up @@ -214,6 +214,33 @@ export default function Map({
);
}

const NewItemMarker = () => {
const map = useMapEvents({
click(event) {
const { lat, lng } = event.latlng;
setPosition([lat, lng]);
},
});

return position[0] !== centerPosition[0] &&
position[1] !== centerPosition[1] ? (
<Marker
className="marker"
draggable={true}
eventHandlers={eventHandlers}
position={position}
ref={markerRef}
icon={othersDrag}
>
<Popup minWidth={90} closeButton={false}>
<span className="popup" onClick={() => toggleDraggable()}>
Click to Confirm Location 🤔
</span>
</Popup>
</Marker>
) : null;
};

return (
<div>
<MapContainer
Expand All @@ -230,7 +257,7 @@ export default function Map({
{!isEdit && <Test location={focusLocation} search={search} />}
{!isEdit}
{!isEdit && allMarkers}
{isEdit && (
{/* {isEdit && (
<Marker
className="marker"
draggable={true}
Expand All @@ -245,7 +272,8 @@ export default function Map({
</span>
</Popup>
</Marker>
)}
)} */}
{isEdit && <NewItemMarker />}
{showDonut && focusLocation && (
<>
<Circle
Expand Down
4 changes: 2 additions & 2 deletions src/components/Map/MapIcons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,8 @@ const othersFound = L.icon({

export const othersDrag = L.icon({
iconUrl: others_black,
iconSize: [60, 60],
iconAnchor: [30, 50],
iconSize: [50, 50],
iconAnchor: [25, 30],
});

export const flyImg = L.icon({
Expand Down

0 comments on commit 904f77f

Please sign in to comment.