set zoom, add padding to title (#4)

transitmatters · Jun 4, 2024 · da11a28 · da11a28
1 parent 427c1b2
commit da11a28
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git 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,20 +66,21 @@ 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'
               url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
             />
             {busStatus === "success" && busData.data && (
               <MapLayers
+                setZoom={setZoom}
                 formattedPolyline={formattedPolyline}
                 position={[
                   busData?.data.attributes.latitude,

diff --git a/src/MapLayers.tsx b/src/MapLayers.tsx
@@ -1,19 +1,28 @@
 /* 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";
 
 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
@@ -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