A React-based interactive map application that allows users to select and color-code different regions on an SVG map. Perfect for planning, visualization, and data presentation.
- Interactive Map Selection: Click on map tiles, gates, and shrines to select and color them
- Multi-Element Support: Select and color different types of map elements (tiles, gates, shrines)
- Multi-Color Support: Choose from 12 different colors for categorization
- Color Labeling: Add custom labels to colors for better organization
- Zoom & Pan: Navigate the map with mouse wheel zoom and click-drag panning
- Export Options: Save your selections as PNG or JPG images
- Data Management: Save, load, copy, and paste selection data as JSON
- Real-time Statistics: See color usage counts in the toolbar
- Responsive Design: Works on desktop and mobile devices
- Simplified Architecture: Streamlined to use a single, optimized SVG map implementation
- Reduced Bundle Size: Removed unnecessary dependencies for faster loading
- Enhanced Element Support: Added support for gates and shrines in addition to tiles
- Improved Labeling: Custom color labels for better organization and sharing
Visit the live application: https://arcmap.netlify.app/
- Node.js (version 16 or higher)
- npm or yarn package manager
- Clone the repository:
git clone <repository-url>
cd web-map- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production build locallynpm run lint- Run ESLint for code quality
- Choose a Color: Click on any color circle in the top toolbar to select it
- Select Map Elements: Click on any tile, gate, or shrine on the map to color it with your selected color
- Toggle Selection: Click on an already-colored element with the same color to deselect it
- Change Colors: Select a different color and click on elements to change their color
- Add Labels: Click on a color's label area to add custom text descriptions
- Zoom: Use Shift + mouse wheel to zoom in/out (centers on mouse cursor)
- Pan: Click and drag to move around the map
- Reset Zoom: Click the "Reset Zoom" button to return to the original view
- Color Counts: Numbers below each color show how many elements are using that color
- Color Labels: Click on the label area below colors to add descriptive text
- Reset All: Click the "Reset All" button to clear all selections
- Save PNG: Export your map as a PNG image (supports transparency)
- Save JPG: Export your map as a JPG image (solid background)
- Save Data: Download your selections as a JSON file for later use
- Load Data: Upload a previously saved JSON file to restore selections
- Copy JSON Data: Copy selection data to clipboard for sharing
- Paste JSON Data: Import selection data from clipboard
- Image Sharing: Use the PNG/JPG export to share visual representations
- Data Sharing: Use "Copy JSON Data" to share the raw selection data
- Collaborative Editing: Save and share JSON files for team collaboration
- React 19 - Modern UI framework with latest features
- TypeScript - Type safety and better development experience
- Vite - Fast build tool and development server
- html2canvas - High-quality image export functionality
- Pure SVG Implementation - Custom-built interactive map (no external map libraries)
src/
├── App.tsx # Application router and main structure
├── MapView.tsx # Map view wrapper component
├── MapSelector.tsx # Main interactive map component
├── SvgMap.tsx # Programmatic SVG map renderer
├── assets/ # Static assets (minimal usage)
├── App.css # Component-specific styles
└── index.css # Global styles and CSS variables
Note: For detailed technical documentation, see DEVELOPMENT.md
Selection data is stored in JSON format:
{
"tiles": {
"1": "#a0e0a0",
"2": "#f0b0b0",
"15": "#b0b0f0"
},
"gates": {
"5": "#e0a0a0"
},
"shrines": {
"12": "#a0a0e0"
},
"labels": {
"#a0e0a0": "Forest Areas",
"#f0b0b0": "Desert Regions"
},
"timestamp": "2025-01-15T10:30:00.000Z",
"totalTiles": 5,
"version": "1.0"
}Want to customize the map for your needs? Here are the most common modifications:
Adding New Colors: See DEVELOPMENT.md for instructions on extending the color palette.
Using Your Own Map: The application can be adapted to work with any SVG-based map. See DEVELOPMENT.md for technical details.
Styling Changes: Modify colors, fonts, and layout through the CSS files in the src/ directory.
- Map not loading: Ensure all dependencies are installed with
npm install - Export not working: Check browser permissions for file downloads
- Clipboard operations failing: Ensure you're using HTTPS or localhost
- Zoom feels off: Use Shift + scroll wheel for zoom (known issue: may appear slightly diagonal)
- Performance on large maps: Consider reducing zoom level or using fewer simultaneous selections
For technical troubleshooting and development issues, see DEVELOPMENT.md.
- Chrome/Edge: Full support
- Firefox: Full support
- Safari: Full support (clipboard operations require user interaction)
- Mobile browsers: Touch gestures supported for pan/zoom
This project is open source and available under the MIT License.
Contributions are welcome! This project follows standard open-source contribution practices.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
For detailed development setup, code standards, and architecture information, please see DEVELOPMENT.md.
- General Questions: Open an issue on the GitHub repository
- Bug Reports: Please include browser version and steps to reproduce
- Feature Requests: Describe your use case and proposed solution
- Technical Issues: Check DEVELOPMENT.md first, then open an issue