While attempting to add an HTML label to a map and trigger a pointerover event, I encountered issues. The objective was to change the HTML content upon hover. Despite trying to incorporate a tooltip, the hover event failed to work properly, and the tooltip displayed an unwanted border.
const base = am5.Root.new('#map');
base.setThemes([
am5themes_Animated.new(base), // Integration of animation
]);
const diagram = base.container.children.push(
am5map.MapChart.new(base, {
projection: am5map.geoNaturalEarth1(), // Altering the map's shape
}),
);
const polygonGroup = diagram.series.push(
am5map.MapPolygonSeries.new(base, {
geoJSON: am5geodata_worldLow,
exclude: ['AQ'],
}),
);
/**
* Universal styles for all countries.
*/
polygonGroup.mapPolygons.template.setAll({
fill: am5.color(0x9563c7),
stroke: am5.color(0x292131),
strokeWidth: 1,
fillOpacity: 1,
templateField: 'polygonSettings'
});
/**
* Customizing colors for individual countries
*/
polygonGroup.data.setAll(
this.mapService.countries.map(country => ({
id: country.id,
polygonSettings: {
fill: am5.color(country.fill),
},
})),
);
/**
* Creating personalized labels for partner nations
*/
const dotSet = diagram.series.push(
am5map.ClusteredPointSeries.new(base, {
minDistance: 30,
scatterRadius: 10,
stopClusterZoom: 0.9,
}),
);
dotSet.data.setAll(
this.mapService.countries.map(country => ({
countryCode: country.id,
img: country.img,
geometry: country.geometry,
})),
);
dotSet.bullets.push(
(_: Root, _2: Series, dataItem: DataItem<IMapPointSeriesDataItem>): Bullet => {
const { countryCode, img } = dataItem.dataContext as IMapData;
const container = am5.Container.new(base, {
cursorOverStyle: 'pointer',
interactive: true,
html: `
<div class="country-label">
<img src="${img}" alt="img">
${countryCode}
</div>
`,
x: am5.percent(50),
centerX: am5.percent(50),
});
container.events.on('pointerover', () => { // The issue persists
container.set('html', '<div>text</div>');
});
container.events.on('pointerout', () => { // Still not functioning as desired
container.set('html', '<div>text</div>');
});
container.events.on('click', function (ev) { // Works perfectly
console.log(12345);
container.set('html', '<div>text</div>');
});
return am5.Bullet.new(base, {
sprite: container,
});
},
);
/**
* Merging various labels.
*/
dotSet.set('clusteredBullet', function (base) {
const container = am5.Container.new(root, {
cursorOverStyle: 'pointer',
});
/**
* Utilizing a rounded-corner background rectangle for the cluster digit
*/
container.children.push(
am5.RoundedRectangle.new(base, {
width: 60,
height: 28,
dx: -30,
dy: -13,
cornerRadiusBL: 38,
cornerRadiusBR: 38,
cornerRadiusTL: 38,
cornerRadiusTR: 38,
fill: am5.color(0x111111),
fillOpacity: 0.3,
brightness: 0,
crisp: true,
stroke: am5.color(0x171b2c),
}),
);
/**
* Implementing a background rectangle for a blur effect
*/
container.children.push(
am5.RoundedRectangle.new(base, {
width: 64,
height: 34,
dx: -31,
dy: -14,
cornerRadiusBL: 38,
cornerRadiusBR: 38,
cornerRadiusTL: 38,
cornerRadiusTR: 38,
fill: am5.color(0x111111),
blur: 3,
fillOpacity: 0.55,
}),
);
/**
* Including a Label for the digit display
*/
container.children.push(
am5.Label.new(base, {
centerX: am5.p50,
centerY: am5.p50,
fill: am5.color(0xffffff),
populateText: true,
fontSize: 16,
text: '+{value}',
}),
);
/**
* Enabling region zoom on cluster click
*/
container.events.on('click', function (e: am5.ISpritePointerEvent) {
dotSet.zoomToCluster(e.target.dataItem);
});
return am5.Bullet.new(base, {
sprite: container,
});
});
I utilized container.events.on to attach events. Unfortunately, while click functionality performs correctly, pointerover fails to operate as expected.