Cartograph

Available upon request, our Cartograph component allows you to sync a mapped image with a set of slides and clickable modals. This component is supported by all of our ad formats.

In this article, you will learn:

How to Prep Your Ad for the Cartograph

How to Add the Cartograph Map and Slider Components

How to Configure the Cartograph Map Component

How to Modify the Design for the Cartograph Map Component

How to Configure the Cartograph Slider Component

How to Modify the Settings for the Cartograph Slider Component

How to Insert Imagery and Components into the Modal Screens for the Cartograph

How to Prep Your Ad for the Cartograph

Below you will find a step-by-step process to set up your ad for the Cartograph Map and Slider components:

1. Choose the ad format and dimensions of the ad unit you wish to add the Cartograph components to.  For guidance on building specific formats, check out this article.
2. In this example, we are selecting Banner as the format, and entering the dimensions 970x415:
   
   
   
   
3. Once your canvas loads, we'll determine how much of the canvas will include the map image and the map component. In this example, we'd like the left side map image to take up the majority of the canvas, so we've sized our map image to 724x415 and uploaded it to the canvas here:
   
   
   
   
4. The space on the right side of the canvas will contain our Cartograph Slider, so we'll leave this area empty for now.
5. Next, we'll need to determine how many modals to include in the unit, and the modal dimensions. We'll add additional screens to the unit to insert the modal imagery. To add additional screens, navigate to the Screens & Layers panel in the bottom left corner of the builder and click the plus sign (+) to add a new screen:
   
   
   
   
6. A new blank screen 2 will be created, sized to the dimensions of screen 1:
   
   
   
   
7. With screen 2 selected, navigate to the General Properties panel in the upper right corner of the builder. Here we'll adjust the dimensions of screen 2. This will be the dimensions of the first modal screen. The screens can be sized to any dimensions you would like. For this example, we'll enter 300x230 for the screen 2 size, and we'll use the same dimensions for all modal screens, but you can adjust each modal screen size based on preference:
   
   
   
   
8. Now that we have determined the size of our modals, we can add additional screens for all modals/imagery. With screen 2 selected, add as many modals as needed for your ad. In this example, we're including 5 modals total, so we'll add 4 more screens (using the + icon) until we have 6 screens total in the ad:
   
   
   * Note - Since we added these new screens from screen 2, the additional screen dimensions will be copied and based on the input screen 2 dimensions (300x230), so we won't need to resize these additional screens.
9. Click the brackets on either side of the screen labels to view the additional screens and navigate between them in the unit: 
   
   
   
   
10. You can also easily rename screens for easier reference by clicking into the screen name and entering a new name for each:
    
    
    
    
    
11. Now that we have added our additional modal screens, we can navigate back to screen 1 to add the Cartograph Map and Cartograph Slider components.

 

How to Add the Cartograph Map and Slider Components

1. From the left menu, hover over the components icon ,  then hover over Cartograph, and select Cartograph Map:
   
   
   
   
2. The Cartograph Map component will load in the upper left corner of your canvas as a 300x250 transparent box, containing the image of a "1". You'll also find the Cartograph Map configuration menu on the right side of the builder, when the Cartograph Map is selected on your canvas:
   
   
   
   
3. Scale the map to cover the entire map image on the left side of the canvas:
   
   
   
   
4. Next, we'll add the Slider component to the right side of the canvas by navigating back to the left menu. Hover over the components icon ,  then hover over Cartograph, and select Cartograph Slider:
   
   
   
   
5. The Cartograph Slider component will load in the upper left corner of your canvas as a 300x250 transparent box. You'll also find the Cartograph Slider configuration menu on the right side of the builder, when the Cartograph Slider is selected on your canvas:
   
   
   
   
6. Scale the slider to cover the empty area on the right side of the canvas:
   
   

How to Configure the Cartograph Map Component

The Build menu of the Cartograph Map component will determine how many "Hotspots" are added over the map image, and which modal screens sync with each Hotspot over the map image:


The Cartograph Map component Build configuration options are explained below:

