https://github.com/sunthecoder/mapv2
https://github.com/sunthecoder/mapv2
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/sunthecoder/mapv2
- Owner: SunTheCoder
- Created: 2025-01-30T20:08:03.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-17T20:03:46.000Z (about 1 year ago)
- Last Synced: 2025-02-17T20:37:48.294Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://mapv2-six.vercel.app
- Size: 436 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Interactive Geographic Data Visualization
An interactive web application for visualizing and exploring geographic data across the United States, including states, regions, tribal nations, and various demographic indicators.
## Features
### Interactive Map
- Dynamic map visualization using Mapbox GL JS
- Smooth animations and transitions between locations
- Multiple data layers that can be toggled on/off:
- State Boundaries
- Regional Divisions
- Tribal Nations
- Distressed Areas
- EPA Disadvantaged Communities
- Socially Disadvantaged Areas
### Advanced Search Functionality
- Real-time search across multiple geographic entities:
- States (including Pacific territories)
- Counties
- Tribal Nations
- Regions
- Smart zoom behavior:
- Automatically enables relevant layers when searching
- Smooth transitions between locations
- Intelligent viewport management for distant territories
### User Interface
- Clean, intuitive layer controls
- Responsive search box with autocomplete
- Interactive popups with detailed information
- Mobile-friendly design
### Data Integration
- Multiple data sources combined into a single view
- Vector tile optimization for performance
- Real-time data querying and filtering
### Technical Features
- Dynamic layer management
- Optimized data loading
- Smooth animations and transitions
- Error handling and fallbacks
- Responsive design
## Technical Stack
- React
- Next.js
- Tailwind CSS
- Framer Motion
- Mapbox GL JS
- Vector Tiles
- Supabase for data management
## Getting Started
1. Clone the repository
2. Install dependencies: `npm install`
3. Set up environment variables:
```
NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=your_mapbox_token
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_key
```
4. Run the development server: `npm run dev`
## Usage
### Layer Management
Use the checkboxes in the top-right corner to toggle different data layers:
- State Boundaries: View state outlines
- Regions: See regional divisions
- Distressed Areas: View economically distressed regions
- Tribal Nations: Explore tribal territories
- EPA Disadvantaged Communities: View EPA-designated areas
### Search
1. Click the search box in the top-left corner
2. Type a location name (state, county, or tribal nation)
3. Select from the dropdown of matching results
4. The map will automatically:
- Enable relevant layers
- Zoom to the selected location
- Display detailed information
## License
This project is licensed under the MIT License - see the LICENSE file for details.