JavaScript Summary plugin

Drop the nearby points of interest, sorted in tabs by category with the travel time to each, onto any page with one config object.

Live demo

Hello world

<div id="summary"></div>

<script>
    yatmoSummaryConfig = {
        licenseKey: 'xxxxxxxxxxxxxxxxxx',
        language: 'EN',
        country: 'BE',
        container: 'summary',
        latitude: 50.8520525,
        longitude: 4.3442926
    };
</script>
<script src="https://map.yatmo.com/summary.js"></script>

Things to know

First call can be slow

The first request for a new latitude/longitude pair takes ~1 second while Yatmo precomputes distances to the nearest POIs. All subsequent calls hit the cache and return immediately.

The summary shows one category at a time, in tabs, so that it stays short on the page; maxHeight caps its height and makes the places scroll inside. It is responsive: it follows the width of its container, and the travel times move under the place name when the container gets narrow.

Your stylesheet does not leak into it, and it takes the font of your page so that it reads as part of the listing. Colours, corners and content are set with the options and the CSS variables below.

If you want a completely different look (your own icons, your own layout), call the Summary API directly and render it yourself: see the recipe.

The name yatmoSummaryConfig is fixed: the plugin looks for it by name.

Required parameters

Name	In	Type	Description
licenseKey required	config	string	Your Yatmo frontend key, the one safe to embed in HTML. See License & keys.
language required	config	string	Language ISO code of the labels, in upper case (`EN`, `FR`...).
country required	config	string	ISO code of the country the property is in (`BE`, `FR`...): it selects the Yatmo API that answers.
container required	config	string	Id of the element where the summary should render.
latitude required	config	number	Latitude of the property.
longitude required	config	number	Longitude of the property.

Optional parameters

Name	In	Type	Description
layout	config	string	`tabs` shows one category at a time; `list` shows every category, one under the other. Default: `tabs`.
maxHeight	config	number \| string	Maximum height of the summary: a number of pixels (`360`) or any CSS length (`'50vh'`). When the places of a tab need more, they scroll; the tabs and the footer stay in place. By default the summary is as tall as its content.
accentColor	config	string	Accent colour: the selected tab, the travel-mode icons and the tint of the travel-time badges. Any CSS colour. Default: `#06A7EA`.
accentForeground	config	string	Text colour of the selected tab, to set when your accent colour is light. Default: `#ffffff`.
theme	config	string	`light`, `dark`, or `auto` to follow the visitor's system setting. Use `dark` when your page has a dark background. Default: `light`.
card	config	boolean	`false` removes the frame (background, border, padding): the summary sits directly on your page. Default: `true`.
rounded	config	boolean \| string	Corner radius of the frame; the badges take half of it. `false` for square corners, or any CSS length. Default: `12px`.
fontFamily	config	string	Font of the summary. By default it takes the font of your page.
showCategoryTitles	config	boolean	With `layout: 'list'`, `false` hides the category headings (Education, Transports...) and gives one continuous list. Default: `true`.
travelModes	config	string[]	Travel modes to show, among `'Walking'`, `'Bicycling'`, `'Transit'` and `'Driving'`. By default every mode the API returns for a place.
showDistance	config	boolean	`true` adds the distance before each travel time. Default: `false`.
timeFormat	config	string	`short` for 12 min, `compact` for 12'. Default: `short`.
hideTime	config	boolean	`true` lists the places without any travel time. Default: `false`.
analytics	config	boolean	Anonymous usage statistics for Yatmo: views and clicks on the widget, counted per licence key. No cookie, no browser storage, no identifier, nothing about the visitor. `false` turns them off. Default: `true`.
onPoiClick	config	function	Called when the visitor clicks a place name: `function (poi, event)`, see below.
onReady	config	function	Called once the summary is in the page: `function (element, data)`, with the root element and the API response.

A transit time that is not faster than walking is not shown: for a place that close, the transit itinerary is the walk.

Styling and CSS isolation

The plugin protects itself from your site's generic CSS and, at the same time, lets you restyle it on purpose:

Every element is reset and every rule is scoped under the .yatmo-summary root: a td { padding: 30px }, an img { max-width: 100% } or a #content a { text-decoration: underline } on your site does not reach the summary.
Colours and corners come from the options above or from CSS variables, set on the container or on any ancestor (:root works).
Every element carries a yatmo-summary- prefixed class (yatmo-summary-tab, yatmo-summary-row, yatmo-summary-name, yatmo-summary-time...). For anything the variables do not cover, a rule of yours with !important wins: the plugin never uses it.

Variable	Default (light theme)	Role
--yatmo-accent	`#06A7EA`	Accent colour, same as `accentColor`.
--yatmo-accent-fg	`#ffffff`	Text on the accent colour, same as `accentForeground`.
--yatmo-radius	`12px`	Corner radius, same as `rounded`.
--yatmo-font	your page's font	Font family, same as `fontFamily`.
--yatmo-summary-max-height	`none`	Maximum height, same as `maxHeight`.
--yatmo-summary-font-size	`14px`	Base font size; everything else scales with it.
--yatmo-summary-bg	`#ffffff`	Background of the frame.
--yatmo-summary-text	`#1f2933`	Place names and travel times.
--yatmo-summary-muted	`#6b7280`	Category headings, place types, distances.
--yatmo-summary-border	`#e6e8eb`	Frame and separators.
--yatmo-summary-chip-bg	10% of the accent	Background of the travel-time badges.
--yatmo-summary-chip-text	the text colour	Text of the travel-time badges.

/* Brand the summary from your stylesheet */
#summary {
    --yatmo-accent: #e8590c;
    --yatmo-radius: 4px;
    --yatmo-summary-border: #ead9c8;
}

/* Beyond the variables: your rule needs !important */
#summary .yatmo-summary-tab { font-weight: 700 !important; text-transform: uppercase !important; }

Clicks and re-rendering

onPoiClick makes the place names clickable and hands you the place, for instance to centre your map on it:

yatmoSummaryConfig = {
    // ...
    onPoiClick: function (poi) {
        // poi: { name, kind, category, latitude, longitude }
        map.flyTo({ center: [poi.longitude, poi.latitude], zoom: 17 });
    }
};

Each place name also carries the sumpoiname class with data-latitude and data-longitude attributes, if you prefer to bind your own handlers. The places of the tabs that are not selected are in the page too, only hidden.

The plugin renders once, when the page is ready. In a single-page application, call YatmoSummary.render(config) whenever the property changes: it takes the same object as yatmoSummaryConfig, replaces the previous summary of that container, and returns a promise resolved with the root element.