updated icon sizes, zoom control position

pshanmukha · Jun 16, 2024 · 8e937a8 · 8e937a8
1 parent e489394
commit 8e937a8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/components/LocationSearch.tsx b/src/components/LocationSearch.tsx
@@ -69,7 +69,7 @@ const LocationSearch = ({ onPlaceClick, onError }: LocationSearchProps) => {
 
           {isLoading && (
             <div className="absolute inset-y-0 right-0 flex items-center px-2">
-              <CircularProgress size={20} />
+              <CircularProgress size={24} />
             </div>
           )}
 
@@ -80,7 +80,7 @@ const LocationSearch = ({ onPlaceClick, onError }: LocationSearchProps) => {
                 type="submit"
                 className="absolute inset-y-0 right-0 flex items-center px-2 text-gray-500 hover:text-gray-700"
               >
-                <RiSearchLine />
+                <RiSearchLine size={24} />
               </button>
             )}
 
@@ -93,7 +93,7 @@ const LocationSearch = ({ onPlaceClick, onError }: LocationSearchProps) => {
                 onClick={() => handleClear()}
                 className="absolute inset-y-0 right-0 flex items-center px-2 text-gray-500 hover:text-gray-700"
               >
-                <RiCloseLine />
+                <RiCloseLine size={24} />
               </button>
             )}
         </div>

diff --git a/src/components/Map.tsx b/src/components/Map.tsx
@@ -1,7 +1,7 @@
 import type { Place } from "../api/Place";
 import "leaflet/dist/leaflet.css";
 import L, { Map as LeafletMap } from "leaflet";
-import { MapContainer, TileLayer, Marker } from "react-leaflet";
+import { MapContainer, TileLayer, Marker, ZoomControl } from "react-leaflet";
 import { useEffect, useRef } from "react";
 //marker images
 import iconUrl from "leaflet/dist/images/marker-icon.png";
@@ -40,12 +40,14 @@ const Map = ({ place }: MapProps) => {
       zoom={12}
       scrollWheelZoom
       className="h-full"
+      zoomControl={false}
     >
       <TileLayer
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
       />
       {place && <Marker position={[place.latitude, place.longitude]} />}
+      <ZoomControl position="bottomright" />
     </MapContainer>
   );
 };