Mapsprint Studio

Next-Generation Global Vector Map & Print Studio — Design, customize, and generate ultra-high-resolution, art-quality city map posters with real-time WebGL rendering, 70 curated color palettes, modern live 2D color picker, 8 designer poster templates, physical print order placement, cross-device real-time cloud orders sync, interactive route drawing, photo markers, security watermarking, full admin portal, and true native 300 DPI (4400×4840 px) print exports.

Built with precision by Agnific.

📑 Table of Contents

• ✨ Features at a Glance
• 🖼️ Ultra-HD 300 DPI Gallery & Theme Showcase
• 🎨 Studio Capabilities
  • 1. Real-Time 60 FPS WebGL Vector Engine
  • 2. Ambient Out-of-Focus Background Bleed
  • 3. High-Density Vector Linework & Zero Detail Loss
  • 4. Modern Live 2D Color Picker
  • 5. 2-Row Dark Bento Tab Dock
  • 6. 70 Curated Studio Themes (Chromatic Spectrum)
  • 7. 8 Designer Poster Templates
  • 8. Custom Markers, Photo Badges & Travel Routes
  • 9. Physical Print Ordering & WhatsApp Dispatch
  • 10. Cross-Device Real-Time Cloud Orders Sync
  • 11. Security Copyright Watermark Engine
  • 12. Full Admin Dashboard (/admin)
  • 13. True Native 300 DPI Vector Print Engine (4400×4840 px)
• 📐 Aspect Ratio & Print Sizing
• 🏗️ Architecture & Technology Stack
• 📂 Project Structure
• 🚀 Quick Start Guide
• 🌐 Deployment Guide
• 📄 License & Attribution

✨ Features at a Glance

• 🌐 Universal Global Coverage: Search and frame any city, district, landmark, or coordinates on Earth via OpenStreetMap & Nominatim geocoding.
• ⚡ Real-Time 60 FPS WebGL: Smooth pan, zoom, pitch, and rotate with immediate visual feedback and zero raster latency.
• 🖼️ Ambient Background Bleed: Soft out-of-focus live mirror that extends the active city map across the entire studio viewport while keeping the center poster in razor-sharp focus.
• 🎯 Detail Retention Across 0–150 km: Full residential street grids, alleys, canals, and building outlines remain loaded even when zoomed out to broad regional views.
• 🎨 Modern Live 2D Color Picker: Smooth 2D Saturation/Brightness canvas, 360° rainbow hue bar, live screen eyedropper pipette, hex input, and curated luxury swatches with 60 FPS live canvas shader preview.
• 🍱 2-Row Dark Bento Dock: Instant 1-click access to all 8 studio control panels with zero horizontal scrollbars.
• 🎨 70 Curated Color Palettes: Sorted chromatically across the color spectrum (Monochrome blacks, luxury golds, warm terracottas, volcanic crimsons, sunset ambers, neon synthwaves, emerald greens, glacier teals, ocean cobalts, amethyst violets, warm sepia parchments, and gallery whites).
• 🏛️ 8 Designer Poster Templates: Classic Poster, Modern Minimal, Museum Card (Polaroid), Split Top & Bottom, Floating Card Box, Geo Pill Badge, Header Banner, and Circular Portal.
• 📍 Pins, Photo Badges & Routes: Drop custom vector pins (Classic Pin, Minimal Dot, Star, Heart, Flag, Home), upload custom circular photo markers with custom border colors, or draw interactive travel routes.
• 📦 Physical Print Ordering: Order physical prints (A5, A4, A3, A2, or Custom Dimensions) with direct 1-click WhatsApp order dispatch to +92 312 1472153.
• ☁️ Cross-Device Cloud Orders Sync: Real-time multi-browser cloud synchronization supporting Google Firebase Realtime Database (100% free) & built-in cloud relay.
• 🛡️ Security Watermarking: 35–45 tiled diagonal Agnific logo watermarks (65% visibility) across public exports; automatically bypassed for authenticated Admins.
• 🔐 Admin Portal (/admin): Full login dashboard with order tracking, status workflow, project audit logs, JSON inspectors, and 1-click "Load & Print in Studio".
• 🖨️ True Native 300 DPI Export (4400×4840 px): High-DPI offscreen vector rendering pipeline producing lossless PNG, print-ready PDF, and layered SVG outputs with zero tile clipping.
• 🏷️ Agnific Studio Branding: Subtle "Built by Agnific" watermark on posters and clean glassmorphic footer linking to agnific.com.

