marker on map

palprabhat · Feb 5, 2021 · ed50b1a · ed50b1a
1 parent 1443867
commit ed50b1a
Show file tree

Hide file tree

Showing 11 changed files with 183 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "firebase": "^8.2.4",
     "firebase-admin": "^9.4.2",
     "framer-motion": "^3.2.2-rc.1",
+    "geolib": "^3.3.1",
     "js-cookie": "^2.2.1",
     "next": "10.0.5",
     "react": "17.0.1",

diff --git a/pages/places/[id]/index.tsx b/pages/places/[id]/index.tsx
@@ -15,9 +15,10 @@ import Modal from "src/components/Modal";
 import {
   DeletePlaceMutation,
   DeletePlaceMutationVariables,
-} from "../../../src/generated/DeletePlaceMutation";
+} from "src/generated/DeletePlaceMutation";
 import { useToasts } from "react-toast-notifications";
 import { urls } from "src/consts/urls";
+import CurrentMap from "src/components/CurrentMap";
 
 type PlaceIdFC<P = {}> = FC<P> & additionalType;
 
@@ -84,60 +85,71 @@ const PlaceId: PlaceIdFC = () => {
       <Head>
         <title>{place.address} | Places to see</title>
       </Head>
-      <div
-        className="overflow-y-scroll p-8 pt-4 mx-auto"
-        style={{ maxWidth: "780px", height: "calc(100vh - 75px)" }}
-      >
-        <div className="flex justify-end space-x-4 mt-1">
-          {editMode ? (
-            <Button onClick={() => setEditMode(false)}>Cancel</Button>
-          ) : (
-            <>
-              <Button className="text-2xl" onClick={() => setEditMode(true)}>
-                <MdEdit />
-              </Button>
-              <Button
-                variant="danger"
-                className="text-2xl"
-                onClick={() => setShowDeleteModal(true)}
-              >
-                <MdDelete />
-              </Button>
-            </>
-          )}
-        </div>
-        {editMode ? (
-          <PlaceForm
-            place={place}
-            onSubmitted={() => {
-              refetch();
-              setEditMode(false);
-            }}
-          />
-        ) : (
-          <div className="flex flex-col items-start mt-4">
-            <h2 className="text-3xl">{place.placeName}</h2>
-            <p className="mt-1 text-sm text-gray-400">{place.placeType}</p>
-            <div className="flex items-center mt-2">
-              <IoLocationSharp className="mr-2" /> {place.address}
+      <div className="flex">
+        <div className="w-1/2">
+          <div
+            className="overflow-y-scroll p-8 pt-4 mx-auto"
+            style={{ maxWidth: "780px", height: "calc(100vh - 75px)" }}
+          >
+            <div className="flex justify-end space-x-4 mt-1">
+              {editMode ? (
+                <Button onClick={() => setEditMode(false)}>Cancel</Button>
+              ) : (
+                <>
+                  <Button
+                    className="text-2xl"
+                    onClick={() => setEditMode(true)}
+                  >
+                    <MdEdit />
+                  </Button>
+                  <Button
+                    variant="danger"
+                    className="text-2xl"
+                    onClick={() => setShowDeleteModal(true)}
+                  >
+                    <MdDelete />
+                  </Button>
+                </>
+              )}
             </div>
-            <Image
-              className="object-cover w-full rounded-md mt-6"
-              cloudName={process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}
-              publicId={place.publicId}
-              alt={place.placeName}
-              secure
-              dpr="auto"
-              quality="auto"
-              width={900}
-              height={Math.floor((9 / 16) * 900)}
-              crop="fill"
-              gravity="auto"
-            />
-            <p className="text-sm mt-4">{place.description}</p>
+            {editMode ? (
+              <PlaceForm
+                place={place}
+                onSubmitted={() => {
+                  refetch();
+                  setEditMode(false);
+                }}
+              />
+            ) : (
+              <div className="flex flex-col items-start mt-4">
+                <h2 className="text-3xl">{place.placeName}</h2>
+                <p className="mt-1 text-sm text-gray-400">{place.placeType}</p>
+                <div className="flex items-center mt-2">
+                  <IoLocationSharp className="mr-2" /> {place.address}
+                </div>
+                <Image
+                  className="object-cover w-full rounded-md mt-6"
+                  cloudName={process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}
+                  publicId={place.publicId}
+                  alt={place.placeName}
+                  secure
+                  dpr="auto"
+                  quality="auto"
+                  width={900}
+                  height={Math.floor((9 / 16) * 900)}
+                  crop="fill"
+                  gravity="auto"
+                />
+                <p className="text-sm mt-4">{place.description}</p>
+              </div>
+            )}
           </div>
-        )}
+        </div>
+        <div className="w-1/2 h-full">
+          <CurrentMap place={place} />
+        </div>
       </div>
+
       <Modal
         id="place-delete-modal"
         isOpen={showDeleteModal}
@@ -163,6 +175,6 @@ const PlaceId: PlaceIdFC = () => {
   );
 };
 
-PlaceId.withMapView = true;
+// PlaceId.withMapView = true;
 
 export default PlaceId;
diff --git a/schema.gql b/schema.gql
@@ -27,6 +27,7 @@ type Place {
   image: String!
   latitude: Float!
   longitude: Float!
+  nearby: [Place!]!
   placeName: String!
   placeType: String!
   publicId: String!

diff --git a/src/components/CurrentMap.tsx b/src/components/CurrentMap.tsx
@@ -0,0 +1,70 @@
+import { FC, useRef, useState } from "react";
+import ReactMapGL, { Marker, NavigationControl, ViewState } from "react-map-gl";
+import "mapbox-gl/dist/mapbox-gl.css";
+import { IoLocationSharp } from "react-icons/io5";
+import Link from "next/link";
+
+interface IPlace {
+  id: string;
+  latitude: number;
+  longitude: number;
+  nearby: IPlace[];
+}
+
+const CurrentMap: FC<{ place: IPlace }> = ({ place }) => {
+  const mapRef = useRef<ReactMapGL | null>();
+  const [viewport, setViewport] = useState<ViewState>({
+    latitude: place.latitude,
+    longitude: place.longitude,
+    zoom: 12,
+  });
+
+  return (
+    <div className="relative">
+      <ReactMapGL
+        {...viewport}
+        width="100%"
+        height="calc(100vh - 75px)"
+        ref={(instance) => (mapRef.current = instance)}
+        minZoom={4}
+        maxZoom={18}
+        mapboxApiAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API_TOKEN}
+        onViewportChange={setViewport}
+        mapStyle="mapbox://styles/prabhatpal14/ckkhnouxu02d917mlce5wg9tm"
+      >
+        <div className="absolute top-0 right-0 p-4">
+          <NavigationControl showCompass={false} />
+        </div>
+
+        {place.nearby.map((nearPlace) => (
+          <Marker
+            latitude={nearPlace.latitude}
+            longitude={nearPlace.longitude}
+            offsetLeft={-20}
+            offsetTop={-20}
+            key={nearPlace.id}
+            className="hover:z-10"
+          >
+            <Link href={`/places/${nearPlace.id}`}>
+              <a>
+                <IoLocationSharp className="text-3xl text-white hover:text-red-600 cursor-pointer transform transition-all hover:scale-125 hover:-translate-y-1" />
+              </a>
+            </Link>
+          </Marker>
+        ))}
+
+        <Marker
+          latitude={place.latitude}
+          longitude={place.longitude}
+          offsetLeft={-20}
+          offsetTop={-20}
+          className="hover:z-10"
+        >
+          <IoLocationSharp className="text-3xl text-red-400 hover:text-red-600 cursor-pointer transform transition-all hover:scale-125 hover:-translate-y-1 hover:z-10" />
+        </Marker>
+      </ReactMapGL>
+    </div>
+  );
+};
+
+export default CurrentMap;
diff --git a/src/components/Map.tsx b/src/components/Map.tsx
@@ -1,5 +1,5 @@
 import { useRef } from "react";
