Lifestyle search
"Less than 30 minutes from my work by car, close to a primary school, near metro line 1." The visitor stacks criteria, Yatmo computes the one area that satisfies them all and remembers it for the next visit.
What it does
A panel titled "Where would you like to live?" where the visitor adds up to five criteria as cards. Each card shows an icon, a title, the maximum time, and can be edited in place (mode, time) or removed. "Show my area" saves the criteria on the Yatmo side, keyed by your userId, computes the common area and draws it. On the next page load with the same userId, the criteria and the area come back without any recomputation.
Live demo
Add a criterion (try "Travel time from an address" with "Grand-Place", then "Close to..." with "Primary school", then "Near a transit line" and type "metro 1"), then click "Show my area".
onShape output will appear here...
How to enable
yatmoConfig = {
licenseKey: 'xxxxxxxxxxxxxxxxxx',
language: 'FR',
country: 'FR',
container: 'map',
center: [2.3522, 48.8566],
zoom: 11,
startsWithPoisHidden: true,
lifestyleSearch: {
userId: 'abc-123-your-internal-user-id', // required
onShape: function (shape, meta) {
// shape: the common area (null when the criteria do not overlap), meta.criteria: the saved criteria
}
}
};
The three criterion types
- Travel time from an address. Address autocomplete, travel mode (walking, cycling, driving, transit) and a maximum time (10 to 60 minutes). The area is the isochrone from that address.
- Close to a category. A category picked in a short list built for real estate: nurseries and schools, metro / tram / bus stops, train stations, airports, charging stations, car and bike sharing, supermarkets. Plus a travel mode and a maximum time. The area is everything within that time of any place of the category in the country.
- Near a precise transit line. A search box understanding what people type: "metro 5", "M5", "tram 92", "RER B", "U4", the name of a terminus, in any of our languages and alphabets. The area is everything within the walking time of a stop of that line. Typing a mode alone ("metro", "train") offers "any line of that mode" as well as the station category.
Categories and lines are those of the map's country and language: the list is fetched from the Yatmo API when the visitor opens the form, nothing to configure.
How the area is computed
Yatmo computes one area per criterion and keeps their intersection: a home must satisfy every criterion, not just one. Travel-time criteria use the routing engines (isochrones). Proximity criteria use circles around every place of the category, with a radius derived from the time and the mode: 75 m per minute on foot, 250 by bike, 300 by public transport (door to door), 500 by car (urban average). The result is simplified so it stays a few hundred kilobytes at most, even for a country-wide criterion.
When the criteria do not overlap, the map shows nothing and your callback receives null with the criteria in meta; the panel tells the visitor no area matches all of them.
userId. Saving the same criteria again returns the stored area in a few hundred milliseconds; changing a criterion recomputes it (one to five seconds). Areas older than 30 days are recomputed on the next save so new schools or lines are taken into account.About the userId
Same rules as Favorite addresses: pass the opaque id your authentication uses (database key, hashed email, session id). Same id next time, same criteria. It is required: without it the panel is not rendered and an error is logged in the console.
userId can read their saved criteria (which include the address of their workplace) through the map. Use random or hashed values, never raw emails or guessable counters, and never expose one visitor’s id to another.Options
| Name | In | Type | Description |
|---|---|---|---|
| userId required | lifestyleSearch | string |
Your visitor's id: letters, digits and single dashes between them, up to 64 characters (a1b2-c3d4 is fine, no leading, trailing or double dash, no spaces).
|
| onShape | lifestyleSearch | function(shape, meta) |
Called after "Show my area" (and on page load when a stored profile exists) with the common area, or null when nothing matches or the criteria were deleted.
|
| onSearch | lifestyleSearch | function(shape, meta) |
Called when the visitor clicks "Show my area" (not on the silent restore at page load): this is where you run your listings query. shape can be null when the criteria do not overlap.
|
| position | lifestyleSearch | string |
left or right (ignored when travel-time search already placed the panel).
Default: left. |
What your callback receives
onShape(shape, meta)
shape = { "type": "MultiPolygon", "coordinates": [ ... ] } // or null
meta = {
type: 'lifestyle',
restored: false, // true on page load, from storage
criteria: [
{ type: 'travelTime', address: 'Rue Victor Rauter 25, 1070 Anderlecht', latitude: 50.8365, longitude: 4.3050, travelMode: 'Driving', maxMinutes: 30 },
{ type: 'nearPoiType', poiTypeId: 10010002000000, label: 'Primary school', travelMode: 'Walking', maxMinutes: 10 },
{ type: 'nearTransitLine', poiTypeId: 10020001000055, label: 'STIB/MIVB - 1 - GARE DE L\'OUEST - STOCKEL', travelMode: 'Walking', maxMinutes: 10 }
]
}
Reading the area from your server
Because the profile is stored on the Yatmo side, your backend can fetch it directly instead of receiving it from the browser, for instance to run the search on a results page without passing the polygon around. Call the country subdomain with your backend key:
GET https://be.yatmo.com/usersearchprofiles/{userId}?language=EN
LicenseKey: your-backend-key
200 { "Criteria": [ ... ], "Shape": { "type": "MultiPolygon", ... } | null, "UpdatedUtc": "2026-09-27T08:28:15Z" }
200 null (no profile for this user)
PUT https://be.yatmo.com/usersearchprofiles/{userId} body: { "Criteria": [ ... ] } (same shape as meta.criteria)
DELETE https://be.yatmo.com/usersearchprofiles/{userId}
Criteria are validated (1 to 5, minutes between 1 and 120, a travel-time origin inside the country). The endpoint follows the API conventions and authentication.
Notes
Saving with zero criteria deletes the stored profile and clears the map. The card icons reuse the travel-mode icons of the map; category and line labels are singular and localized ("Primary school", "Metro station").
To display the results afterwards, pass the shape to the results map.