🎨 Studio Capabilities

1. Real-Time 60 FPS WebGL Vector Engine

Powered by MapLibre GL JS and global OpenFreeMap / OpenMapTiles vector pyramids. Renders millions of raw line vertices, building footprints, and water bodies directly on the GPU at 60 frames per second without server round-trips.

2. Ambient Out-of-Focus Background Bleed

The viewport features a live, synchronized canvas mirror that reflects the active map behind the poster frame with an ambient lens blur (blur(16px) brightness(0.62) saturate(1.2)). As you pan or rotate the map, the background moves in real-time, creating a museum-grade depth-of-field experience.

3. High-Density Vector Linework & Zero Detail Loss

Unlike standard vector viewers that strip away minor streets at low zooms, MapsPrint Studio 2.0 features boosted stroke-width interpolation curves and a calibrated logarithmic zoom engine. Whether framing a 1 km neighborhood or a 150 km metropolitan region, all residential streets, alleys, canals, and building outlines stay rendered with crisp clarity.

4. Modern Live 2D Color Picker

Equipped with a custom Dark Bento live color picker:

• 2D Saturation & Brightness Drag Area: Drag to smoothly blend shades in real-time.
• 360° Rainbow Hue Bar: Scrub through the full spectrum.
• Screen Eyedropper API: Pick any exact pixel from your screen with 1 click (window.EyeDropper).
• Direct Hex Input & Luxury Presets: Fast copy/paste and 16 calibrated luxury map tones.
• Integrated across Theme layer overrides, Typography title colors, Marker pins, and Travel routes.

5. 2-Row Dark Bento Tab Dock

The studio dock organizes editing categories into a sleek 4-column $\times$ 2-row Bento grid:

• Row 1: [Location] [Theme] [Layout] [Text]
• Row 2: [Layers] [Markers] [Routes] [Camera] All 8 panels are immediately accessible with zero horizontal scrolling.

6. 70 Curated Studio Themes (Chromatic Spectrum)

Organized in ascending chromatic order across the entire visible spectrum:

