Below is a suggested parameter list as exposed by the demo UI.

Theme and Colors

Theme (Text or Static Entity)

• Values: Default, Dark, Ocean, Forest, Sunset, Neon
• Description: Predefined style for background, land, borders, water, and markers.

BackgroundColor (Text)

• Overrides the map background color (hex or CSS color string).

LandDefaultColor (Text)

• Default fill color for countries.

LandHoverColor (Text)

• Fill color when user hovers over a country.

BorderColor (Text)

• Color of country borders.

WaterColor (Text)

• Color of oceans and seas.

MarkerDefaultColor (Text)

• Default color for markers on the map.

All custom colors are optional. When not set, the selected Theme colors are used.

Dimensions

MapHeightPx (Integer)

• Range: 300–1000
• Height of the map container in pixels.

Zoom Settings

MinZoom (Decimal)

• Range: 0.5–2
• Minimum zoom level allowed.

MaxZoom (Decimal)

• Range: 4–16
• Maximum zoom level allowed.

InitialZoom (Decimal)

• Range: 0.5–4
• Zoom level applied on first render.

ZoomSpeed (Decimal)

• Range: 0.05–0.5
• Sensitivity of zoom interactions.

Interaction Settings

EnableHover (Boolean)

• Enables country highlighting on hover.

EnableClick (Boolean)

• Enables click interactions on countries.

EnableZoom (Boolean)

• Enables zoom controls.

EnablePan (Boolean)

• Enables drag-to-pan.

ShowTooltip (Boolean)

• Displays tooltips (e.g., country name).

ClickAnimation (Boolean)

• Plays animation on click.

KeyboardNavigation (Boolean)

• Enables keyboard accessibility.

Marker Settings

MarkerSize (Integer)

• Range: 4–20
• Base radius for markers.

MarkerStyle (Text or Static Entity)

• Values: Circle, Pin, Square
• Visual style of markers.

ShowMarkerLabels (Boolean)

• Toggles marker labels visibility.

The demo shows markers at:

• New York City
• London
• Tokyo
• Sydney
• New Delhi
• Russia

Border Settings

BorderWidth (Decimal)

• Range: 0.1–3
• Stroke width for country borders.

Performance Settings

EnableShadows (Boolean)

• Enables shadows (may impact performance).

EnableGradients (Boolean)

• Enables gradient fills (may impact performance).

3. Usage in OutSystems

3.1 Basic Embedding

1. Drag the WorldMap web block into your screen.
2. Set required parameters: Theme, MapHeightPx, and zoom settings.
3. Optionally bind advanced options to configuration entities.

Example Configuration

• Theme: Dark
• MapHeightPx: 600
• MinZoom: 1
• MaxZoom: 8
• InitialZoom: 1
• ZoomSpeed: 0.1

3.2 Configuring Interactions

• Set EnableHover + ShowTooltip to True for hover feedback.
• Set EnableClick to True and implement OnCountryClick.
• Keep EnableZoom and EnablePan enabled for dashboards.
• Disable interactions for static maps.

4. Markers

4.1 Marker Data (Suggested Pattern)

A recommended approach is exposing a Markers input list with:

Structure Fields:

• Latitude (Decimal)
• Longitude (Decimal)
• Label (Text)
• Color (Text, optional)
• Size (Integer, optional)
• IconType (Text, optional)

4.2 Marker Styling

• MarkerSize sets global default.
• Individual markers may override size.
• MarkerStyle applies globally.
• MarkerDefaultColor is fallback color.
• ShowMarkerLabels toggles all labels.

5. Events and Integrations

Common Events

OnCountryHover

• Outputs: CountryCode, CountryName

OnCountryClick

• Used to filter data or navigate.

OnMarkerClick

• Triggered when marker is clicked.

OnViewportChange

• Triggered when zoom/pan changes.

6. Theming and Customization

6.1 Built-in Themes

• Default – Neutral
• Dark – Dashboard-friendly
• Ocean – Blue palette
• Forest – Green palette
• Sunset – Warm tones
• Neon – High-contrast style

Each theme sets defaults for background, land, borders, water, and markers.

6.2 Overriding Colors

• Use BackgroundColor to match layout background.
• Adjust LandDefaultColor and LandHoverColor for branding.
• Tune WaterColor and BorderColor for accessibility.

7. Performance Considerations

• Disable EnableShadows and EnableGradients for better FPS.
• Avoid extreme MaxZoom values.
• Limit marker count for dense datasets.

8. Recommended Defaults (Dashboard Setup)

• Theme: Dark
• MapHeightPx: 600
• MinZoom: 1
• MaxZoom: 8
• InitialZoom: 1
• ZoomSpeed: 0.1
• EnableHover: True
• EnableClick: True
• EnableZoom: True
• EnablePan: True
• ShowTooltip: True
• ClickAnimation: True
• KeyboardNavigation: True
• MarkerSize: 8
• MarkerStyle: Circle
• ShowMarkerLabels: True
• BorderWidth: 0.5
• EnableShadows: True (disable if performance issues)
• EnableGradients: True (disable if performance issues)