updated business data

xaea12/app/components/map.tsx

@@ -5,6 +5,7 @@ import {
     HeatmapLayerProps,
     HeatmapLayerF
 } from "@react-google-maps/api";
+import Places from "./places"
 
 type LatLngLiteral = google.maps.LatLngLiteral;
 type DirectionsResult = google.maps.DirectionsResult;
@@ -14,7 +15,7 @@ type heatMapOptions = google.maps.visualization.HeatmapLayerOptions
 export default function Map() {
     const mapRef = useRef<GoogleMap>();
     const center = useMemo<LatLngLiteral>(
-        () => ({ lat: 43.45, lng: -80.49 }),
+        () => ({ lat: 12.9682704, lng: 74.8065197 }),
         []
     );
     const onLoad = useCallback((map) => (mapRef.current = map), []);
@@ -28,41 +29,90 @@ export default function Map() {
     );
     const heatMapOptions = useMemo<heatMapOptions>(
         () => ({
-            gradient: [
-                "rgba(0, 255, 255, 0)",
-                "rgba(0, 255, 255, 1)",
-                "rgba(0, 191, 255, 1)",
-                "rgba(0, 127, 255, 1)",
-                "rgba(0, 63, 255, 1)",
-                "rgba(0, 0, 255, 1)",
-                "rgba(0, 0, 223, 1)",
-                "rgba(0, 0, 191, 1)",
-                "rgba(0, 0, 159, 1)",
-                "rgba(0, 0, 127, 1)",
-                "rgba(63, 0, 91, 1)",
-                "rgba(127, 0, 63, 1)",
-                "rgba(191, 0, 31, 1)",
-                "rgba(255, 0, 0, 1)",
-            ],
             opacity: 2,
-            radius: 50
+            radius: 100
         }),
         []
     );
-    var heatMapData = [
-        { location: new google.maps.LatLng(37.782, -122.447), weight: 20 },
-
+    var businessData = [
+        {
+            "coordinates": {
+                "lat": 12.9682704,
+                "lng": 74.8065197
+            },
+            "weekly_sum": 5307
+        },
+        {
+            "coordinates": {
+                "lat": 12.9883174,
+                "lng": 74.8005921
+            },
+            "weekly_sum": 3800
+        },
+        {
+            "coordinates": {
+                "lat": 13.0223759,
+                "lng": 74.8079575
+            },
+            "weekly_sum": 5655
+        },
+        {
+            "coordinates": {
+                "lat": 12.9894559,
+                "lng": 74.8015439
+            },
+            "weekly_sum": 3798
+        },
+        {
+            "coordinates": {
+                "lat": 12.9743232,
+                "lng": 74.8036651
+            },
+            "weekly_sum": 4279
+        },
+        {
+            "coordinates": {
+                "lat": 12.9815466,
+                "lng": 74.8227607
+            },
+            "weekly_sum": 4314
+        },
+        {
+            "coordinates": {
+                "lat": 13.0010366,
+                "lng": 74.8260901
+            },
+            "weekly_sum": 5191
+        }
     ];
-    var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);
+    let heatMapData = [];
+
+    for (let i = 0; i < businessData.length; i++) {
+        let data = {
+            location: new google.maps.LatLng(businessData[i].coordinates.lat, businessData[i].coordinates.lng),
+            weight: businessData[i].weekly_sum
+        };
+        heatMapData.push(data);
+    }
+    console.log(heatMapData)
 
+    const [business, setBusiness] = useState<LatLngLiteral>();
     // const onLoad = useCallback((map) => (mapRef.current = map), []);
     return (
         <div className="container">
-            <div className="controls"><h1>Business Type?</h1></div>
+            <div className="controls">
+                <h1>Business Type?</h1>
+                <Places setBusiness={
+                    (position) => {
+                        setBusiness(position);
+                        mapRef.current?.panTo(position)
+                    }
+                } />
+            </div>
             <div id="map" className="map">
                 <GoogleMap
                     zoom={10}
-                    center={sanFrancisco}
+                    center={center}
                     mapContainerClassName="map-container"
                     options={options}
                     onLoad={onLoad}

xaea12/app/components/places.tsx

@@ -0,0 +1,76 @@
+import usePlacesAutocomplete, {
+    getGeocode,
+    getLatLng,
+} from "use-places-autocomplete";
+import TextField from '@mui/material/TextField';
+import Autocomplete from '@mui/material/Autocomplete';
+import Select from 'react-select';
+import { useState, useMemo, useCallback, useRef } from "react";
+type PlacesProps = {
+    setBusiness: (position: google.maps.LatLngLiteral) => void;
+}
+export default function Places({ setBusiness }: PlacesProps) {
+    const {
+        ready,
+        value,
+        setValue,
+        suggestions: { status, data },
+        clearSuggestions,
+    } = usePlacesAutocomplete();
+
+    const [inputValue, setInputValue] = useState('');
+
+    const handleInputChange = (event: any) => {
+        setInputValue(event.target.value);
+        setValue(event.target.value);
+    };
+
+    const handleSelect = async (selectedOption: any) => {
+        const val = selectedOption.value;
+        setValue(val, false);
+        clearSuggestions();
+
+        const results = await getGeocode({ address: val });
+        const { lat, lng } = await getLatLng(results[0]);
+        setBusiness({ lat, lng });
+    };
+
+    const options = data.map(({ place_id, description }) => ({ value: description, label: description }));
+
+    return (
+        // <Combobox onSelect={handleSelect}>
+        //     <ComboboxInput
+        //         value={value}
+        //         onChange={(e) => setValue(e.target.value)}
+        //         disabled={!ready}
+        //         className="combobox-input"
+        //         placeholder="Search business location"
+        //     />
+        //     <ComboboxPopover>
+        //         <ComboboxList>
+        //             {status === "OK" &&
+        //                 data.map(({ place_id, description }) => (
+        //                     <ComboboxOption key={place_id} value={description} />
+        //                 ))}
+        //         </ComboboxList>
+        //     </ComboboxPopover>
+        // </Combobox>
+        <div>
+            <input
+                type="text"
+                value={inputValue}
+                onChange={handleInputChange}
+                placeholder="Search office address"
+            />
+            {ready && (
+                <Select
+                    value={options.find(option => option.value === value)}
+                    onChange={handleSelect}
+                    options={status === "OK" ? options : []}
+                    placeholder="Or select from suggestions"
+                />
+            )}
+        </div>
+
+    )
+}

xaea12/app/globals.css

@@ -17,10 +17,10 @@
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
+  /* color: rgb(var(--foreground-rgb));
   background: linear-gradient(to bottom,
       transparent,
-      rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
+      rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); */
   padding: 0;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,