Estimator UI & Map Component
Relevant source files
The following files were used as context for generating this wiki page:
The Estimator UI & Map Component serves as the core functional module of the Driveway Estimator Pro application. Its primary purpose is to guide users through a multi-step workflow to capture driveway imagery, define boundaries via interactive corner adjustment, select surfacing materials, and generate accurate cost estimates based on geospatial data and material volume calculations.
This system integrates frontend React components with backend tRPC procedures, AI vision services for edge detection, and Google Maps proxy services for location-aware pricing. It enables a seamless transition from a raw photo to a professional-grade project estimate that can be saved to a Dashboard or exported.
Multi-Step Estimator Workflow
The Estimator is implemented as a state-driven multi-step form consisting of five distinct phases. This structure ensures that complex data—such as image coordinates and volumetric measurements—are collected sequentially.
Workflow Steps
| Step | Name | Primary Action | UI Component |
|---|---|---|---|
| 1 | Upload | Capture or upload driveway photo | input[type="file"] with capture="environment" |
| 2 | Adjust | Interactive refinement of driveway boundaries | Draggable SVG/Canvas markers |
| 3 | Material | Choose surfacing material (Hot Mix, etc.) | Material selector grid with live pricing |
| 4 | Preview | Visualize material on the actual driveway | AI-generated preview image |
| 5 | Summary | Finalize project metadata and save | Input fields for Project Name and Notes |
Sources: client/src/pages/Estimator.tsx:42-57, README.md:9-15
Map Integration and Geolocation
The system utilizes geospatial information to provide regionalized pricing. This is achieved through the browser's Geolocation API on the frontend and a Google Maps proxy on the backend.
Geolocation Fetching
Upon mounting, the Estimator attempts to retrieve the user's coordinates. In the current implementation, these coordinates are used to determine the local ZIP code (defaulting to "10001" if geocoding is unavailable or in development).
Sources: client/src/pages/Estimator.tsx:90-111
Map Proxy Service (server/_core/map.ts)
The backend provides a standardized interface for making authenticated requests to Google Maps APIs. This service handles credential injection and URL construction for:
- Geocoding: Converting coordinates to ZIP codes for pricing lookups.
- Static Maps: Generating map images for inclusion in project summaries.
- Places: Searching for local material suppliers.
Sources: server/_core/map.ts:47-75, server/_core/map.ts:251-258
AI Edge Detection and Corner Adjustment
One of the most technical aspects of the UI is the interactive corner adjustment system.
Edge Detection Flow
When a photo is uploaded, it is sent to a tRPC procedure that uses LLM Vision to detect the initial driveway boundaries.
Manual Adjustment Logic
Users can fine-tune the detection by dragging markers. The UI tracks these coordinates as percentage-based values (x: number, y: number) to maintain responsiveness across different screen sizes.
- State Tracking: The
draggingCornerstate identifies which index in thecornersarray is being modified. - Coordinate Calculation: Mouse/Touch events are converted to relative percentages based on the container's bounding rectangle.
Sources: client/src/pages/Estimator.tsx:143-162, server/routers/projects.ts:80-111
Material Selection and Pricing Logic
The estimation engine calculates costs by combining user-defined dimensions with regional material data.
Volume and Cost Calculation
The pricing service performs a conversion from area and depth to tonnage, which is the industry standard for asphalt and gravel.
- Cubic Yards:
(Square Feet * (Depth Inches / 12)) / 27 - Tonnage:
Cubic Yards * Material Density(e.g., 1.5 for Hot Mix, 1.0 for Gravel) - Total Cost:
Tons * Price Per Ton
Sources: server/services/pricing.ts:101-135
Supported Materials Data Model
| Material Key | Display Name | Standard Density (Tons/CY) |
|---|---|---|
hotmix | Hot Mix Asphalt | 1.5 |
millings | Asphalt Millings | 1.3 |
tar_and_chip | Tar & Chip | 1.2 |
gravel | Gravel | 1.0 |
Sources: server/services/pricing.ts:114-119, drizzle/schema.ts:58-61
Project Persistence
Finalized estimates are stored in the projects table. The schema includes comprehensive fields for reproducing the UI state, including the JSON-stringified corner points and S3 keys for both the original and preview images.
Summary
The Estimator UI and Map Component bridge high-level user interactions with complex backend logic. By utilizing interactive coordinate mapping for edge detection and a robust volumetric pricing service, the module provides homeowners and contractors with immediate, data-driven driveway estimates that are contextually aware of the project's geographic location.