Here Maps Reactive - Documentation (O11)

Stable version 1.2.1 (Compatible with OutSystems 11)

Uploaded

on 17 Aug (22 hours ago)

0.0

(0 ratings)

Documentation

1.2.1

Map height

Both map blocks (interactive and static) take a Height parameter (Text):

Set the height of the map in pixels ("300px"), percentage ("100%") or viewport height ("100vh"). If the value is empty, the map fits to the parent height.

If using percentages, make sure the map has a parent with a fixed height value, otherwise its height will be 0 (zero).

The value is applied to a CSS variable used by the component's container, so it can also be overridden from your CSS theme.

Examples

"420px" — fixed height.
"100%" — fill the parent (the parent must have a fixed height).
"100vh" — full viewport height.
empty — inherit the parent's height.

Theme override — target the map container and set the height (or the variable) in your theme:

.map-container {

height: 500px;

width: 100%;

}

This matches the height behaviour of OutSystems Maps, so screens can be laid out the same way.

Static map block

The static map is now sized from its container instead of fixed pixel inputs, and it takes a coordinates value for the center.

Inputs

Input	Type	Notes
ApiKey	Text	HERE key (a domain-restricted browser key is fine — see Keys)
Center	Coordinates	Map center (latitude + longitude)
Zoom	Integer	Zoom level
Height	Text	CSS height, as described above

Behaviour

The block requests the map image at the container's actual rendered size (accounting for high-DPI screens), so the image is crisp and fills the area. When the container resizes, the image re-fits automatically. No pixel dimensions are specified by hand.

Migrating from the previous static map

Before	Now
Latitude + Longitude	Center (coordinates)
WidthPx + HeightPx	Height (CSS) — resolution is derived from the container

To migrate a screen: build a Center from the old latitude/longitude and bind it; remove WidthPx/HeightPx and set Height (e.g. "300px", "100%", or empty to fit the parent).

1.2.0

A Reactive Web/Mobile component to embed HERE maps in OutSystems 11: an interactive map (pan/zoom), markers, an info bubble, turn-by-turn routing (HERE Routing v8), map events, plus geocoding (address ↔ coordinates) and static map images. It builds on the HERE Maps API for JavaScript, loaded on demand from HERE's CDN.

Requirements

A HERE API key — create a free account at platform.here.com and generate a key. For the in-browser map, restrict the key to your app's domain(s).
OutSystems 11 (Reactive Web or Mobile).

Quick start

Install from Forge and add a dependency to the HERE_Map block and the Map_* actions.
Store your HERE API key (e.g. a Site Property) and pass it to the block.
Place HERE_Map on a screen; set Center and Zoom.
Handle the block's map-ready event to capture the map object, and keep it in a screen variable.
Pass that map object to any Map_* action.

The HERE_Map block

Inputs

ApiKey — your HERE key.
Center — starting coordinates (Lat/Lng).
Zoom — initial zoom (default 14).
Style — normal (default), satellite, or terrain.
HeightPx — map height in pixels.

Events

Map ready — returns the map object; store it and pass it to actions.
Map error — connectivity/SDK failure (show a fallback).
Center changed — fires after the user pans/zooms.
Map tap — returns the tapped geo coordinates.

Actions

All take the map object captured from the map-ready event.

Action	Purpose
Map_GetCenter	Current center (Lat/Lng)
Map_SetCenter	Recenter the map
Map_SetZoom	Set zoom level
Map_Resize	Re-fit after the container becomes visible (hidden tab/modal)
Map_AddMarker	Add a marker — custom icon (SVG or URL), optional recenter, optional tap bubble
Map_RemoveMarker / Map_ClearMarkers	Remove one / all added markers
Map_ShowInfoBubble / Map_HideInfoBubble	Show (single, repositioning) / hide the info bubble
Map_ShowRoute	Draw a route between two waypoints; returns a structured route
Map_ClearRoute	Remove the current route

Routing

Map_ShowRoute takes an Origin and Destination waypoint (each a label + position) and draws the route on the map. It returns a Route you can bind directly:

Summary — total distance (m) and duration (s).
Waypoints — origin/destination with labels and positions.
Sections — per-leg detail (mode, distance, duration, geometry).
Maneuvers — turn-by-turn steps, each with an instruction and a position (bind to a List for directions).

Enable maneuver markers to drop a pin per step; tapping one recenters and shows its instruction in the bubble.

Notes

Connectivity: the map needs a connection — the HERE SDK and tiles load online. Non-map screens are unaffected.
SDK: HERE Maps API for JavaScript v3.2, loaded on first map use.
Coordinates are passed to/from actions as JSON; sample structures are provided.

Geocoding & static map

GeocodeAddress — address → coordinates (+ formatted address).
ReverseGeocode — coordinates → address.
Static map — a HERE map image (Map Image API v3) for a given center, zoom, and size; use it in an Image widget or as a lightweight, non-interactive preview.

Use a separate, server-side HERE key for these (not the domain-restricted map key). A key restricted by Trusted Domains returns 401 "not from an authorized source" on server-side REST calls, because those have no browser origin to match.