cap-oet — usage examples

⚠ Not an official icon set

These are not official or standardised icons for the OASIS Event Terms. No standards body has endorsed these mappings. They are an internal effort to standardise the icons used across the warning tools built at github.com/wmo-raf — cap-composer, cap-aggregator and ClimWeb. The event terms come from the OASIS CAP Event Terms List v1.2; the icon choices are ours.

Worked example — heavy rainfall, Kisii, Kenya.

A CAP alert with <event>rain</event>, event code OET-159 (grouping weather), area Kisii County, <severity>Severe</severity>, urgency=Expected, certainty=Likely. The icon names what the event is; the severity drives the colour. Switch severity and every example on this page recolours.

1 · Within page content

Icons ship with fill="currentColor", so you never edit the SVG — set color on a parent and the glyph follows. One icon per event, recoloured per alert.

Alert card

Heavy rainfall expected — Kisii CountySevere

Kenya Meteorological Department · issued 14:00 EAT · valid 24 h

Heavy rainfall of 50–80 mm is expected over Kisii County. Risk of flash flooding in low-lying areas and along river channels.

{% load cap_oet %}

<div class="alert alert--{{ alert.severity|lower }}">
  {% oet_icon alert.event_code class="alert__icon" %}
  <h4>{{ alert.headline }}</h4>
</div>

/* severity drives colour — the icon inherits it */
.alert--severe  { --sev:#f08c11; background:#FDE8D0; border-color:#C2600A; }
.alert--extreme { --sev:#d42d41; background:#FEE2E2; border-color:#DC2626; }
.alert__icon    { width:44px; height:44px; color:var(--sev); }

Inline, in a sentence

A heavy rainfall warning is in effect for Kisii County until Thursday. Sized in em, the glyph scales with the text.

Alert feed

2 · Within web maps

On a map the icon needs a shape behind it — a marker has to read against imagery and terrain. That gives three independent channels in one marker: the shape frames it, the fill carries severity, the glyph says which event. Pick a shape, then see it wired up in either library.

Marker shape

Shared marker builder

One function, both libraries. The glyph is knocked out in white on the severity fill and pulled from the sprite, so all 224 icons work in every shape — no second set of map icons to maintain.

const SEVERITY = {
  Extreme:"#d42d41", Severe:"#f08c11", Moderate:"#f4cf00",
  Minor:"#399cc7",   Unknown:"#82a8df",
};

function marker(code, severity, shape = "triangle", size = 48) {
  const fill  = SEVERITY[severity] ?? SEVERITY.Unknown;
  const glyph = (x, y, w) =>
    `<svg x="${x}" y="${y}" width="${w}" height="${w}" viewBox="0 0 48 48"
          style="color:#fff"><use href="icons.svg#${code}"/></svg>`;

  if (shape === "triangle") return `
    <svg width="${size}" height="${size}" viewBox="0 0 48 48">
      <path d="M24 4 L45 42 H3 Z" fill="${fill}" stroke="${fill}"
            stroke-width="5" stroke-linejoin="round"/>${glyph(13, 18, 22)}</svg>`;

  if (shape === "pin") return `
    <svg width="${size}" height="${size * 1.25}" viewBox="0 0 48 60">
      <path d="M24 59C24 59 44 36 44 21A20 20 0 1 0 4 21C4 36 24 59 24 59Z"
            fill="${fill}"/>${glyph(12, 9, 24)}</svg>`;

  return `
    <svg width="${size}" height="${size}" viewBox="0 0 48 48">
      <circle cx="24" cy="24" r="22" fill="${fill}"/>${glyph(12, 12, 24)}</svg>`;
}

Need a raster symbol layer instead of DOM markers? Serve the individual files — icons/OET-159.svg — and rasterise on load with map.addImage(). Every icon has a stable URL for exactly this.