Lookup
Clicking on the globe highlights the country in a random color with a random alpha. The color is overlayed onto the base image texture.
Demonstrates:
- IcosphereLookup
- Highlighting regions on click
Instructions
Step 1: Setup a GlobeKitView with an IcosphereLookup drawable
const gkOptions = {
apiKey,
wasmPath: './gkweb_bg.wasm',
attributes: {
alpha: false,
},
};
// Create the GlobeKitView object
const gkview = new GlobeKitView(canvas, gkOptions);
//Turn off the ambient motion
gkview.ambientController.isEnabled = false;
// Texture object for Icosphere lookup
const icosphereTextures = {
inactive: './lookup/assets/icosphere_surface.jpg',
active: './lookup/assets/icosphere_surface.jpg',
id: './lookup/assets/worldmap_countries.png',
};
// Create the icosphere and make it interactive
const icosphere = new IcosphereLookup(icosphereTextures);
icosphere.setInteractive(true, true, false);
// Load the country dataset into the icosphere
fetch('./lookup/data/countries.json')
.then((response) => response.json())
.then((data) => {
icosphere.addDataset(data.countries);
gkview.addDrawable(icosphere, () => {
gkview.startDrawing();
});
});
The IcosphereLookup drawable needs 3 textures to draw. Inactive is the base texture, active can be the blend target on selection, id this specifies the regions that are to be highlighted. Each region in our id texture has it's own red color with values [0-255]. This value is the id in the countries.json file, that way we can lookup a region based on the color at that location.
You can generate any type of region you want to highlight via this id texture as long as the id match the json attached to the icosphere.addDataset().
Step 2: Highlight a country onSelection
gkview.onSelection = (list) => {
// Uncomment this line to see the list object
// console.log(list);
// Iterate over the drawables that reported a selection
list.drawables.forEach((el) => {
list.drawables.forEach((el) => {
if (el.obj.id === this.icosphere.id) {
// Generate a random color and alpha
const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
const alpha = Math.random();
// Create a highlightParams object
// Note: How we describe the outDuration and onOutComplete as well.
// This applies to all out animations that will start.
const highlightParams = {
duration: 500,
onComplete: (didFinish) => {
if (didFinish) console.log('IN Finished', el.selection.id);
else console.log('IN Canceled', el.selection.id);
},
outDuration: 2000,
onOutComplete: (didFinish, id) => {
if (didFinish) console.log('OUT Finished', id);
else console.log('OUT Canceled', id);
},
};
// Start the in animation on the selection id
icosphere.highlightId(el.selection.id, color, alpha, true, highlightParams);
}
});
});
};
The last line icosphere.highlightId(el.selection.id, color, alpha, true, highlightParams); is where all the magic happens. The 1st parameter is what id do we want to animate the highlight on. The 2nd and 3rd parameters are the target for the animation to go to. The 4th parameter is tells the other highlighted regions to animate out so there is only 1 highlighted region at a time, true == animateOut false == remain highlighted.
The 5th parameter, highlightParams, describes how the animation(s) should happen. You can set durations and callbacks to fire when they are completed. If the 4th parameter is true the outDuration and onOutComplete will be attached to all highlighted regions that are animating out.
Conclusion
Now when you click on the globe the country should highlight in a random color. Now you can tweak the look and functionality to fit your design.
Source
Source is availible in the examples/lookup
folder in the GlobeKit package