-import ReactMapGL, { ViewState } from "react-map-gl";
+import ReactMapGL, { NavigationControl, ViewState } from "react-map-gl";
 import "mapbox-gl/dist/mapbox-gl.css";
 import { useLocalStorage } from "src/hooks";
 
@@ -28,7 +28,11 @@ const Map = () => {
         mapboxApiAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API_TOKEN}
         onViewportChange={setViewport}
         mapStyle="mapbox://styles/prabhatpal14/ckkhnouxu02d917mlce5wg9tm"
-      />
+      >
+        <div className="absolute top-0 right-0 p-4">
+          <NavigationControl showCompass={false} />
+        </div>
+      </ReactMapGL>
     </div>
   );
 };

diff --git a/src/components/PlaceForm.tsx b/src/components/PlaceForm.tsx
@@ -96,7 +96,7 @@ const uploadImage = async (
   const formData = new FormData();
   formData.append("file", image);
   formData.append("signature", signature);
-  formData.append("timestamp", timestamp.toString() + "sf");
+  formData.append("timestamp", timestamp.toString());
   formData.append("api_key", process.env.NEXT_PUBLIC_CLOUDINARY_KEY ?? "");
 
   try {

diff --git a/src/generated/GetPlaceByIdQuery.ts b/src/generated/GetPlaceByIdQuery.ts
@@ -7,6 +7,13 @@
 // GraphQL query operation: GetPlaceByIdQuery
 // ====================================================
 
+export interface GetPlaceByIdQuery_place_nearby {
+  __typename: "Place";
+  id: string;
+  latitude: number;
+  longitude: number;
+}
+
 export interface GetPlaceByIdQuery_place {
   __typename: "Place";
   id: string;
@@ -18,6 +25,7 @@ export interface GetPlaceByIdQuery_place {
   placeName: string;
   placeType: string;
   description: string;
+  nearby: GetPlaceByIdQuery_place_nearby[];
 }
 
 export interface GetPlaceByIdQuery {

diff --git a/src/gql/place.ts b/src/gql/place.ts
@@ -12,6 +12,11 @@ export const GET_PLACE_BY_ID_QUERY = gql`
       placeName
       placeType
       description
+      nearby {
+        id
+        latitude
+        longitude
+      }
     }
   }
 `;

diff --git a/src/schema/place.ts b/src/schema/place.ts
@@ -1,4 +1,5 @@
 import { Max, Min } from "class-validator";
+import { getBoundsOfDistance } from "geolib";
 import {
   Arg,
   Authorized,
@@ -79,6 +80,26 @@ class Place {
     const parts = this.image.split("/");
     return parts[parts.length - 1] ?? "";
   }
+
+  @Field((_type) => [Place])
+  async nearby(@Ctx() ctx: Context) {
+    const bounds = getBoundsOfDistance(
+      {
+        latitude: this.latitude,
+        longitude: this.longitude,
+      },
+      10000
+    );
+
+    return ctx.prisma.place.findMany({
+      where: {
+        latitude: { gte: bounds[0]?.latitude, lte: bounds[1]?.latitude },
+        longitude: { gte: bounds[0]?.longitude, lte: bounds[1]?.longitude },
+        id: { not: { equals: this.id } },
+      },
+      take: 30,
+    });
+  }
 }
 
 @Resolver()

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -63,6 +63,7 @@ module.exports = {
       backgroundColor: ["active", "disabled"],
       cursor: ["disabled"],
       translate: ["active"],
+      zIndex: ["hover"],
     },
   },
   plugins: [],

diff --git a/yarn.lock b/yarn.lock
@@ -4377,6 +4377,10 @@ geojson-vt@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/geojson-vt/-/geojson-vt-3.2.1.tgz#f8adb614d2c1d3f6ee7c4265cad4bbf3ad60c8b7"
 
+geolib@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/geolib/-/geolib-3.3.1.tgz#f144a53b6a6858e81111ff71d137318389927611"
+
 get-intrinsic@^1.0.1, get-intrinsic@^1.0.2, get-intrinsic@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.0.tgz#892e62931e6938c8a23ea5aaebcfb67bd97da97e"