Route Visualization Tool - MVP
Text to Map is a browser-based tool that converts photographed route sheets into Google Maps routes. It uses local OCR to extract text from an uploaded image, parses the result into origin, destination, and waypoints, and gives users editable controls to correct the route before rendering it on the map.
None
Backend Required
OCR runs entirely in the browser via Tesseract.js — no server needed for image processing
Up to 20
Waypoints Supported
Matches the practical limit of Google Directions API route requests
6
Workflow Steps
Upload → OCR → Parse → Review → Draw → Route summary
Automatic
Fallback Handling
If a waypoint route fails, the app retries with origin and destination only
The Challenge
Route sheets are often messy inputs — scanned, photographed, compressed, or formatted as dense tables. OCR output can include spelling mistakes, broken road names, inconsistent spacing, and incorrect characters. A fully automated solution would be brittle, but a purely manual workflow would not save enough time. The product needed to extract useful route information from an image directly in the browser, convert imperfect OCR text into structured route fields, and let users review and correct the extracted data before drawing the map.
Our Solution
Text to Map combines local OCR, route text parsing, editable form fields, and Google Maps route rendering into one focused interface. OCR runs entirely in the browser using Tesseract.js, so uploaded route images are never sent to an application server. Once text is extracted, a parser cleans common OCR mistakes, normalizes road and place names, and separates the route into an origin, destination, and waypoints. Because source documents vary in quality, the app keeps all extracted fields editable — users can adjust the origin, destination, waypoint list, or raw OCR text, then reparse before drawing the route.
How We Built It
A detailed look at each layer of the automated pipeline architecture.
In-Browser OCR
The app uses Tesseract.js to run OCR entirely client-side. When a user uploads a route sheet image, the browser processes it locally without sending the image to any server. This keeps the workflow fast, removes the need for a backend, and avoids adding infrastructure just for image processing. After OCR completes, the raw text is passed directly to the route parser.
Route Parsing and Cleanup
OCR output from photographed route documents is rarely clean. The parser applies targeted cleanup rules for common route-sheet mistakes — road-name corrections, place-name normalization, and Texas-specific location formatting. It then separates the cleaned text into an origin, destination, and ordered list of waypoints. The parsed fields are pre-populated into the editable form so users can begin reviewing immediately.
Editable Review and Human Correction
Because route documents vary in quality, the app treats OCR and parsing as a first pass rather than a final answer. Users can edit the origin, destination, and individual waypoints using chip-style controls with add and remove buttons. If deeper changes are needed, the raw OCR text is also exposed and reparsable — users can correct the source text and re-run the parser before drawing the route.
Google Maps Route Rendering
Once the user confirms the route fields, the app draws driving directions using the Google Maps JavaScript API with DirectionsService and DirectionsRenderer. Up to 20 waypoints are passed to match the practical limits of Google Directions requests. Numbered markers are projected onto the route path at each waypoint. If a multi-waypoint route fails, the app automatically retries with only the origin and destination so the user still gets a usable map. A route summary showing distance and estimated travel time is displayed when available.
Interface Design
The layout is intentionally task-focused. A left panel holds the route controls and extracted fields, the main area is reserved for the map, and a lower review panel shows both the uploaded image and raw OCR text side by side. This lets users compare the original document, the extracted text, and the rendered route without switching between screens. The app treats automation as an assistant — OCR and parsing handle the first pass, but the user stays in control through editable fields and a reparse option.
Technology Stack
The tools and technologies powering this solution