Professional Map Poster Generator
Create beautiful, custom map posters with our intuitive web-based editor.
Features โข Quick Start โข Documentation โข Contributing
ArtMap Studio is a commercial web application that combines Mapiful's smooth UX with Maptoposter's artistic visual algorithms. Users can create stunning map posters featuring:
- ๐บ๏ธ Any Location Worldwide - Search and visualize any place on Earth
- ๐จ 5 Artistic Themes - From minimalist noir to vintage terrain
- ๐ผ๏ธ Frame Preview - 7 frame styles with 5 mat board options
- ๐ฑ Device Mockup - Preview on 8 different phone models
- โจ Theme Customization - Adjust colors, line width, and opacity
- ๐ณ Secure Payment - Integrated PayPal checkout
- ๐ฅ High-Quality Export - PNG, PDF, and SVG formats up to 600 DPI
- Global Search: Powered by Photon API (free, no key required)
- Smooth Navigation: Drag to pan, scroll to zoom
- 5 Themes: Noir, Light, Vintage, Dark, Terrain
- Immersive Text: Maptoposter-style text overlay with location details
- Real-time Preview: See changes instantly as you edit
- 7 Frame Styles:
- Natural Oak, Black Wood, White Wood
- Minimal Black, Minimal White
- Gold, Silver
- 5 Mat Colors: Cream, Charcoal, White, Off-White, No Mat
- Realistic Shadows: 3D effect with accurate textures
- Responsive: Automatically adapts to poster content
- 8 Device Models:
- iPhone 15 Pro, iPhone 15, iPhone 14 Pro, iPhone SE
- Samsung S24 Ultra, Samsung S24
- Pixel 8 Pro, Generic Phone
- Accurate Details: Dynamic Island, notches, rounded screens
- Multiple Colors: 2-4 color options per device
- Real Dimensions: True-to-life screen ratios
- Color Controls: Background, water, and road colors
- Line Width: Adjust from 0.5 to 3.0
- Opacity: Control transparency from 0.1 to 1.0
- Preset Palettes: Quick color selections
- Real-time Preview: Instant visual feedback
- 3 Products:
- Standard ($9.99): 300 DPI, PNG & PDF
- Pro ($19.99): 600 DPI, PNG, PDF & SVG, commercial license
- Monthly ($14.99): Unlimited downloads, all Pro features
- PayPal Integration: Secure checkout with PayPal
- Multi-Currency: USD, EUR, GBP, JPY, CNY
- Extensible Architecture: Ready for Stripe, Wise integration
| Format | Standard | Pro | Monthly |
|---|---|---|---|
| PNG | 300 DPI โ | 600 DPI โ | 600 DPI โ |
| 300 DPI โ | 600 DPI โ | 600 DPI โ | |
| SVG | โ | Hybrid Vector โ | Hybrid Vector โ |
- High Resolution: Up to 600 DPI for professional printing
- Multiple Formats: PNG, PDF, and SVG
- Auto Download: Files download immediately after export
- Progress Tracking: Real-time export progress indicator
- Node.js: >= 18.0.0
- npm: >= 9.0.0
# Clone the repository
git clone https://github.com/yourusername/artmap-studio.git
cd artmap-studio
# Install dependencies
npm install
# Set up environment variables
cp .env.example .envEdit .env file with your API keys:
# Stadia Maps API Key (get free at https://client.stadiamaps.com/)
VITE_STADIA_API_KEY=your_stadia_api_key_here
# PayPal Client ID (get at https://developer.paypal.com/dashboard/applications/)
VITE_PAYPAL_CLIENT_ID=your_paypal_client_id_here
# App configuration
VITE_APP_NAME=ArtMap Studio
VITE_APP_URL=http://localhost:5173# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewVisit http://localhost:5173 to see the application.
- Frontend: React 18.2+ with TypeScript 5.0+
- Build Tool: Vite 5.0+
- State Management: Zustand 4.5+
- Styling: Tailwind CSS 3.4+ + Emotion
- Maps: MapLibre GL JS 4.1+ (free Mapbox alternative)
- Map Tiles: Stadia Maps (200K free requests/month)
- Export: html2canvas + jsPDF
artmap-studio/
โโโ src/
โ โโโ components/ # React components
โ โ โโโ map/ # Map-related components
โ โ โโโ preview/ # Frame and phone preview
โ โ โโโ theme/ # Theme customization
โ โ โโโ payment/ # Payment modal and buttons
โ โ โโโ export/ # Export dialog
โ โโโ config/ # Configuration files
โ โโโ services/ # Business logic
โ โโโ store/ # Zustand stores
โ โโโ types/ # TypeScript definitions
โ โโโ pages/ # Page components
โโโ docs/ # Documentation
โโโ public/ # Static assets
- Singleton Pattern: Service layer (MapService, ThemeService, PaymentService, ExportService)
- Repository Pattern: State management with Zustand
- Strategy Pattern: Multi-provider payment system
- Observer Pattern: State subscriptions and reactivity
- ๐ ๅ่ฝๅฎ็ฐ่ฟๅบฆ - Feature implementation progress
- ๐ณ ๆฏไป้ๆๆๅ - Payment integration guide
- ๐ฅ ๅฏผๅบๅ่ฝ่ฏดๆ - Export feature documentation
- ๐บ๏ธ ไธป้ข็ณป็ป - Theme system documentation (if exists)
# Run unit tests
npm run test
# Run tests with UI
npm run test:ui
# Run E2E tests
npm run test:e2e
# Type checking
npm run type-check
# Linting
npm run lint
npm run lint:fix- Map editor with search and zoom
- 2D frame preview (7 styles)
- 2D phone mockup (8 devices)
- Theme customization
- Payment architecture
- PayPal integration
- PNG/PDF export (300/600 DPI)
- SVG export (hybrid vector)
- Unit tests
- Code review
- Performance optimization
- 3D frame preview
- Additional themes
- Stripe payment integration
- User account system
- Order history
- Coupon codes
- Cloud-based rendering
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Use TypeScript for all new code
- Follow ESLint rules
- Format code with Prettier
- Write meaningful commit messages
- Add tests for new features
This project is licensed under the MIT License - see the LICENSE file for details.
- MapLibre GL - Open-source map rendering engine
- Stadia Maps - Free vector map tiles
- Photon API - Open geocoding service
- Maptoposter - Inspiration for artistic algorithms
- Mapiful - UX design inspiration
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Email: support@artmapstudio.com
Built with โค๏ธ by the ArtMap Studio team