1. Monochrome, Titanium & Dark Slate (1–7): Noir Minimalist, Smoky Onyx & Pearl, Monochrome Graphite, Midnight Titanium, Matte Gunmetal Slate, Architectural Slate, Carbon Fiber Dark
2. Royal Gold, Bronze & Champagne (8–15): Obsidian & Gold, Midnight Sapphire Gold, Monaco Supercar Black, Espresso & Champagne, Art Deco Gilded, Versailles 24k Gold, Dubai Skyline Gold, Imperial Dynasty Gold
3. Warm Terracotta, Earth & Adobe Clay (16–22): Warm Terracotta, Moroccan Clay & Rust, Sedona Red Rock, Tuscan Burnt Sienna, Andalusian Adobe Clay, Copper Sunset, Cuban Tobacco & Ochre
4. Red, Crimson, Burgundy & Lava (23–29): Solar Magma & Lava, Bavarian Dark Cherry, Bordeaux & Rose Gold, Venetian Crimson & Gold, Crimson Velvet, Ruby & Obsidian, Scarlet Cyberpunk
5. Sunset Amber, Autumn & Spice (30–34): Autumn Maple & Amber, Marrakech Spice Amber, Copper Canyon Rich, Sahara Twilight, Valencia Tangerine
6. Synthwave, Neon & Electric Gold (35–38): Tokyo Cyberpunk Neon, Retro Synthwave 80s, Electric Laser Yellow, Solar Flare Gold
7. Emerald, Jade, Clover & Pine Green (39–46): Pakistan Emerald, Irish Clover & Gold, Nordic Moss & Sage, Nordic Pine & Spruce, Matrix Phosphor Green, Amazon Rainforest, Kyoto Bamboo & Jade, Scottish Highlands
8. Teal, Cyan & Glacier Lagoon (47–52): Alpine Frost & Slate, Nordic Fjord & Ice, Glacial Ice Frost, Maldives Turquoise, Bermuda Lagoon Teal, Miami Ocean Teal
9. Navy, Azure, Cobalt & Deep Ocean (53–59): Santorini Aegean Cobalt, Capri Mediterranean Azure, Cambridge Blue & Slate, Blueprint Drafting, Pacific Midnight Navy, Mariana Trench Abyss, Oxford Royal Navy
10. Purple, Violet, Amethyst & Plum (60–63): Kyoto Night Sakura, Burgundy Plum & Violet, Amethyst Geode, Midnight Lavender
11. Light Sand, Linen, Washi & Vintage (64–68): Kyoto Washi Paper, Vintage Parchment, Desert Dunes & Sand, Minimalist Sandstone, Venetian Sepia & Umber
12. Pure White & Gallery Light (69–70): Gallery Minimal Light, Scandinavian Snow White

7. 8 Designer Poster Templates

1. Classic Poster — Symmetrical bottom title, country subtitle, geographic coordinates, and customizable bottom gradient fade.
2. Modern Minimal — Floating clean typography with an accent divider line.
3. Museum Card (Polaroid) — Solid bottom gallery card with crisp title metadata.
4. Split Top & Bottom — Upper title banner with lower coordinates badge.
5. Floating Card Box — Elevated frosted glassmorphic card container over the map.
6. Geo Pill Badge — Centered pill badge with latitude/longitude.
7. Header Banner — Top typography banner with soft upper gradient fade.
8. Circular Portal — Vignetted round lens portal with matte border framing.

8. Custom Markers, Photo Badges & Travel Routes

• Vector Pins: Classic Map Pin, Pulsing Ring, Heart, Golden Star, Flag, and Home.
• Custom Photo Badges: Upload personal memories/portraits, automatically cropped into circular badges with custom borders and drop shadows.
• Interactive Routes: Draw multi-point travel tracks with customized line color, stroke width, and dashed line styling.
• All markers and route lines are rendered with razor-sharp vector projection on 300 DPI exports.

9. Physical Print Ordering & WhatsApp Dispatch

Users can place physical print orders directly through the studio:

• Select from A5, A4, A3, A2, or Custom Dimensions.
• Enter Name, Phone / WhatsApp, Email, and Delivery Notes.
• Instant Order ID generation with 1-click WhatsApp order confirmation sent directly to +92 312 1472153.

10. Cross-Device Real-Time Cloud Sync (Orders & Export Logs)

• Both customer print orders AND generation/export activity logs (PNG, PDF, SVG) automatically synchronize to the cloud in real-time.
• The Admin Dashboard features automated 8-second polling and manual "Sync Cloud" controls.
• Supports Google Firebase Realtime Database (100% free tier) via VITE_FIREBASE_DB_URL with 1 GB free storage (~500,000 orders/logs) and zero server cost.

11. Security Copyright Watermark Engine

• When public users export posters, a repeating diagonal grid of 35–45 rotated Agnific logos (copyright-agnific.png) at 65% visibility protects the artwork.
• When logged in as Admin, the watermark is 100% bypassed, producing crystal clean, museum-grade 300 DPI exports.

12. Full Admin Dashboard (/admin)

