Whenever a country is picked, we just pass the selected variable through to our drawScene() function that draws the world at each mouseover:
// ...
selected = inGlobe && pickedColor[3] === 255 ? pickedColor[0] : false;
requestAnimationFrame(function() {
renderScene(countries, selected);
});
} // highlightPicking()
At the end of our highlight handler, we didn’t only pass the countries to our render function, we also sent our newly created selected on the way. The renderScene() function just passes it through to drawScene(), which draws the world to the buffer Canvas. Remember that renderScene() just calls drawScene(), then clears the main Canvas and copies the buffer image over to the main Canvas.
In drawCanvas(), we will add a single block:
function drawScene(countries, countryIndex) {
// Clear …
// Sphere fill …
// Grid …
// Country fill …
// Country stroke - each country ….
// Country stroke - hovered country
if (countryIndex >= 0) {
bufferContext.beginPath();
bufferContext.setLineDash([4,2]);
bufferPath(countries.features[countryIndex]);
bufferContext.lineWidth = 1;
bufferContext.strokeStyle = '#777';
bufferContext.stroke();
bufferContext.setLineDash([]);
}
}
We will receive the selected index via the countryIndex argument and check whether it's larger or equal to 0 (remember, that would be Afghanistan). If so, we draw a dashed path around the country. How do we know which country? We access the right country via countries.features[countryIndex] and draw it accordingly. The mind boggles:
