Map

A geographic map with live, tag-bindable markers. Tiles are served through the same-origin backend proxy, so the browser never talks to a tile provider directly.

Reach for it when you need:

• Distributed assets — pump stations, tanks, vehicles
• A site-wide overview by location

Component name: OpenStreetMap · Category: Display

In the palette: An OpenStreetMap geographic map with live, tag-bindable markers. Tiles are served through the same-origin backend proxy.

Properties

Any property can be bound to a tag, another component's property, or a query.

Property	Type	Default	Description
lat	number	20	Map center latitude. Bind to a tag to follow an asset.
lng	number	0	Map center longitude.
zoom	number	2	Initial zoom level.
minZoom	number	0	—
maxZoom	number	19	—
tileUrl	string	/api/map/tiles/{z}/{x}/{y}	Tile URL template ({z}/{x}/{y}). Defaults to the same-origin proxy — do not point at a third-party tile server directly.
attribution	string	&copy; <a href="https://www.openstreetmap.org/copyright">Ope… (truncated)	Map attribution (legally required for OSM).
baseLayers	array	[]	Switchable base layers. Empty = use the single tileUrl.
↳ baseLayers.name	string	""	—
↳ baseLayers.url	string	""	Tile template ({z}/{x}/{y}); use the /api/map/tiles/<layer>/… proxy.
↳ baseLayers.attribution	string	""	—
wmsLayers	array	[]	WMS overlays (GIS raster). Reference a WMS server registered in System settings → Map.
↳ wmsLayers.name	string	""	Label shown in the layer control.
↳ wmsLayers.server	string	""	Registered WMS server name (System settings → Map). The proxy URL is built from it.
↳ wmsLayers.layers	string	""	WMS LAYERS param (comma-separated layer names on that server).
↳ wmsLayers.format	string	image/png	—
↳ wmsLayers.transparent	boolean	true	—
↳ wmsLayers.opacity	number	1	—
↳ wmsLayers.version	string	1.1.1	—
interactive	boolean	true	Allow pan/zoom in LiveView (always off in the editor).
showZoomControl	boolean	true	—
showLegend	boolean	true	Show the state legend / per-state filter.
alarmPulse	boolean	true	Pulse the ring on alarm markers in LiveView (respects reduced-motion).
showLocation	boolean	false	Show the viewer's own position (asks browser permission). Off by default.
cluster	boolean	false	Group nearby markers into count bubbles for large fleets (cluster inherits the worst child state).
clusterRadius	number	60	Cluster grid cell size in px.
geoJson	object	{"type":"FeatureCollection","features":[]}	GeoJSON overlay — one FeatureCollection object ({ type, features:[…] }). Per-feature colour goes in each feature's properties (simplestyle: stroke / fill / stroke-width / stroke-opacity / fill-opacity). Bind to a Named Query for live data.
↳ geoJson.type	string	FeatureCollection	Always "FeatureCollection" for a feature list.
↳ geoJson.features	array	[]	The features drawn on the map. + adds a Feature skeleton.
↳ geoJson.features.type	string	Feature	—
↳ geoJson.features.geometry	object	{"type":"Point","coordinates":[0,0]}	Point → coordinates [lng,lat]; LineString → [[lng,lat],…]; Polygon → [[[lng,lat],…]].
↳ geoJson.features.geometry.type	enum	Point	Options: Point · LineString · Polygon · MultiPolygon.
↳ geoJson.features.geometry.coordinates	array	[0,0]	Point: [lng, lat]. LineString/Polygon: nested arrays — bind these from a Named Query rather than typing them.
↳ geoJson.features.properties	object	{}	Feature metadata + simplestyle: name (tooltip), stroke, fill, stroke-width, stroke-opacity, fill-opacity.
geoJsonColor	color	#2563eb	Default stroke colour (per-feature properties.stroke overrides).
geoJsonFillColor	color	#3b82f6	Default fill colour (per-feature properties.fill overrides).
geoJsonFillOpacity	number	0.15	Default fill opacity (per-feature properties['fill-opacity'] overrides).
geoJsonWeight	number	2	Default stroke width in px (per-feature properties['stroke-width'] overrides).
maxBounds	array	[]	Restrict panning to [[south,west],[north,east]] — type the four numbers. Leave it empty for unrestricted panning; a half-filled bounds counts as empty.
controlView	view	""	View shown as a map corner control (bi-directional params).
controlPosition	enum	topright	Options: topleft · topright · bottomleft · bottomright.
controlParams	object	{}	Params passed into the control View.
viewCommand	object	{}	Imperative view command (fit/fly/pan/zoom). Bind it to a button output, tag or expression — it runs once per change.
↳ viewCommand.op	enum	""	What the map should do when this command changes. Options: `` · fitMarkers · fitBounds · flyTo · panTo · zoomTo.
↳ viewCommand.lat	number	0	Target latitude (-90…90).
↳ viewCommand.lng	number	0	Target longitude (-180…180).
↳ viewCommand.zoom	number	12	Zoom level. Required for Zoom to level; optional for fly/pan (blank keeps the current zoom).
↳ viewCommand.padding	number	40	Px of breathing room around the fitted area.
↳ viewCommand.bounds	array	[]	The area to fit, [[south,west],[north,east]] — all four numbers are required; anything less is ignored.
shapes	array	[]	Vector shapes drawn on the map (circle / rectangle / polygon / polyline).
↳ shapes.type	enum	circle	Options: circle · rectangle · polygon · polyline.
↳ shapes.points	array	[]	circle: [centre]; rectangle: [corner1, corner2]; polygon/polyline: vertices.
↳ shapes.points.lat	number	0	—
↳ shapes.points.lng	number	0	—
↳ shapes.radiusM	number	500	Circle radius in metres.
↳ shapes.stroke	color	#2563eb	—
↳ shapes.weight	number	2	—
↳ shapes.strokeOpacity	number	0.9	—
↳ shapes.dashArray	string	""	—
↳ shapes.fill	color	#3b82f6	—
↳ shapes.fillOpacity	number	0.15	—
↳ shapes.label	string	""	Tooltip text.
markers	array	[{"label":"London","lat":51.5074,"lng":-0.1278,"state":"norm… (truncated)	Points on the map. Edit inline, or bind the whole array to a Named Query / FETCH / tag returning rows { lat, lng, label, state, quality, alarmCount }. The samples show until you bind it.
↳ markers.label	string	""	Tooltip text (shown on hover). Escaped before render.
↳ markers.lat	number	0	Latitude (-90…90). Bind to a tag for a moving asset.
↳ markers.lng	number	0	Longitude (-180…180).
↳ markers.state	enum	normal	Equipment state — drives marker fill shade (HP HMI). Options: normal · warning · alarm · offline.
↳ markers.quality	enum	good	Data quality — drives the marker ring. Bind to {{tag.<path>.quality}}. Options: good · bad · uncertain · stale.
↳ markers.alarmCount	number	0	Active alarms at this asset — shows a count badge when state is Alarm. Bind to a tag.
↳ markers.enabled	boolean	true	Set false to hide this marker.
↳ markers.opacity	number	1	Marker opacity (0…1).
↳ markers.icon	enum	""	Marker glyph — blank renders a plain dot. Options: `` · pin · navigation · circle · triangle · square · diamond.
↳ markers.iconAsset	asset	""	Image icon from the asset Library or the Uploads folder — wins over the glyph.
↳ markers.iconColor	color	""	Glyph colour (blank = state shade).
↳ markers.iconSize	number	28	—
↳ markers.iconRotate	number	0	Rotate the icon (deg) — bind to a heading tag for direction.
↳ markers.popupView	view	""	View embedded in a click popup, with bi-directional params.
↳ markers.popupParams	object	{}	Params passed into the popup View.
↳ markers.color	color	""	Optional fill override; blank = use the state shade.
↳ markers.radius	number	7	Marker radius in px (2…40).
selectedMarker	object	{}	Output: the marker last clicked in LiveView — bind e.g. {{ <Map>.selectedMarker.label }}.
↳ selectedMarker.id	string	—	The marker's row index within markers, as a string.
↳ selectedMarker.label	string	—	Tooltip text (shown on hover). Escaped before render.
↳ selectedMarker.lat	number	—	Latitude (-90…90). Bind to a tag for a moving asset.
↳ selectedMarker.lng	number	—	Longitude (-180…180).
↳ selectedMarker.state	enum	—	Equipment state — drives marker fill shade (HP HMI). Options: normal · warning · alarm · offline.
↳ selectedMarker.quality	enum	—	Data quality — drives the marker ring. Bind to {{tag.<path>.quality}}. Options: good · bad · uncertain · stale.
↳ selectedMarker.alarmCount	number	—	Active alarms at this asset — shows a count badge when state is Alarm. Bind to a tag.
↳ selectedMarker.opacity	number	—	Marker opacity (0…1).
↳ selectedMarker.icon	enum	—	Marker glyph — blank renders a plain dot. Options: `` · pin · navigation · circle · triangle · square · diamond.
↳ selectedMarker.iconAsset	asset	—	Image icon from the asset Library or the Uploads folder — wins over the glyph.
↳ selectedMarker.iconColor	color	—	Glyph colour (blank = state shade).
↳ selectedMarker.iconSize	number	—	—
↳ selectedMarker.iconRotate	number	—	Rotate the icon (deg) — bind to a heading tag for direction.
↳ selectedMarker.popupView	view	—	View embedded in a click popup, with bi-directional params.
↳ selectedMarker.popupParams	object	—	Params passed into the popup View.
↳ selectedMarker.color	color	—	Optional fill override; blank = use the state shade.
↳ selectedMarker.radius	number	—	Marker radius in px (2…40).
popupOutput	object	{}	Output: out/both params echoed back from the open popup's View — bind {{ <Map>.popupOutput.<key> }}. The keys are whatever that View declares, so they appear once a popup has run.
mapView	object	{}	Output: current map view — updates on pan/zoom. Bind e.g. {{ <Map>.mapView.zoom }}.
↳ mapView.lat	number	—	Centre latitude of the current view.
↳ mapView.lng	number	—	Centre longitude of the current view.
↳ mapView.zoom	number	—	Current zoom level.
style	style	{}	Custom CSS properties

Events

Attach event actions to these in the Event Manager.

Event	Label	Group	Payload
click	Click	Mouse	The DOM event.
dblclick	Double click	Mouse	The DOM event.
contextmenu	Right click	Mouse	The DOM event.
mouseenter	Mouse enter	Mouse	The DOM event.
mouseleave	Mouse leave	Mouse	The DOM event.
markerClick	Marker click	Map	The clicked marker, under selectedMarker.

Right-click behaves differently in the Designer

contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.

Notes

Point it at a self-hosted tile server or WMS endpoint in Settings → Map to work on a network with no internet access.

See also

• System settings