• Authentication: Configurable in .env (VITE_ADMIN_USERNAME & VITE_ADMIN_PASSWORD).
• Customer Orders Tab: Review customer details, phone numbers, requested sizes, notes, and update statuses (Pending, Contacted, Completed, Cancelled).
• 1-Click "Load & Print in Studio": Instantly restores the customer's exact map coordinates, theme, markers, and layout in 300 DPI ready for printing.
• Project Audit Logs: View snapshots of all generated/imported projects, copy JSON, or download .mapsprint files.

13. True Native 300 DPI Vector Print Engine (4400×4840 px)

When exporting, MapsPrint Studio spawns an active GPU offscreen MapLibre vector engine rendered directly at true print resolution:

• Screen (72 DPI): 2000 × 2200 px
• High (150 DPI): 3000 × 3300 px
• Ultra Print (300 DPI): 4400 × 4840 px (21.3 Megapixels)
• Computes exact Mercator scale-adjusted zoom offsets ($Z_{\text{export}} = Z_{\text{preview}} + \log_2(W_{\text{export}} / W_{\text{preview}})$), with verified isSourceLoaded('openmaptiles') and tile completion polling to guarantee 100% complete tile coverage with zero missing chunks.

🖼️ Ultra-HD 300 DPI Gallery & Theme Showcase

Sample art posters rendered directly at 300 DPI (4400 × 4840 px) with vector roads, water, building blocks, and custom typography:

| Poster Sample | City & Color Scheme | Poster Sample | City & Color Scheme | | :---: | :--- | :---: | :--- | | | Lahore, Pakistan
🌟 Agnific Signature Theme
Deep Indigo & Fiery Scarlet | | Tokyo, Japan
Tokyo Cyberpunk Neon
Synthwave Violet & Neon Cyan | | | London, United Kingdom
Santorini Cobalt / Blueprint
Aegean Navy & Pure White | | New York, USA
Noir Minimalist
OLED Black & Silver Vectors | | | Dubai, UAE
Dubai Skyline Gold
Desert Midnight & Radiant Gold | | Amsterdam, Netherlands
Nordic Fjord & Ice
Glacier Fjord & Ice Cyan | | | Barcelona, Spain
Andalusian Adobe Clay
Warm Clay & Mediterranean Blue | | Istanbul, Turkey
Autumn Maple & Amber
Bosphorus Rust & Gold | | | Karachi, Pakistan
Arabian Sea Midnight
Coastal Navy & Emerald | | Islamabad, Pakistan
Nordic Moss & Sage
Margalla Pine & Silver Sage | | | Miami, USA
Miami Ocean Teal
Pastel Lagoon & Coral | | Sydney, Australia
Pacific Deep Ocean
Harbour Abyss & Cobalt | | | Lahore, Pakistan
Warm Terracotta
Natural Clay & Ochre | | |

📐 Aspect Ratio & Print Sizing

| Preset | Ratio | Common Uses | Standard Resolution (300 DPI) | |---|---|---|---| | Poster 40"×44" | 10:11 | Large Format Print | 4400 × 4840 px | | ISO A-Series | 1:√2 | A1, A2, A3, A4, A5 Prints | 3422 × 4840 px | | Poster 18"×24" | 3:4 | Standard Wall Art | 3630 × 4840 px | | Poster 24"×36" | 2:3 | Gallery Art Poster | 3226 × 4840 px | | US Letter | 8.5:11 | Home & Office Print | 3740 × 4840 px | | US Tabloid | 11:17 | Small Poster / Ledger | 3132 × 4840 px | | Square Print | 1:1 | Instagram / Square Frame | 4400 × 4400 px | | Desktop Wallpaper | 16:9 | 4K Screens & Desktops | 4840 × 2722 px | | Story / Reel | 9:16 | Mobile Wallpaper / Social | 2722 × 4840 px | | Ultrawide | 21:9 | Panoramic Monitors | 4840 × 2074 px | | Twitter Header | 3:1 | Social Media Banner | 4840 × 1613 px | | Custom | W:H | Any User Defined Ratio | Dynamic Proportional 300 DPI Scaling |

