This user guide is your comprehensive resource for leveraging the SVG Mapping component in the DIGIDECK presentation platform. Follow these steps and explore the additional settings to craft engaging presentations with interactive maps.

DISCLAIMER: This component requires a basic understanding of what SVG is used for along with knowledge of HTML/CSS. This component can be intricate to use.

Adding the SVG Mapping Component

1. Navigate or create a slide that you will want this component to be a part of. Click on the "Layout Mode" option in the bottom left corner.

2. Click the "+" Button on the top left to bring up the Component Store Menu.

3. Search for the SVG Mapping Component and select it to add to your slide.

Using the SVG Mapping Component

Overview

The SVG Mapping component enhances presentations with interactive maps. Get acquainted with its features:

To navigate to the component settings, make sure you are in "Layout Mode" and click the "Layers" option to see the components that you currently have on your slide. Select the "SVG Mapping Component" and a settings icon should show up. Click on that to view the Component Settings.

Explore the component's settings for advanced customization:

Map HTML:
- Specify SVG file with classes on elements that you want to be always selectable or configurable in configuration mode.
- Selectable Elements:
  - Certain elements may be always selectable.
  - These elements cannot be configured to be non-selectable.
  - They are specified with a selectable class on the respective element.
  - <circle class="selectable" id="mn-dot" fill="#FF6F00" cx="1172.9" cy="560.5" r="19.1"></circle>
- Configurable Elements:
  - Certain elements may be configured in Configuration Mode.
  - These elements will be non-selectable by default.
  - They are specified with a configurable class on the respective element.
  - <circle class="configurable" id="ny-dot" fill="#FF6F00" cx="1778.5" cy="561.2" r="19.1"></circle>
Scope to Slide:
- Enable this setting to include the slide ID in the data store key for toggling content. This ensures a scoped and precise control over your interactive elements.
- Scope to slide is disabled by default.
Enable Configuration:
- This toggle allows you to enter Configuration Mode, where you can select elements to be selectable by the presentation viewer. Elements chosen in Configuration Mode will be selectable even when Configuration Mode is disabled.
- Configuration mode is enabled by default.

UI Buttons for Configuration Mode

Navigate seamlessly with these UI buttons:

Gear Icon:
- Appears in Viewer Mode. This switches the component to Configuration Mode, allowing you to select elements for configuration.
X Icon:
- Switches the component to Viewer Mode, making it ready for presentations. Viewer Mode retains the configuration made in Configuration Mode.
Select All Button:
- Appears only in Configuration Mode. Selects all elements for configuration at once.
Clear Button:
- Appears only in Configuration Mode. Clears all previous configurations, allowing you to start fresh.

Adding Interactive Displays

Toggle Visibility:
- Enable the visibility toggle for the component on your slide. To do this, click the "Wrench" icon on the top right icon which brings up a new menu.
Set Visibility Key:
- Assign an SVG element ID as a visibility key for the component.
- <circle class="configurable" id="ny-dot" fill="#FF6F00" cx="1778.5" cy="561.2" r="19.1"></circle> The visibility key triggered by this element is ny-dot
Default Hidden Elements:
- For an optimal experience, set display components to be hidden by default.

Styling Classes

Add visual queues to the state of your SVG map with styling classes:

dd-configurable (Configuration Mode):
- Indicates elements that are configurable, but are not selected in Configuration Mode.
dd-selectable (Both Modes):
- Indicates elements that can be selected as active by the viewer.
dd-active (Viewer Mode):
- Highlights elements selected by the viewer in Viewer Mode.

Example Style Tag

  <style>
    .dd-edit-mode .dd-configurable:hover {
      stroke: #fff;
      stroke-width: 0.2vw;
    }
    .dd-edit-mode .dd-selectable:hover {
      stroke: #fff;
      stroke-width: 0.2vw;
    }
    .dd-edit-mode .dd-configurable {
      fill: grey;
      opacity: 0.5;
      pointer-events: all;
    }
    .dd-edit-mode .dd-selectable {
      fill: purple;
      opacity: 1;
      pointer-events: all;
    }
    .dd-edit-mode .dd-active {
      fill: #FF6F00;
      opacity: 1;
      pointer-events: all;
      stroke: #fff;
      stroke-width: 0.2vw;
    }
  </style>