You can add balloons to your Map for a specific layer by configuring a BalloonContentProvider on the layer. The default behavior of the Map is to display a balloon when a user selects an object of a layer with a balloonContentProvider.

balloonsample
Figure 1. The Balloon sample

In this example, extracted from the balloons sample, we create a BalloonContentProvider that:

  • Displays the name of the city for small cities

  • For large cities with a population of over one million, displays an HTML list with more information about the city.

Program: Setting a balloonContentProvider on a layer with city features. (from samples/balloon/main.tsx)
function contentProvider(prefix: string, property: string): (o: Feature | Shape) => string | HTMLElement {
  return (o): string | HTMLElement => prefix + ((o as Feature).properties[property] || "no property");
}

  // Create a balloon content provider for the cities layer, which creates HTML
  // for cities with more than 1.000.000 inhabitants and uses the "default"
  // content provider if not.
  const citiesDefaultProvider = contentProvider("CITY: ", "CITY");
  citiesLayer.balloonContentProvider = (o: Feature | Shape): string | HTMLElement => {
    const cityProps = (o as Feature).properties;
    let node;
    if (cityProps.TOT_POP > 1000000) {
      node = document.createElement("ul", {});
      for (const key in cityProps) {
        if (cityProps.hasOwnProperty(key) && key !== "uid") {
          const item = document.createElement("li");
          item.innerHTML = `${key}: ${cityProps[key]}`;
          node.appendChild(item);
        }
      }
      return node;
    } else {
      return citiesDefaultProvider(o);
    }
  };