Skip to main content

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:

  1. Select the required background image.
  2. Check the actual Width of the image.
  3. Check the actual Height of the image.
  4. Enter the image Width and Height in the configuration.
  5. Identify the Top-Left coordinate of the Dynamic Map QR.
  6. Identify the Bottom-Right coordinate of the Dynamic Map QR.
  7. Set Padding Left using the QR's left X-coordinate.
  8. Set Padding Top using the QR's top Y-coordinate.
  9. Calculate Padding Right using the background image width.
  10. Calculate Padding Bottom using the background image height.
  11. Configure Map (cx, cy) according to the required map movement.
  12. Configure Map Navigation (cx, cy) according to the required Take Me There navigation position.
  13. Configure Vertical (cx, cy) when vertical positioning is required.
  14. Save the configuration.
  15. 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.
Back to top