Interactive Map Interface for Uzhhorod and OTG Regions

I'll design a modern, accessible interactive map interface for Uzhhorod and surrounding OTG regions. This design will focus on usability, accessibility, and responsive design principles.

Map Interface Design

Design System

I've created a comprehensive design system for the interactive map interface with the following key components:

Color Palette

• Primary Color: Emerald green (#10b981) - Represents nature and the geographical focus
• Secondary Colors: Earth tones including soft browns, light blues, and muted greens
• Neutral Colors: Clean whites and grays for the interface background
• Accent Colors: Used sparingly for highlighting important information

Typography

• Font Family: Inter - A modern, highly legible sans-serif font

• Hierarchy:

  • Page titles: 20px, bold
  • Section headers: 16px, semibold
  • Body text: 14px, regular
  • Small text/captions: 12px, regular

Components

1. Interactive Map

   • Responsive map container with zoom/pan controls
   • Region highlighting on hover
   • Click interaction to display region information

2. Information Panel

   • Tabbed interface for different categories of information
   • Accordion sections for organized content display
   • Quick facts card for immediate information

3. Navigation Elements

   • Search functionality with autocomplete
   • Region list for direct selection
   • Breadcrumb navigation

4. Mobile Adaptations

   • Bottom sheet for region information on mobile
   • Collapsible sidebar for navigation
   • Touch-optimized controls

5. Accessibility Features

   • High contrast mode toggle
   • Screen reader compatible elements
   • Keyboard navigation support

Wireframes

Desktop View

The desktop view features a three-column layout:

• Left sidebar with region list and search
• Center area with the interactive map
• Right panel (conditionally shown) with detailed region information

Mobile View

The mobile view adapts to smaller screens:

• Full-width map
• Bottom sheet for region information
• Hamburger menu for navigation
• Floating action buttons for map controls

Implementation Details

The interface is built using:

• Next.js for the application framework
• Leaflet.js for the interactive map functionality
• shadcn/ui components for the UI elements
• Tailwind CSS for styling
• Responsive design principles for mobile adaptation

The design prioritizes:

1. Usability - Clear information hierarchy and intuitive navigation
2. Accessibility - Following WCAG guidelines for inclusive design
3. Performance - Optimized for smooth interactions even on mobile devices
4. Aesthetics - Clean, modern visual design that enhances the user experience

User Flow

1. User lands on the map interface

2. They can:

   • Browse the map and click on regions
   • Search for specific regions
   • Select a region from the list
3. Upon selecting a region, detailed information appears
4. User can filter/explore different categories of information
5. User can easily navigate between regions or return to the map view

This design creates an engaging, educational experience that makes geographical and regional information accessible to all users.

Fixing the "window is not defined" Error

The error you're encountering is a common issue with Next.js applications that use browser-specific APIs (like window) during server-side rendering. Since Leaflet is a client-side library that depends on the browser's window object, we need to make sure it only loads on the client side.

What Was Fixed

The error "window is not defined" occurred because the code was trying to access browser-specific APIs (like window) during server-side rendering. Here's what I fixed:

1. Created a Dynamic Map Component:

   • Used Next.js's dynamic import with ssr: false to ensure Leaflet only loads on the client side
   • Added a placeholder component to show while the map is loading

2. Separated Map Logic:

   • Split the map functionality into separate components
   • Made sure all browser-specific code only runs after checking if we're on the client

3. Fixed the useMediaQuery Hook:

   • Added a mounted state to prevent accessing window.matchMedia during server rendering
   • Returns a default value (false) when not mounted yet

4. Added Safety Checks:

   • Added checks like typeof document !== 'undefined' before accessing browser APIs
   • Used useEffect hooks to ensure code only runs after component mounting

These changes ensure that all browser-specific code only runs on the client side, which resolves the "window is not defined" error during server-side rendering.