Behind the Build

How I Built The Gas Map

Steve Vogt · February 2026 · 6 min read

I check gas prices way more than the average person. I plan road trips, I drive between states, I argue with my brother about whether California is actually that much worse, and I run into the same answer every time: yes, it is. But I always had to dig through AAA's daily report to confirm it, and AAA's site was not built for someone who wants to glance at one number and move on with their day.

Why a New Page

AAA already publishes the underlying data, and they are the right source. They survey more than 60,000 retail stations every day across all 50 states and DC. There is nothing better in the U.S. for daily gas price averages. The data is great. The presentation is what gets in the way.

The AAA page is busy. There are ads, regional callouts, lookup tables stacked on tables, and the actual numbers I want are buried halfway down. If I am about to fill up before crossing into California, I want to see the spread in three seconds, not three scrolls. So I built The Gas Map: one page, all 50 states, every grade, refreshed daily.

Pulling the Data

The first version pointed straight at the AAA endpoint. That worked for me, but the moment anyone else loaded the page, the request was coming from their browser to AAA's servers without the right headers, and I had to think about CORS and rate limits. The fix was a public CORS proxy in front of the AAA fetch, with a fallback to a second proxy if the first one is having a bad day.

The page tries the primary proxy, and if that fails, it falls back to the secondary one. If both fail, it falls back again to a known-good cached snapshot baked into the page so you still see real, recent numbers and a clear note that the live feed is temporarily unavailable. That last layer matters because the worst version of a daily-data site is one that just shows a spinner.

The Six Fuel Grades

AAA publishes Regular, Mid-Grade, Premium, and Diesel by state. They do not publish UNL 88 (E15) or E85 by state. Some people care about those grades, especially in the Midwest, where E85 stations are everywhere and a flex-fuel vehicle can save real money on a fill-up.

For UNL 88 and E85, I estimate from each state's Regular price using the typical national pricing relationships from the U.S. Department of Energy's Alternative Fuels Data Center. The numbers are clearly labeled as estimates, with a note explaining where they come from. The temptation was to just hide those grades. But people use them, and an estimate with a footnote is more useful than nothing.

Charts and the Calculator

The history chart is plain SVG, hand-drawn from the daily data. No chart library. I tried a couple, and every one of them either pulled in 100 KB of code or fought me on the styling. For a tiny line chart with five timeframe toggles, plain SVG is more code to write but a lot less code to ship. The whole chart is under 200 lines.

The fill-up calculator was a late add. I was looking at the page and thinking, sure, gas in Oklahoma is $3.71 and California is $6.01, but how does that actually feel? So I added a tank-size input and three numbers: cheapest state, national average, most expensive state. Now the answer is "$55 versus $90, every time you fill up." That is the number people actually want.

Light and Dark Themes

The site has a warm cream light theme and a dark theme that kicks in based on the system setting. I prefer dark mode for almost everything, but for a data-heavy reference page, a warm parchment-style light theme reads really well in the daytime. So both exist, and the page respects whichever one your OS is set to.

The whole stylesheet is one set of CSS variables for each theme. No CSS framework, no build step. I want to be able to open this file in five years and still understand what is going on.

What is Next

The next thing I want to add is a state-level history view, where you can pick any state and see the last twelve months. AAA publishes the data, I just need to render it. After that, maybe a "best time to fill up" hint based on weekly patterns, although that is more of a nice-to-have than a real signal.

If you also drive enough to care about flight prices, the Delta Price Tracker watches your booked Delta flights for price drops on the same kind of principle: live data, no signup, no fee. And if you want to see the rest of what I have shipped, the homepage has the full list.

Try The Gas Map
Free. No signup. Live U.S. gas prices for every state.
Visit The Gas Map
More Projects
Finance
BridgeToFI
FIRE planning calculator
Rewards
Churning Hub
Credit card bonus tracker
Travel
Delta Price Tracker
Free flight price drop alerts
Shopping
Amazon Price Tracker
Post-purchase price monitoring
Education
Spanish Spelling Test
Spelling practice with auto-grading