JavaScript Summary-as-text plugin

Render narrative paragraphs describing the surroundings of an address, with optional headings and icons. You decide exactly where each paragraph lands on the page.

Live demo

Hello world

<script>
    yatmoSummaryTextConfig = {
        licenseKey: 'xxxxxxxxxxxxxxxxxx',
        language: 'EN',
        country: 'BE',
        latitude: 50.833816,
        longitude: 4.3043771,
        beginStrongTag: '<strong>',
        endStrongTag: '</strong>'
    };

    function addSummaryTextWithTitles(paragraphs, titles, alternativeTitlesStreet, alternativeTitlesCity, titlesIcons) {
        // Choose the title flavour to use for each paragraph.
        // titles[] is the default; alternativeTitlesCity[] uses the city name in the title
        // (nicer for the first paragraph); alternativeTitlesStreet[] uses the street name
        // (nicer for the second paragraph, when the address is public).
        // titlesIcons[] gives a stable category key per paragraph: 'education',
        // 'shopping', 'transports', 'publictransports', 'cities'.
        var host = document.getElementById('summaryText');
        paragraphs.forEach(function (paragraph, index) {
            if (titles.length > 0) {
                var titleToUse;
                switch (index) {
                    case 0: titleToUse = alternativeTitlesCity[index]   || titles[index]; break;
                    case 1: titleToUse = alternativeTitlesStreet[index] || titles[index]; break;
                    default: titleToUse = titles[index]; break;
                }
                var h = document.createElement('h3');
                h.textContent = titleToUse;
                host.appendChild(h);
            }
            var p = document.createElement('p');
            p.innerHTML = paragraph;
            host.appendChild(p);
        });
    }
</script>
<script src="https://map.yatmo.com/summary-text.js"></script>

Things to know

You implement addSummaryTextWithTitles however you like — the plugin calls it with the generated paragraphs once they’re ready. The above example shows the vanilla DOM version; the plugin itself has no dependency on jQuery.

The names yatmoSummaryTextConfig (object) and addSummaryTextWithTitles (function) are fixed — the plugin looks for them by name.

Required parameters

Optional parameters