Travel-time search

"Homes less than 20 minutes from my office by bike." The visitor types an address, picks a time and a travel mode; Yatmo draws the reachable area and hands you its polygon.

What it does

A panel docked on the map with a reference address (autocomplete, restricted to the map's country), a travel-time slider (5 to 60 minutes by default) and a four-mode selector: walking, cycling, driving, public transport. The "Show results" button computes the isochrone on the Yatmo routing engines, draws it with your accent colour, fits the map to it and calls your onSearch callback with the polygon.

Live demo

Type "Grand-Place" or "Rue de la Loi 16", pick a time and a mode, then click the button: the polygon your backend would receive is printed under the map.

onSearch output will appear here...

How to enable

Add a travelTimeSearch object to yatmoConfig. Only onSearch is really needed, everything else has a sensible default:

yatmoConfig = {
    licenseKey: 'xxxxxxxxxxxxxxxxxx',
    language: 'FR',
    country: 'BE',
    container: 'map',
    center: [4.3517, 50.8503],
    zoom: 12,
    startsWithPoisHidden: true,
    travelTimeSearch: {
        defaultMinutes: 15,
        defaultMode: 'Driving',
        onSearch: function (shape, meta) {
            // your listings query goes here
        }
    }
};

Options

Name	In	Type	Description
onSearch	travelTimeSearch	function(shape, meta)	Called when the visitor clicks "Show results", after the area has been computed and drawn.
onShape	travelTimeSearch	function(shape, meta)	Called every time the drawn area changes (same moments here, kept for symmetry with the other scenarios).
defaultMinutes	travelTimeSearch	integer	Initial position of the slider. Default: `10`.
minMinutes / maxMinutes / stepMinutes	travelTimeSearch	integer	Range of the slider. Above 60 minutes the areas become very large and slower to compute. Default: `5 / 60 / 5`.
defaultMode	travelTimeSearch	string	`Walking`, `Bicycling`, `Driving` or `Transit`. Default: `Driving`.
position	travelTimeSearch	string	`left` or `right`: which top corner hosts the panel. Default: `left`.

What your callback receives

onSearch(shape, meta)

shape = { "type": "MultiPolygon", "coordinates": [ [ [ [4.31, 50.84], [4.33, 50.85], ... ] ] ] }
meta  = {
    type: 'travelTime',
    travelMode: 'Bicycling',
    minutes: 15,
    origin: { latitude: 50.8467, longitude: 4.3525, address: 'Grand-Place, 1000 Bruxelles' }
}

The area is exactly what the Isochrone API returns for that origin, mode and duration, so you can recompute or cache it server side with your backend key if you ever need to.

Notes

Public transport areas depend on the schedules

Transit isochrones are computed for a weekday morning departure and only exist where the market has public transport data. Where there is none, the transit area falls back to what can be reached on foot.

The address autocomplete is the same as the one of Route from origin: suggestions start at three characters, are ranked by the geocoder and restricted to the map's country.

To display the results afterwards, pass the same shape to the results map so the visitor sees the area they searched in.