FR
All apps

§ App / Property Explorer

Build a property search with commute times in React and unmap

How the unmap Property Explorer is put together: fictional listings in real Calgary communities, driving and walking commutes from the Matrix API, travel-time areas, nearby places and a side-by-side comparison.

Launch appSource

Property Explorer is a property search with commute analysis. Filter 25 homes by price, bedrooms, type and area, set where you commute to, and see how long each home takes by car or on foot, the areas within 15 and 30 minutes, what is within a short walk of a home, and two homes side by side. It runs at apps.unmap.dev/property-explorer, and its source is a standalone Next.js project you can clone and run with your own key.

The listings are fictional and the app says so on every one: none is for sale, none is scraped, and none has a street address. What is real is where they sit, one point inside each of 25 of Calgary's residential community districts, so the commute times, the travel-time areas and the nearby places are real unmap answers about real streets.

What it does

  • Filters: price, bedrooms, type and the city's sector, in the browser.
  • A destination: search for an office or any place in Canada. The app opens on a sample one, downtown Calgary, labelled as a sample.
  • Commute times: driving or walking from every listing, from the Matrix API, ten listings a call and the calls sent together. Listings sort quickest first.
  • Unavailable, never invented: when the matrix has no answer for a listing, it says "Commute unavailable" instead of a time, and the panel counts them while you filter by time.
  • Travel-time areas: the areas within 15 and 30 minutes of the destination, from the Isochrone API in one call, with the one you chose drawn stronger.
  • Only what is within reach: keep the listings within 15 or 30 minutes, by the listed time.
  • Nearby: groceries, schools, parks, pharmacies and coffee within 1.5 km of the home you open, the nearest three of each, in one Places call.
  • Compare two: tick two homes and read price, type, bedrooms, bathrooms, floor area, year, community and commute side by side.

Few requests, each on purpose

Setting a destination costs four requests: three matrix calls for the 25 listings and one isochrone call. The answers are kept per destination and mode, so changing the filters or switching back to a mode asks nothing. Opening a listing costs one nearby call. Nothing is requested when you move the map.

Built from the registry, unmodified

The map, the destination search, the price tags and the travel-time areas are registry items copied in unmodified, and the app's own code calls the API only through @unmap/sdk. Installing the same pieces into your project is one command:

npx @unmap/cli add map geocoder marker-popup geojson-layer map-controls

What it does not do

  • Real listings. No MLS or listing feed is connected, and the app never presents a listing as real.
  • Transit commutes. Commutes are by car or on foot.
  • Money or schools. No mortgage maths, price history, school catchments or ratings.

Run it yourself

You need Git, Node.js 24, pnpm and a browser key from the dashboard that allows http://localhost:3205.

git clone --depth 1 https://github.com/unmap-dev/property-explorer.git
cd property-explorer
pnpm install --frozen-lockfile
cp .env.example .env.local

Set NEXT_PUBLIC_UNMAP_KEY in .env.local to your key, run pnpm dev, and open localhost:3205. The listings ship in data/listings.sample.json; parseListings() in lib/listings.ts checks a file of your own and lists every problem it finds. The Routing API reference covers the matrix and isochrones, and the travel-time areas example covers drawing them.