Creating Interactive Maps

In this lesson, we’ll review one way to create an interactive map within Ceros. To follow along with this lesson, be sure to upload the build along experience to your account.

We’ve already uploaded a our assets for this lesson in the build along, but let’s get started setting up the canvas:

  • Start by grabbing the “Blip” image and duplicating it a few times on the canvas. Spread these out across your map to indicate where your user can click.
  • Also duplicate your “popup group” to create one popup for each location where we placed a blip (we won’t customize the content in these as it’s just a lesson, but let’s name them popup 1 through 5 in our layers panel to stay organized).
  • In your layers panel, organize all of your popup groups into one folder, and turn the visibility of the popup groups off.
  • Draw out a square shape hotspot over one of the Blips on the canvas, and apply an interaction that says On Click- Show Target and Hide Others- and then choose the first popup in the popups folder.
  • Now duplicate this popup hotspot for each other Blip on the map. Since we’ve already set up the interactions on these, all you need to do is adjust the target to the appropriate popup.
  • Multi select each popup and apply two animations to each: On View- fade in up, and On Hide- fade out down.
  • Lastly, select all of the blips and apply a fade in animation, and an attention seeker animation with a 3 second delay and a one second duration, set to repeat.
  • Hold down command and deselect the first blip in the layers panel, and increase the delay by .2 seconds. For each subsequent blip, increase the delay by .2 seconds more. This will create a nice cascading effect.

If you have any questions while creating your interactive map, feel free to reach out in the chat widget, and be sure to check out our other advanced courses on interactions and animations!