🏗️ Architecture & Technology Stack

flowchart TD
    subgraph UI ["Studio Front-End (React 19 + TailwindCSS)"]
        DOCK[Studio Dock: 2-Row Bento Grid]
        COLOR_PICKER[Live 2D Color Picker Engine]
        VIEWPORT[PosterViewport]
        OVERLAY[PosterOverlay Layer]
        FOOTER[Glassmorphic Footer: Agnific Link]
        MODAL[Export & Order Dialog]
        ADMIN[Admin Portal: /admin]
    end

    subgraph MAP ["WebGL Vector Engine"]
        ML[MapLibre GL JS]
        STYLE[styleGenerator: Ultra-Dense Vector Styler]
        PROVIDER[OpenFreeMap / OpenMapTiles TileJSON]
    end

    subgraph CLOUD ["Cross-Device Cloud Sync"]
        FIREBASE[Firebase Realtime Database / Supabase / KV Relay]
    end

    subgraph EXPORT ["Offscreen Print Engine"]
        OFFSCREEN[renderNativeHighDpiMap: 300 DPI 4400x4840]
        MARKER_ROUTER[Marker & Route Vector Projector]
        WATERMARK[35-45 Tiled Logo Watermark: Non-Admin Only]
        CANVAS_COMPOSITOR[Canvas Compositor]
        PNG[Lossless PNG Exporter]
        PDF[Vector PDF Exporter]
        SVG[Clean Layered SVG Exporter]
    end

    DOCK -->|Live Adjustments| COLOR_PICKER
    COLOR_PICKER -->|Shader Updates| ML
    DOCK -->|Theme / Layout / Location Updates| VIEWPORT
    VIEWPORT --> ML
    STYLE --> ML
    PROVIDER --> STYLE
    VIEWPORT --> OVERLAY
    MODAL -->|Place Order| FIREBASE
    FIREBASE -->|Auto-Poll & Sync| ADMIN
    MODAL --> OFFSCREEN
    OFFSCREEN --> MARKER_ROUTER
    MARKER_ROUTER --> WATERMARK
    WATERMARK --> CANVAS_COMPOSITOR
    CANVAS_COMPOSITOR --> PNG & PDF & SVG

• Core Framework: React 19 + TypeScript + Vite 6
• Styling: TailwindCSS + Lucide React Icons
• State Management: Zustand with persistent storage
• Color Engine: Custom 2D HSV / RGB / HEX live ColorPicker with Eyedropper API
• Geospatial & Vector: MapLibre GL JS, OpenFreeMap, OpenMapTiles
• Cloud Backend: Google Firebase Realtime DB / Supabase REST API
• Export Compositing: Offscreen HTML5 Canvas (4400×4840 px), jsPDF, SVG DOM Serializer

📂 Project Structure