Hotspots	The clickable numbers on the canvas which will open the modals synced to the Cartograph Slider.
Select Hotspot Image (optional)	Add custom images for each of the "Hotspot" icons, if desired. If nothing is inserted in these fields, our default numbers will display.
Left	Set left padding/X coordinate of where the selected Hotspot image will be located on the canvas. You can also click and drag the Hotspot images directly on your canvas, and the Left padding/X coordinate will display in this field.
Top	Set left padding/Y coordinate of where the selected Hotspot image will be located on the canvas. You can also click and drag the Hotspot images directly on your canvas, and the Top padding/Y coordinate will display in this field.
Modal Screen	Select the screen which will contain the imagery for this corresponding Hotspot. If no additional screens are available, add new screens to your ad (sized to your desired modal dimensions) by following steps 5-9 in the first section of this article.
Open Modal Screen on Load	This is unchecked by default. If checked, the modal screen corresponding to this associated Hotspot will display as soon as the unit loads.

 

1. For this example, we're including 5 map icons, and each icon will correspond to each specific modal that we created in steps 5-9 of the first section of this article.
2. To connect each modal screen to each map icon, add the correct number of Hotspots to accommodate each modal by clicking the in the top right corner of the menu. For this example, we'll include 5 Hotspots, to correspond with the 5 modal screens we created:
   
   
   
   
3. Next, select the corresponding modal screen for each map Hotspot by selecting the "Modal Screen" from the dropdown menu for each map icon:
   
   
   
   
4. Once all Hotspots have a corresponding Modal Screen selected, we can arrange the Hotspots on the canvas to determine where each Hotspot will be located and click out to each Modal. You can do this either by adjusting the Left and Top positioning for each Hotspot in the right side menu, or by clicking and dragging the number icons directly on the canvas and positioning as desired:
   
   
   
   
5. Once this is completed, we'll move on to modify the design of the Cartograph Map.

How to Modify the Design for the Cartograph Map Component

The Cartograph Map Design menu is explained below:

1. The Settings menu will determine the width of the map icons. By default, the width is set to 35px, but this can be adjusted by clicking into the Width field and entering a new number. For this example, we will keep the numbers 35px wide:
   
   
   
   
2. Once the width of the Hotspots are adjusted (if needed), we'll move on to configure the Cartograph Slider within the next section.

How to Configure the Cartograph Slider Component

The Build menu of the Cartograph Slider component will determine how many slides are added to the slider, the imagery included for each slide, the hover image for each slide (optional), and the clickthrough for each slide.

The Cartograph Slider component Build configuration options are explained below:

1. For this example, we're including 5 map icons, and each icon will correspond to each specific modal that we created in steps 5-9 of the first section of this article.
2. With the slider selected, add the correct number of slides to accommodate each modal by clicking the in the top right corner of the menu. For this example, we'll include 5 slides, to correspond with the 5 modal screens we created, and select the Slide Image that will display for each slide:
   
   
   
   
3. We'll then select the Hover Image for each slide by clicking into each Hover Image field and selecting the desired Hover Images from the asset panel:
   
   
   
   
4. Once this is completed, we'll move on to modify the Settings for the Cartograph Slider.
   
   

How to Modify the Settings for the Cartograph Slider Component

The Cartograph Slider Settings will adjust the display settings for this component.

The Cartograph Slider component Settings are explained below:

 

How to Insert Imagery and Components into the Modal Screens

Once you have completed the configuration of the Cartograph Map and Cartograph Slider, we are ready to add content to the modal screens we created in steps 5-9 of the first section in this article.

1. Navigate to each Modal screen in the Screens & Layers panel to insert the desired images, videos, or additional components that you would like to display in each Modal. Each modal can support images, GIFs, video, audio, or any of our other components except for the Parallax Carousel.
2. For this example, we are including blurbs of text with the corresponding modal number, and adding a 1px white border to all modal screens:
   
   
   
   * Note - If you would like each of the modals to have a separate clickthrough link, you can add Hitboxes to each modal, with an Open URL Action added:
   
   
   
   
3. Once you have added all required imagery and clickthroughs (if applicable) to each modal and have finished configuring all settings for the Map and Slider, Save and Preview your ad unit.