The Control Zoom component provides a Leaflet zoom control positioned at the bottom-right corner of the map.

Key features:

• Uses Leaflet’s built-in ZoomControl component from react-leaflet.
• Custom styles applied via controlZoom.css adapt the default zoom control to match the application’s theme.
• Positioned absolutely with a clean, modern design featuring rounded corners and subtle hover effects.
• Handles disabled button states gracefully with distinct styling.
• Included unit tests verify the component renders correctly with the expected position prop, using mocks to avoid real map rendering during tests.

Files includes:

• ControlZoom.tsx — the component rendering the zoom control.
• controlZoom.css — custom CSS for styling and positioning.
• ControlZoom.test.tsx — tests verifying rendering and prop correctness.