1. Home
  2. Tutorials
  3. Examples
  4. Lookup

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