MapsPrint/
├── src/
│   ├── components/
│   │   ├── admin/              # Admin Portal & Authentication
│   │   │   ├── AdminDashboard.tsx  # Customer Orders & Project Audit Table
│   │   │   └── AdminLogin.tsx      # Dark Bento Login Screen
│   │   ├── common/             # Reusable UI Primitives
│   │   │   └── ColorPicker.tsx     # Modern 2D Live Color Picker
│   │   ├── dock/               # Studio Dock Control Panels
│   │   │   ├── StudioDock.tsx      # 2-Row Bento Tab Grid
│   │   │   ├── ThemePanel.tsx      # 70 Curated Themes & Colors
│   │   │   ├── LayoutPanel.tsx     # 8 Templates & Aspect Ratio Controls
│   │   │   ├── TypographyPanel.tsx # Font Family, Sizes & Alignment
│   │   │   ├── LayersPanel.tsx     # Vector Layer Visibility Toggles
│   │   │   ├── MarkersPanel.tsx    # Custom Pins & Photo Upload
│   │   │   ├── RoutesPanel.tsx     # Interactive Path Tracing
│   │   │   └── TransformPanel.tsx  # Locks, Pitch, Bearing & Reset
│   │   └── studio/             # Canvas & Viewport Components
│   │       ├── Header.tsx          # Top Bar & Admin Portal Link
│   │       ├── LocationSearch.tsx  # Geocoding Search & 0-150km Slider
│   │       ├── MapContainer.tsx    # Live WebGL MapLibre Canvas
│   │       ├── PosterViewport.tsx  # Full-Bleed 60fps Realtime Ambient Blur
│   │       ├── PosterOverlay.tsx   # Live Borders, Fades & Agnific Watermark
│   │       └── ExportModal.tsx     # Dual Mode: Digital Export & Place Order
│   ├── lib/
│   │   ├── api/
│   │   │   └── cloudOrderService.ts # Real-Time Firebase & Supabase Cloud Sync
│   │   ├── export/             # High-Resolution Export Pipelines
│   │   │   ├── offscreenRenderer.ts # 300 DPI Native Compositor & Watermarks
│   │   │   ├── pngExporter.ts
│   │   │   ├── pdfExporter.ts
│   │   │   └── svgExporter.ts
│   │   ├── map/                # Map Styling & Tile Provider Engine
│   │   │   ├── styleGenerator.ts   # Boosted Vector Line Widths & Shaders
│   │   │   └── tileProviders.ts    # OpenFreeMap TileJSON Discoverer
│   │   ├── marker/
│   │   │   └── pinTemplates.ts     # SVG Pin Icon & Marker Definitions
│   │   └── utils/
│   │       └── geoMath.ts          # Calibrated Zoom Curves & Proportions
│   ├── store/
│   │   ├── usePosterStore.ts   # Zustand Global Studio State
│   │   ├── useAdminStore.ts    # Admin Authentication & Orders State
│   │   └── defaultState.ts     # 70 Palettes, Presets & Initial State
│   ├── types/
│   │   └── poster.ts           # Full TypeScript Studio Interfaces
│   ├── App.tsx                 # Root Router, Workspace & Agnific Footer
│   └── main.tsx
├── public/
│   ├── copyright-agnific.png   # Agnific Security Watermark Asset
│   └── favicon.svg
├── .env.example                # Admin & Cloud Database Configuration Example
├── DEPLOY.md                   # Complete Production Deployment Guide
└── README.md

🚀 Quick Start Guide

Prerequisites

• Node.js 18.0.0 or later
• npm 9.0.0 or later

Installation & Run

1. Clone the repository:

   git clone https://github.com/RasikhAli/MapsPrint-Studio.git
   cd MapsPrint-Studio
   

2. Configure environment:

   cp .env.example .env
   

3. Install dependencies:

   npm install
   

4. Start local development server:

   npm run dev
   

   Open http://localhost:3000/ in your browser.
   Open http://localhost:3000/admin for the Admin Portal.

5. Build production bundle:

   npm run build
   

🌐 Deployment Guide

For complete, step-by-step production deployment instructions, refer to DEPLOY.md:

• Render.com (100% Free static hosting with automated CI/CD and free SSL)
• Hostinger Shared / Cloud Hosting (Upload dist/ directly via hPanel/cPanel File Manager with .htaccess — zero VPS/KVM required)
• Linux VPS / Dedicated Server (Nginx + Let's Encrypt Certbot)
• Docker Container (Multi-stage build with Nginx Alpine)
• Google Firebase Realtime Database (1-minute setup for cross-device orders sync)
• Vercel, Netlify, Cloudflare Pages (1-click free deploys)

📄 License & Attribution

• Creator & Maintainer: Agnific
• WhatsApp Support: +92 312 1472153
• Map Data: © OpenStreetMap contributors.
• Vector Tiles: Distributed via OpenFreeMap / OpenMapTiles.
• Geocoding: Powered by Nominatim OSM.
• License: MIT License. Free for personal and commercial map poster creation.