Interactive Map Slider

Overview / Purpose  

• This component is a configurable, interactive map-based slider designed to display region-based content within a structured slide experience. 

• The module consists of multiple main slides representing a global and regional view. Each slide corresponds to a selectable region on the map. 

• Core Functionality 

  • Built-in auto-slide functionality for automated transitions 

  • Manual navigation via clickable or touchable map regions 

  • Synchronized interaction between the map and the active slide 

• Interactive Map Behavior 

  • The map includes multiple interactive regions, each with its own default highlight color. 

  • On hover, regions change to a designated hover state. 

  • When a user selects a specific region: 

  • The corresponding slide becomes active. 

  • The selected region remains highlighted in its original color. 

  • The other regions revert to their default state. 

• Dynamic Slide Content 

  • When a region is selected, the slide content updates dynamically. The content area can include descriptive information, statistics, key figures, visual elements, and relevant links. This allows each region to present tailored content while maintaining a consistent layout and interaction model. 

Best Practices / Usage Guidelines 

• Keep regions visually clear and easy to identify.

• Ensure each region provides concise, relevant content.

• Maintain a consistent slide structure.

• Avoid overcrowding slides with too much information.

• Design for accessibility and touch interaction.

Dimensions & Copy Limits 

• Title text max Character limit: 40 characters 

• Text max Character limit: 400 characters 

• Region title: Maximum 20 characters

• Fixed number of data boxes: 3

• Data labels: Maximum 30 characters

• Links: Maximum 15 characters

• Minimum number of regions: 3

• Maximum number of regions: 6

This module is quite advanced in its structure and functionality. If you are planning to use it, please contact us, the Web Team. We will support you in understanding how the module works and guide you in planning and implementing it in the most effective way.

The sample module is shown below.