Hi Vasco,
Thanks for the amazing library!
I seem to have encountered a bug. onPolygonClick does not fire when polygonAltitude is set to a higher value: at first things appear to work correctly but stop working if the globe has been rotated.
Below is a reproducible example based on yours.
<head>
<style> body { margin: 0; } </style>
<script src="https://cdn.jsdelivr.net/npm/d3"></script>
<script src="https://cdn.jsdelivr.net/npm/globe.gl"></script>
<!--<script src="../../dist/globe.gl.js"></script>-->
</head>
<body>
<div id="globeViz"></div>
<script>
var world;
const colorScale = d3.scaleSequentialSqrt(d3.interpolateYlOrRd);
// GDP per capita (avoiding countries with small pop)
const getVal = feat => feat.properties.GDP_MD_EST / Math.max(1e5, feat.properties.POP_EST);
fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/ne_110m_admin_0_countries.geojson').then(res => res.json()).then(countries =>
{
const maxVal = Math.max(...countries.features.map(getVal));
colorScale.domain([0, maxVal]);
console.log(countries);
world = Globe()
.globeImageUrl('https://cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
.polygonsData(countries.features)
.polygonAltitude(0.5) // set higher
.polygonCapColor(feat => colorScale(getVal(feat)))
.polygonSideColor(() => 'rgba(0, 100, 0, 0.15)')
.polygonStrokeColor(() => '#111')
.polygonLabel(({ properties: d }) => `
<b>${d.ADMIN} (${d.ISO_A2}):</b> <br />
GDP: <i>${d.GDP_MD_EST}</i> M$<br/>
Population: <i>${d.POP_EST}</i>
`)
.onPolygonClick(hoverD => world // change to on click
.polygonCapColor(d => d === hoverD ? 'steelblue' : colorScale(getVal(d)))
)
.polygonsTransitionDuration(300)
(document.getElementById('globeViz'))
});
</script>
</body>
Hi Vasco,
Thanks for the amazing library!
I seem to have encountered a bug.
onPolygonClickdoes not fire whenpolygonAltitudeis set to a higher value: at first things appear to work correctly but stop working if the globe has been rotated.Below is a reproducible example based on yours.