DEV Community: Serac

I Built CityDistance.io: A Free Tool to Find Cities from Distance

Serac — Tue, 21 Apr 2026 13:48:47 +0000

I recently launched CityDistance.io, a free geography tool built around one simple question:

If a city is 500 km from Paris and 800 km from Berlin, which city could it be?

Most map tools are great at answering “how far is A from B?”

CityDistance is designed for the reverse problem: finding possible cities from distance clues.

Why I Built It

I enjoy geography games like Satle, SatZoom, UnZoomed, Citydle, Worldle, and GeoGuessr-style challenges.

A common pattern in these games is that after each guess, you receive a distance hint. That hint is useful, but one distance alone still leaves a huge circle of possible answers.

With two or three hints, though, you can triangulate the likely location.

That is the main idea behind CityDistance.io.

What CityDistance Does

The core tool lets you:

Select 2 or 3 known cities
Enter distance hints in kilometers, miles, or nautical miles
Draw distance rings on an interactive map
Find matching cities near the intersection area
Share the result with others

It is useful for geography games, but also for teaching, spatial reasoning, and exploring how cities relate to each other around the world.

The current database includes 30,000+ cities worldwide, with search support for major cities and alternate names.

How the Calculation Works

CityDistance uses great-circle distance rather than flat map distance.

That means the distance follows the curvature of the Earth, which is much more accurate for global city-to-city comparison.

The calculation is based on the Haversine formula, then the app compares candidate cities against the distance constraints entered by the user.

In practice:

Each reference city creates a distance circle.
Two circles usually create two possible regions.
A third reference city helps narrow the answer.
Matching cities are ranked and shown on the map.

This is especially helpful because game hints are often rounded, so the tool allows some tolerance instead of expecting perfect mathematical input.

More Than a Calculator

CityDistance has grown beyond the original triangulation tool.

Radius Map Tool

The City radius tool lets you pick a city and find other cities within a chosen distance.

For example:

Cities within 500 km of London
Cities within 1,000 miles of New York
Cities within 2,000 km of Shanghai

It visualizes the radius on the map and lists nearby cities.

City Distance Directory

The cities section is a growing directory of city pages and city-pair distance content.

It is designed for people searching things like:

Distance from New York to Paris
Cities near Tokyo
Major cities within a certain range
Great-circle distance between world cities

Geography Distance Quizzes

I also added a quiz hub with several modes:

Daily distance challenge
Distance guessing game
City distance quiz

The goal is to help users build real geographic intuition, not just look up numbers.

Tech Stack

The site is built with:

Astro
Tailwind CSS
MapLibre GL
Turf.js

Astro works well here because many pages are content-heavy and benefit from fast static rendering, while the calculator and map tools still provide interactive client-side behavior where needed.

Design Direction

The visual style is intentionally practical and map-focused:

Blue for water / Earth / primary actions
Green for land / geography context
Orange for calls to action
Clean cards and panels
Interactive map as the main working surface

I wanted the product to feel less like a landing page and more like a tool you can immediately use.

Try It

You can try the project here:

https://citydistance.io/

If you like geography games, try entering two distance hints from recent guesses and see how quickly the map narrows the answer.

I would love feedback from developers, geography game players, teachers, and anyone who enjoys map-based tools.

I Built a Free, Privacy-First Coordinate Converter That Runs Entirely in Your Browser

Serac — Tue, 24 Mar 2026 12:47:55 +0000

If you've ever worked with GPS data, GIS pipelines, or geospatial APIs,
you know the pain: your data is in UTM, your map expects Decimal Degrees,
your colleague sends you MGRS, and your database stores Geohash.

Switching between coordinate formats is a small but constant friction
point for developers, surveyors, drone operators, and anyone doing field
work. Most online tools require sign-ups, ship your data to a server,
or support only 2–3 formats.

So I built CoordConv — a fast,
browser-based coordinate converter that handles 7 formats in one place.

What It Supports

Format	Example	Common Use
DD Decimal Degrees	`40.7128, -74.0060`	Google Maps, GPS
DMS Degrees Minutes Seconds	`40°42'46"N 74°00'21"W`	Aviation, nautical
DDM Degrees Decimal Minutes	`40°42.767'N`	Marine, geocaching
UTM	`18T 583960 4507523`	Surveying, topo maps
MGRS	`18TWL8395907523`	Military, SAR
Plus Code	`87G7PX7V+4H`	Delivery, field ops
Geohash	`dr5regw3pg`	Spatial indexing, dev tools

Key Features

⚡ Instant conversion — paste any format, get all 7 outputs at once
🗺️ Interactive map preview — verify your location visually before copying
📋 One-click copy for every output format
📦 Batch Converter — handles CSV files or pasted tables with hundreds of rows
🔄 Lat/Lon and Lon/Lat order toggle (because GeoJSON vs GPS is a real gotcha)
🎯 6 decimal place precision (~±0.11 meters accuracy)

Try It

👉 coordconv.com

Specific tools:

Happy to answer questions about how the projection math works under the
hood, or how to handle the WGS84 vs NAD83 vs GCJ-02 datum differences
in your own projects. Drop them in the comments! 🗺️

I built a satellite city guessing game using Next.js & MapLibre

Serac — Sat, 24 Jan 2026 18:53:09 +0000

Hey developers! 👋

I've always been a fan of geography games, but I wanted to build something different: a game that tests your "vertical" intuition—recognizing cities from high-resolution satellite imagery rather than the typical street view.

So I built SatPixel.

The Tech Stack 🛠️

Since this is a side project, I wanted a stack that was fast, free to host, and easy to scale:

Framework: Next.js (App Router)
Deployment: Vercel
Maps Engine: MapLibre GL JS (Open source alternative to Mapbox)
Imagery: Primarily ESRI World Imagery for high-res clarity.

Try it out

I'd love to get some feedback from the dev community on the UI and game difficulty.

👉 Play it here: https://satpixel.com

Let me know what you think!