Basic map works

astro/src/components/KiosMap.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect } from 'react';
 import { MapContainer, TileLayer, Marker, CircleMarker, Popup, Polyline, LayerGroup, GeoJSON, } from 'react-leaflet';
-// import 'leaflet/dist/leaflet.css';
+import 'leaflet/dist/leaflet.css';
-
+import L, { LatLngBounds } from 'leaflet';
-import L from 'leaflet';
 
 import { useQuery, useMutation, useQueryClient, queryOptions } from "@tanstack/react-query";
 import axios from "axios";
@@ -40,7 +39,8 @@ type Retailer = {
   updatedAt: string;
 };
 
-interface Courier {
+//Todo: the courier should not hold the starting and end points
+type Courier = {
   id: string;
   name: string;
   startingPoint: string;
@@ -52,7 +52,7 @@ interface Courier {
   updatedAt: string;
 }
 
-interface Dispatch {
+type Dispatch = {
   id: string;
   dispatchesCode: string;
   products: Product[];
@@ -120,7 +120,7 @@ const getDispatches = async () => {
 
 const useGetDispatches = () => {
   return useQuery<Dispatch[]>({
-    queryFn: () => getRetailers(),
+    queryFn: () => getDispatches(),
     queryKey: ['retailers'],
     enabled: true
   })
@@ -132,19 +132,28 @@ export const KiosMap = () => {
   const { data: retailers, isLoading: isLoadingRetailers } = useGetRetailers();
   const { data: dispatches, isLoading: isLoadingDispatches } = useGetDispatches();
 
-
   const blackDotIcon = L.divIcon({
-    className: 'black-dot',
+    className: 'bg-gray-950 rounded-full',
     iconSize: [20, 20],
     iconAnchor: [10, 10]
   });
+  
+
+  const bounds = new LatLngBounds(
+    [-90, -180], // Southwest corner
+    [90, 180]    // Northeast corner
+  );
 
   return (
+    <div className='w-full flex justify-center align-middle'>
+   
     <MapContainer
       id="map"
       center={[-6.1815, 106.8228]}
-      //zoom={3}
+      zoom={3}
-      className="w-full"
+      maxBounds={bounds} // Restrict panning beyond these bounds
+      maxBoundsViscosity={0.9} // How strongly to snap the map's bounds to the restricted area
+      style={{ height: '800px', width: '100%' }}
     >
       <TileLayer url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
         maxZoom={19}
@@ -154,13 +163,13 @@ export const KiosMap = () => {
       {makers &&
         <LayerGroup>
           {makers.map((maker: any, index: number) => (
-            <CircleMarker
+            <Marker
               key={index}
-              center={[maker.location[0], maker.location[1]]}
+              position={[maker.location[0], maker.location[1]]}
-              fillColor='black'
+              icon={blackDotIcon}
             >
               <Popup>{maker.name}</Popup>
-            </CircleMarker>
+            </Marker>
           ))}
         </LayerGroup>
       }
@@ -168,18 +177,18 @@ export const KiosMap = () => {
       {retailers &&
         <LayerGroup>
           {retailers.map((retailer: any, index: number) => (
-            <CircleMarker
+            <Marker
               key={index}
-              center={[retailer.location[0], retailer.location[1]]}
+              position={[retailer.location[0], retailer.location[1]]}
-              fillColor='black'
+              icon={blackDotIcon}
             >
               <Popup>{retailer.name}</Popup>
-            </CircleMarker>
+            </Marker>
           ))}
         </LayerGroup>
       }
 
-      {dispatches &&
+      {/* {dispatches &&
         <LayerGroup>
           {dispatches.map((dispatch: any, index: number) => {
             const start = dispatch.startingPoint.location;
@@ -215,8 +224,9 @@ export const KiosMap = () => {
             );
           })}
         </LayerGroup>
-      }
+      } */}
     </MapContainer >
+    </div>
   );
 };
 

astro/src/styles/global.css

@@ -58,4 +58,9 @@
   body {
     @apply text-foreground;
   }
+}
+
+.black-dot {
+  background-color: black;
+  border-radius: 50%;
 }