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

1. Install from Forge and add a dependency to the HERE_Map block and the Map_* actions.
2. Store your HERE API key (e.g. a Site Property) and pass it to the block.
3. Place HERE_Map on a screen; set Center and Zoom.
4. Handle the block's map-ready event to capture the map object, and keep it in a screen variable.
5. 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.

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.