Property map

2024-07-12 08:06:50 -04:00
parent 1c455ca30f
commit 6be8ef7425
4 changed files with 650 additions and 1 deletions
@@ -0,0 +1,91 @@
+'use client';
+import { useEffect, useState } from 'react';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import Map, { Marker } from 'react-map-gl';
+import { setDefaults, fromAddress } from 'react-geocode';
+import Image from 'next/image';
+import pin from '@/assets/images/pin.svg';
+
+const PropertyMap = ({ property }) => {
+  const [lat, setLat] = useState(null);
+  const [lng, setLng] = useState(null);
+  const [viewport, setViewport] = useState({
+    latitude: 0,
+    longitude: 0,
+    zoom: 12,
+    width: '100%',
+    height: '500px',
+  });
+  const [loading, setLoading] = useState(true);
+  const [geocodeError, setGeocodeError] = useState(false);
+
+  setDefaults({
+    key: process.env.NEXT_PUBLIC_GOOGLE_GEOCODING_API_KEY,
+    language: 'en',
+    region: 'us',
+  });
+
+  useEffect(() => {
+    const fetchCoords = async () => {
+      try {
+        const res = await fromAddress(
+          `${property.location.street} ${property.location.city} ${property.location.state} ${property.location.zipcode}`
+        );
+
+        //  Check for results
+        if (res.results.length === 0) {
+          // No results found
+          setGeocodeError(true);
+          setLoading(false);
+          return;
+        }
+
+        const { lat, lng } = res.results[0].geometry.location;
+
+        setLat(lat);
+        setLng(lng);
+        setViewport({
+          ...viewport,
+          latitude: lat,
+          longitude: lng,
+        });
+
+        setLoading(false);
+      } catch (error) {
+        console.log(error);
+        setGeocodeError(true);
+        setLoading(false);
+      }
+    };
+
+    fetchCoords();
+  }, []);
+
+  if (loading) return <h3>Loading...</h3>;
+
+  if (geocodeError) {
+    return <div className='text-xl'>No location data found</div>;
+  }
+
+  return (
+    !loading && (
+      <Map
+        mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_TOKEN}
+        mapLib={import('mapbox-gl')}
+        initialViewState={{
+          longitude: lng,
+          latitude: lat,
+          zoom: 15,
+        }}
+        style={{ width: '100%', height: 500 }}
+        mapStyle='mapbox://styles/mapbox/streets-v9'
+      >
+        <Marker longitude={lng} latitude={lat} anchor='bottom'>
+          <Image src={pin} alt='location' width={40} height={40} />
+        </Marker>
+      </Map>
+    )
+  );
+};
+
+export default PropertyMap;