yatmo.com info@yatmo.com +32 491 597 199

Recipe: replicate the Summary plugin from raw API calls

Rebuild the “nearest POI per category, with travel time” widget — using only the REST API — so you control every pixel.

Why bother

The JS Summary plugin is great if its default table layout works for you. It doesn’t if you need:

What you need

Fetch the data

Most integrations will do this server-side and embed the result in the listing page’s HTML.

curl -H 'LicenseKey: YOUR_KEY' \
  'https://be.yatmo.com/summary?latitude=50.8520525&longitude=4.3442926&language=EN' \
  > summary.json
// Node.js / server-side
const summary = await (await fetch(
  `https://be.yatmo.com/summary?latitude=${lat}&longitude=${lng}&language=EN`,
  { headers: { LicenseKey: process.env.YATMO_KEY } }
)).json();

$ch = curl_init("https://be.yatmo.com/summary?latitude=$lat&longitude=$lng&language=EN");
curl_setopt($ch, CURLOPT_HTTPHEADER, ['LicenseKey: ' . getenv('YATMO_KEY')]);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$summary = json_decode(curl_exec($ch), true);
curl_close($ch);

using var http = new HttpClient();
http.DefaultRequestHeaders.Add("LicenseKey", Environment.GetEnvironmentVariable("YATMO_KEY"));
var json = await http.GetStringAsync($"https://be.yatmo.com/summary?latitude={lat}&longitude={lng}&language=EN");
var summary = JsonSerializer.Deserialize<JsonElement>(json);

Render it your way

Walk the response and pull out one POI per subcategory. Here’s the shape in plain JS:

// summary.AvailableCategoriesAroundPosition is an array of top-level categories
// (e.g. Children, Transports, Shopping, Tourism). Each has .SubCategories.
// Each subcategory has .Data (the POIs) and each POI has .TravelDataElements
// (one entry per travel mode).

summary.AvailableCategoriesAroundPosition.forEach(category => {
    category.SubCategories.forEach(sub => {
        const closest = sub.Data[0]; // already sorted by distance
        if (!closest) return;
        const driving = closest.TravelDataElements
            .find(t => t.TravelMode === 1); // 1 = Driving

        renderRow({
            categoryLabel: sub.Label,           // localized
            poiName:       closest.Name,        // POI's own name
            distanceLabel: driving.PreciseTravelDistanceLongLabel,  // "1.2 km"
            timeLabel:     driving.TravelTimeShortLabel             // "3min"
        });
    });
});

Travel modes are: 1 = Driving, 2 = Walking, 3 = Bicycling, 4 = Transit. Not every POI has every mode — check HasTravelInformation before reading time/distance.

Going to production