Map Dynamic QR

Overview 
 The Map Navigation QR configuration is used to place a Dynamic Map QR at a specific position on a background image and control the map and navigation movement within a defined segment. 
 The configuration primarily uses: 
 
 Background Image 
 Width 
 Height 
 Padding 
 Map (cx, cy) 
 Map Navigation (cx, cy) 
 Vertical (cx, cy) 
 
 Correct configuration of these values ensures that the Dynamic Map QR, map, and navigation elements are displayed at the required position. 
 
 Background Image 
 The Background Image is the image used as the base for the Map Navigation interface. 
 Any image configured through the Modules section can be used as the background image. The configured image will be displayed in the Map Navigation interface. 
 Background Image Behaviour 
 The image configured in the relevant module is displayed as the background image for Map Navigation. 
 Modules
 ↓
Configured Image
 ↓
Map Navigation
 ↓
Background Image
 
 Width and Height 
 The Width and Height values define the dimensions of the background image used for Map Navigation configuration. 
 The Width and Height should correspond to the actual dimensions of the background image. 
 Width 
 Width represents the horizontal dimension of the background image. 
 For example, if the background image width is 1000 px : 
 Width = 1000
 
 Height 
 Height represents the vertical dimension of the background image. 
 For example, if the background image height is 600 px : 
 Height = 600
 
 Example 
 If the background image dimensions are: 
 Width = 1000 px
Height = 600 px
 
 
 Important: The Width and Height should match the actual dimensions of the background image for accurate coordinate and padding calculations. 
 
 Coordinate System 
 Coordinates are used to identify the exact position of an element within the background image. 
 Coordinates are represented in the following format: 
 (X, Y)
 
 Where: 
 
 X represents the horizontal position. 
 Y represents the vertical position. 
 
 For example: 
 (200, 400)
 
 means: 
 X = 200
Y = 400

(0,0)
 ┌───────────────────────────────→ X
 │
 │
 │
 │
 ↓
 Y

 
 Dynamic Map QR 
 The Dynamic Map QR is placed at a specific position inside the background image. 
 To position the QR accurately, its coordinates must first be identified from the background image. 
 The QR position can be identified using two main points: 
 
 Top-Left Coordinate 
 Bottom-Right Coordinate 
 
 For example: 
 Top-Left = (200, 400)
Bottom-Right = (300, 450)
 
 These coordinates are then used to calculate the required padding values. 
 
 Padding 
 Padding is used to position the Dynamic Map QR correctly inside the background image. 
 The padding configuration consists of: 
 
 Padding Left 
 Padding Top 
 Padding Right 
 Padding Bottom 
 
 The padding values are calculated using the QR coordinates and the background image dimensions. 
 
 Padding Left 
 Padding Left represents the horizontal distance between the left edge of the background image and the left edge of the Dynamic Map QR. 
 The X-coordinate of the QR's left side is used as the Padding Left value. 
 Formula 
 Padding Left = QR Left X Coordinate
 
 Example 
 If the QR starts at: 
 X = 200
Y = 400

Then:

Padding Left = 200
 
 Padding Top 
 Padding Top represents the vertical distance between the top edge of the background image and the top edge of the Dynamic Map QR. 
 The Y-coordinate of the QR's top side is used as the Padding Top value. 
 Formula 
 Padding Top = QR Top Y Coordinate
 
 Example 
 If the QR starts at: 
 X = 200
Y = 400

Then

Padding Top = 400
 
 Padding Right 
 Padding Right represents the horizontal distance between the right edge of the Dynamic Map QR and the right edge of the background image. 
 To calculate Padding Right, subtract the QR's right-side X-coordinate from the total background image width. 
 Formula 
 Padding Right = Background Image Width - QR Right X Coordinate
 
 Example 
 Suppose:

Background Image Width = 1000 px
QR Right X Coordinate = 300

Then:

Padding Right = 1000 - 300

Padding Right = 700

Therefore:

