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
.
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);
}
};