{"id":31696681,"url":"https://github.com/bjornleonhenry/svg-map-display","last_synced_at":"2026-05-02T20:39:56.214Z","repository":{"id":318236938,"uuid":"1070246253","full_name":"bjornleonhenry/svg-map-display","owner":"bjornleonhenry","description":"An interactive SVG map display application with theme switching, animated map elements, and responsive design for visualizing geographical data and locations","archived":false,"fork":false,"pushed_at":"2025-10-05T23:53:01.000Z","size":297,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-23T18:44:54.273Z","etag":null,"topics":["interactive","map-visualization","nextjs","svg","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://svg-map-display.bjornleonhenry.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bjornleonhenry.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-05T15:05:15.000Z","updated_at":"2025-10-05T23:53:04.000Z","dependencies_parsed_at":"2025-10-06T01:19:33.436Z","dependency_job_id":"9d74b498-2ecf-489e-a2d6-0078d6b99959","html_url":"https://github.com/bjornleonhenry/svg-map-display","commit_stats":null,"previous_names":["bjornleonhenry/svg-map-display"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bjornleonhenry/svg-map-display","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjornleonhenry%2Fsvg-map-display","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjornleonhenry%2Fsvg-map-display/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjornleonhenry%2Fsvg-map-display/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjornleonhenry%2Fsvg-map-display/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bjornleonhenry","download_url":"https://codeload.github.com/bjornleonhenry/svg-map-display/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjornleonhenry%2Fsvg-map-display/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32549386,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T19:18:06.202Z","status":"ssl_error","status_checked_at":"2026-05-02T19:16:21.335Z","response_time":132,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["interactive","map-visualization","nextjs","svg","tailwindcss","typescript"],"created_at":"2025-10-08T17:12:45.701Z","updated_at":"2026-05-02T20:39:51.192Z","avatar_url":"https://github.com/bjornleonhenry.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SVG Map Display\n\nAn interactive SVG map display application with theme switching, animated map elements, and responsive design for visualizing geographical data and locations.\n\n## Overview\n\nSVG Map Display is a modern web application that showcases interactive SVG map visualization with dynamic theme switching and animated elements. Built with Next.js and TypeScript, it provides a clean and responsive interface for displaying geographical data through scalable vector graphics.\n\n## Features\n\n- **Interactive SVG Maps**: Dynamic loading and display of SVG map files\n- **Theme Switching**: Seamless switching between light and dark themes\n- **Animated Elements**: Glimmer animations on map elements for visual appeal\n- **Responsive Design**: Fully responsive layout that works on all devices\n- **System Theme Detection**: Automatic detection of user's system theme preference\n- **Local Storage Persistence**: Theme preferences saved across browser sessions\n- **Loading States**: Smooth loading animations and placeholder states\n- **Accessibility**: Proper ARIA labels and keyboard navigation support\n\n## Technology Stack\n\n- **Next.js 14**: React framework with App Router\n- **React 18**: Latest React features and performance improvements\n- **TypeScript**: Full type safety and better development experience\n- **Tailwind CSS v4**: Utility-first CSS framework for rapid styling\n- **shadcn/ui**: High-quality, accessible UI components\n- **Radix UI**: Unstyled, accessible UI primitives\n- **Geist Fonts**: Modern typography with Geist Sans and Geist Mono\n- **Vercel Analytics**: Performance monitoring and analytics\n\n## Installation\n\n### Prerequisites\n\n- Node.js 16 or higher\n- npm or yarn package manager\n\n### Setup\n\n1. Clone the repository:\n```bash\ngit clone https://github.com/bjornleonhenry/svg-map-display.git\ncd svg-map-display\n```\n\n2. Install dependencies:\n```bash\nnpm install\n```\n\n3. Run the development server:\n```bash\nnpm run dev\n```\n\n4. Open [http://localhost:3000](http://localhost:3000) in your browser.\n\n## Available Scripts\n\n- `npm run dev` - Start development server\n- `npm run build` - Build for production\n- `npm run start` - Start production server\n- `npm run lint` - Run ESLint\n\n## Project Structure\n\n```\nsvg-map-display/\n├── app/                    # Next.js app directory\n│   ├── globals.css        # Global styles\n│   ├── layout.tsx         # Root layout component\n│   └── page.tsx           # Main map display page\n├── components/            # Reusable UI components\n│   ├── theme-provider.tsx # Theme context provider\n│   └── ui/               # shadcn/ui components\n├── hooks/                # Custom React hooks\n├── lib/                  # Utility functions\n├── public/               # Static assets\n│   ├── map.svg          # Light theme map\n│   ├── map-dark.svg     # Dark theme map\n│   └── icons/           # Theme toggle icons\n└── styles/              # Additional styles\n```\n\n## Features Overview\n\n### Interactive Map Display\n- Dynamic SVG loading based on current theme\n- Responsive map sizing with proper aspect ratios\n- Smooth transitions between theme changes\n\n### Theme Management\n- Light and dark theme support\n- System preference detection\n- Manual theme toggle with persistent storage\n- Smooth theme transitions\n\n### Animation System\n- Glimmer animations on map elements\n- Random timing for natural animation effects\n- CSS keyframe animations for performance\n- Configurable animation parameters\n\n### User Experience\n- Loading states with skeleton placeholders\n- Responsive design for all screen sizes\n- Accessibility features and keyboard navigation\n- Performance optimized with proper cleanup\n\n## Customization\n\n### Adding New Maps\n1. Add SVG files to the `public/` directory\n2. Update the theme-based loading logic in `app/page.tsx`\n3. Ensure SVG files are optimized for web display\n\n### Modifying Animations\n1. Edit the animation keyframes in the `useEffect` hook\n2. Adjust timing parameters for different effects\n3. Add new animation types as needed\n\n### Styling\nThe project uses Tailwind CSS v4 with a custom theme system. Key styling features:\n- Dark mode support with CSS variables\n- Responsive breakpoints\n- Custom animation utilities\n- Accessible color schemes\n\n## Environment Variables\n\nCreate a `.env.local` file for environment-specific configuration:\n\n```env\n# Analytics (optional)\nNEXT_PUBLIC_VERCEL_ANALYTICS_ID=your_analytics_id\n```\n\n## Performance Features\n\n- **Static Generation**: Pre-rendered pages for optimal performance\n- **Image Optimization**: Next.js automatic SVG optimization\n- **Code Splitting**: Automatic code splitting for faster loading\n- **Theme Persistence**: Efficient local storage management\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## Preview\n\n![SVG Map Display Preview](./public/svg-map-display.png)\n\n## Live Demo\n\nVisit the live demo: [https://svg-map-display.bjornleonhenry.com](https://svg-map-display.bjornleonhenry.com)\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is licensed under the MIT License.\n\n## Author\n\n**Bjorn Leon Henry**\n- GitHub: [@bjornleonhenry](https://github.com/bjornleonhenry)\n- Website: [https://bjornleonhenry.com](https://bjornleonhenry.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbjornleonhenry%2Fsvg-map-display","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbjornleonhenry%2Fsvg-map-display","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbjornleonhenry%2Fsvg-map-display/lists"}