Onto

Over a Sunday afternoon, I built Onto — a focused tool to overlay and compare any two locations (countries, cities, schools, states) on top of each other in an interactive map.

Onto is built with Mapcn + Tailwind, and works off public datasets from OpenStreetMap, the EU's GHS Functional Urban Areas, and Natural Earth.

As a geography geek, I often find myself comparing new places - countries, cities, neighborhoods - to places I am familiar with to get a better sense of their relative size and shape.

I knew that a few tools that supported this existed online, but I found existing tools — True Size Of and SpatialGeoLab — clunky and overcomplicated. So I decided to build my own.

Onto's main controls all live within the span of a single sentence, which map directly to the basic semantic task most users — like me — actually wanted to achieve.

To focus the experience on the underlying map, Onto was a great excuse for me to play around with liquid glass on the web. I have a love–hate relationship with glass — it's pretty, but worsens contrast and can feel distracting — so based on Jhey's explorations of liquid glass for web, I exposed the underlying parameters in a menu to tweak live to balance transparency and legibility.

Defining what counted as a valid location took multiple iterations. I started on OpenStreetMap alone, which handled cities, campuses, countries, and states. I extended it with GHS Functional Urban Areas to bring in greater metro areas, plus commonly understood regions like New England, the EU, and the Bay Area — assembled by merging existing locations manually.

Another issue came with water

I discovered that many city boundaries technically contained water, which made their outlines unrecognizable. For precision, I pulled in Natural Earth data to mask out oceans from our entries, putting the focus entirely on land.