Padding Right = 700
 
 Padding Bottom 
 Padding Bottom represents the vertical distance between the bottom edge of the Dynamic Map QR and the bottom edge of the background image. 
 To calculate Padding Bottom, subtract the QR's bottom-side Y-coordinate from the total background image height. 
 Formula 
 Padding Bottom = Background Image Height - QR Bottom Y Coordinate
 
 Example 
 Suppose:

Background Image Height = 600 px
QR Bottom Y Coordinate = 450

Then:

Padding Bottom = 600 - 450

Padding Bottom = 150

Therefore:

Padding Bottom = 150
 
 Complete Padding Example 
 Suppose the background image dimensions are: 
 Width = 1000 px
Height = 600 px
 
 The Dynamic Map QR coordinates are: 
 Top-Left = (200, 400)
Bottom-Right = (300, 450)
 
 The padding values will be calculated as follows: 
 Padding Left 
 Padding Left = 200
 
 Padding Top 
 Padding Top = 400
 
 Padding Right 
 Padding Right = 1000 - 300
Padding Right = 700
 
 Padding Bottom 
 Padding Bottom = 600 - 450
Padding Bottom = 150
 
 Final Padding Configuration 
 Padding Left = 200
Padding Top = 400
Padding Right = 700
Padding Bottom = 150
 
 Padding Calculation Summary 
 
 
 
 Padding 
 Calculation 
 
 
 
 
 Padding Left 
 QR Left X Coordinate 
 
 
 Padding Top 
 QR Top Y Coordinate 
 
 
 Padding Right 
 Background Image Width - QR Right X Coordinate 
 
 
 Padding Bottom 
 Background Image Height - QR Bottom Y Coordinate 
 
 
 
 
 Map (cx, cy) 
 The Map (cx, cy) configuration controls the movement and positioning of the complete map within the defined segment. 
 It is used when the entire map needs to be moved or positioned so that the required area of the map is displayed inside the segment. 
 The (cx, cy) values define the position or movement of the map. 
 Where: 
 cx = Horizontal movement/position
cy = Vertical movement/position

 
 Example 
 Map (cx, cy) = (500, 300)

Here:

cx = 500
cy = 300
 
 The map will be positioned or moved according to these coordinate values while remaining within the defined segment. 
 Purpose 
 Map (cx, cy) is used to control: 
 
 The overall movement of the map. 
 The position of the map within the segment. 
 Which portion of the map should be visible. 
 How far the map should move horizontally and vertically. 
 
 
 Map Navigation (cx, cy) 
 The Map Navigation (cx, cy) configuration is used for the navigation movement that is displayed when the user clicks Take Me There . 
 When Take Me There is selected, the map moves along the navigation path and displays the navigation route. 
 The (cx, cy) values determine where the navigation should be positioned and displayed during this movement. 
 Where: 
 cx = Horizontal navigation position
cy = Vertical navigation position
 
 Example 
 Map Navigation (cx, cy) = (450, 250)

Here:

cx = 450
cy = 250
 
 These values determine where the navigation view should be positioned within the defined navigation area. 
 Purpose 
 Map Navigation (cx, cy) is used to control: 
 
 Where the navigation is displayed. 
 How the map is positioned during navigation. 
 The visible area while moving through the navigation path. 
 The position of the navigation view when using Take Me There . 
 
 
 Vertical (cx, cy) 
 The Vertical (cx, cy) configuration is used when the map or navigation needs to be positioned or displayed vertically. 
 It determines the required position of the map/content when the vertical positioning is required. 
 Where: 
 cx = Horizontal position
cy = Vertical position
 
 Example 
 Vertical (cx, cy) = (300, 500)

Here:

cx = 300
cy = 500
 
 These values determine the required vertical positioning of the map or navigation content. 
 Purpose 
 Vertical (cx, cy) is used to control: 
 
 Vertical positioning of the map. 
 Positioning of content in a vertical layout. 
 The visible area of the map in vertical navigation. 
 Alignment of the map within the defined segment. 
 
 
 Difference Between Map, Map Navigation and Vertical 
 
 
 
 Configuration 
 Purpose 
 
 
 
 
 Map (cx, cy) 
 Controls the overall movement and positioning of the complete map within the segment. 
 
 
 Map Navigation (cx, cy) 
 Controls the positioning of the map/navigation view when using Take Me There . 
 
 
 Vertical (cx, cy) 
 Controls the positioning of the map/content for vertical display or movement. 
 
 
 
 
 Background Image and Module Configuration 
 The background image used in Map Navigation is obtained from the image configured in the relevant Module . 
 Any image added to the Modules section can be displayed as the background image. 
 For example: 
 Module
 ↓
Add/Configure Image
 ↓
Image is displayed in Map Navigation
 
 This means the Map Navigation background is not limited to a single fixed image. The image configured for the relevant module is used accordingly. 
 Dynamic Map QR Placement Workflow 
 Follow the steps below to configure the Dynamic Map QR accurately: 
 
 Select the required background image. 
 Check the actual Width of the image. 
 Check the actual Height of the image. 
 Enter the image Width and Height in the configuration. 
 Identify the Top-Left coordinate of the Dynamic Map QR. 
 Identify the Bottom-Right coordinate of the Dynamic Map QR. 
 Set Padding Left using the QR's left X-coordinate. 
 Set Padding Top using the QR's top Y-coordinate. 
 Calculate Padding Right using the background image width. 
 Calculate Padding Bottom using the background image height. 
 Configure Map (cx, cy) according to the required map movement. 
 Configure Map Navigation (cx, cy) according to the required Take Me There navigation position. 
 Configure Vertical (cx, cy) when vertical positioning is required. 
 Save the configuration. 
 Verify the Dynamic Map QR and navigation position on the Map Navigation screen. 
 
 
 Configuration Example 
 Assume the background image has the following dimensions: 
 Width = 1000 px
Height = 600 px
 
 The Dynamic Map QR has the following coordinates: 
 Top-Left = (200, 400)
Bottom-Right = (300, 450)
 
 Width and Height 
 Width = 1000
Height = 600
 
 Padding 
 Padding Left = 200
Padding Top = 400
Padding Right = 1000 - 300 = 700
Padding Bottom = 600 - 450 = 150

 
 Final Configuration 
 Width = 1000
Height = 600

Padding Left = 200
Padding Top = 400
Padding Right = 700
Padding Bottom = 150
 
 Map positioning can then be configured according to the required movement: 
 Map (cx, cy) = (500, 300)
Map Navigation (cx, cy) = (450, 250)
Vertical (cx, cy) = (300, 500)
 
 The (cx, cy) values are example values and should be configured according to the required map and navigation position. 
 Configuration Flow 
 Background Image
 ↓
Check Image Width & Height
 ↓
Identify QR Coordinates
 ↓
Calculate Padding
 ↓
Configure Dynamic Map QR
 ↓
Configure Map (cx, cy)
 ↓
Configure Map Navigation (cx, cy)
 ↓
Configure Vertical (cx, cy) if required
 ↓
Save Configuration
 ↓
Verify Map Navigation

 
 Important Notes: 
 
 The Width and Height should match the actual dimensions of the background image. 
 The QR coordinates should be identified from the actual background image. 
 Padding Left is calculated from the QR's left X-coordinate. 
 Padding Top is calculated from the QR's top Y-coordinate. 
 Padding Right is calculated by subtracting the QR's right X-coordinate from the background image width. 
 Padding Bottom is calculated by subtracting the QR's bottom Y-coordinate from the background image height. 
 Map (cx, cy) controls the overall movement and positioning. 
 Map Navigation (cx, cy) controls the map/navigation positioning during Take Me There navigation. 
 Vertical (cx, cy) controls the positioning of the map/content when vertical positioning is required. 
 Images configured through the Modules section are displayed as the corresponding background images in Map Navigation. 
 Coordinate values should be checked carefully to ensure accurate QR placement and map positioning. 
 Any change in the background image dimensions may require the Width, Height, and Padding values to be recalculated.