From da11a2840ae8f73085bca72afe761c2be672e722 Mon Sep 17 00:00:00 2001
From: Seth Kaplan <sethkaplan73@gmail.com>
Date: Mon, 3 Jun 2024 20:32:30 -0400
Subject: [PATCH] set zoom, add padding to title (#4)

---
 src/App.tsx              |  8 +++++---
 src/MapLayers.tsx        | 13 +++++++++++--
 src/components/Title.tsx |  2 +-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 963a068..2ef244b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { MapContainer, TileLayer } from "react-leaflet";
 import "./App.css";
 // @ts-expect-error untyped
@@ -24,6 +24,7 @@ function App() {
   const { data: shapeData } = useShapeData(tripData);
   const { data: routeData } = useRouteData(busData);
   const { data: stopData } = useStopData(busData);
+  const [zoom, setZoom] = useState(14);
 
   const { status, routeId, stopName } = getInfo(busData, routeData, stopData);
 
@@ -65,13 +66,13 @@ function App() {
       <Title />
       <div className="flex h-screen flex-col bg-stone-100">
         <MapContainer
-          zoom={13}
+          zoom={zoom}
           center={center}
           scrollWheelZoom={false}
           style={{ height: "100%", width: "100%" }}
           dragging={true}
         >
-          <ChangeView center={center} zoom={13} />
+          <ChangeView center={center} zoom={zoom} />
           <Element name="center">
             <TileLayer
               attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -79,6 +80,7 @@ function App() {
             />
             {busStatus === "success" && busData.data && (
               <MapLayers
+                setZoom={setZoom}
                 formattedPolyline={formattedPolyline}
                 position={[
                   busData?.data.attributes.latitude,
diff --git a/src/MapLayers.tsx b/src/MapLayers.tsx
index e8a0598..b92f4c6 100644
--- a/src/MapLayers.tsx
+++ b/src/MapLayers.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { LatLngTuple } from "leaflet";
 import { useEffect } from "react";
-import { useMap } from "react-leaflet";
+import { useMap, useMapEvent } from "react-leaflet";
 import { Hotline } from "react-leaflet-hotline";
 // @ts-expect-error untyped
 import { MarkerLayer, Marker } from "react-leaflet-marker";
@@ -9,11 +9,20 @@ import { MarkerLayer, Marker } from "react-leaflet-marker";
 interface MapLayersProps {
   formattedPolyline: [{ lat: string; lng: string; value: number }];
   position: LatLngTuple;
+  setZoom: (zoom: number) => void;
 }
 
-export const MapLayers = ({ formattedPolyline, position }: MapLayersProps) => {
+export const MapLayers = ({
+  formattedPolyline,
+  position,
+  setZoom,
+}: MapLayersProps) => {
   const map = useMap();
 
+  useMapEvent("zoom", (event) => {
+    setZoom(event.target.getZoom());
+  });
+
   useEffect(() => {
     // Create a custom pane with a high zIndex
     const pane = map.createPane("markerPane");
diff --git a/src/components/Title.tsx b/src/components/Title.tsx
index 8fbd6d9..d7f0c58 100644
--- a/src/components/Title.tsx
+++ b/src/components/Title.tsx
@@ -6,7 +6,7 @@ import { Link } from "react-scroll";
 
 export const Title = () => {
   return (
-    <div className=" flex h-screen w-full flex-col items-center justify-center gap-4 bg-stone-100 bg-gradient">
+    <div className="flex h-screen w-full flex-col items-center justify-center gap-4 bg-stone-100 bg-gradient p-4">
       <h1 className="text-center text-3xl font-bold uppercase italic text-grey-100 sm:text-5xl lg:text-6xl">
         Mbta <span className="gradient-text drop-shadow-2xl">pride</span> bus
         tracker