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	—
legend	object	{"show":true,"position":"bottomleft","title":"","source":"st… (truncated)	Map legend: rows by marker State, by marker Group (each group drawn with its own marker look), or Custom only — plus your own items for things that are not markers. 1.0.8
↳ legend.show	boolean	true	— 1.0.8
↳ legend.position	enum	bottomleft	Options: topleft · topright · bottomleft · bottomright. 1.0.8
↳ legend.title	string	""	Heading above the rows (blank = none). 1.0.8
↳ legend.source	enum	state	State: Normal / Warning / Alarm / Offline. Group: one row per marker group. Custom: only the items below. Options: state · group · custom. 1.0.8
↳ legend.filter	boolean	true	Click a row to hide / show its markers. 1.0.8
↳ legend.items	array	[]	Your own rows, shown after the automatic ones — e.g. a geofence or pipeline colour. They describe; they don't count or filter. 1.0.8
↳ legend.items.label	string	""	— 1.0.8
↳ legend.items.color	color	#3b82f6	— 1.0.8
↳ legend.items.shape	enum	square	Options: dot · pin · circle · square · diamond · triangle · arrow. 1.0.8
↳ legend.items.icon	icon	""	— 1.0.8
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.
slide	object	{"enabled":false,"duration":1000}	Move markers smoothly to a new position instead of jumping. Markers far off screen always jump. 1.0.8
↳ slide.enabled	boolean	false	Slide instead of snap (LiveView). 1.0.8
↳ slide.duration	number	1000	Slide time in ms. Match it to how often the position updates for continuous motion. 1.0.8
bounce	object	{"onAdd":false,"onAlarm":false,"height":60,"duration":800}	Marker bounce: when it first appears, when it goes into Alarm, and each time its bounceTrigger changes. 1.0.8
↳ bounce.onAdd	boolean	false	Markers drop in with a bounce the first time they appear. 1.0.8
↳ bounce.onAlarm	boolean	false	A marker bounces when its state changes into Alarm. 1.0.8
↳ bounce.height	number	60	Drop height in px. 1.0.8
↳ bounce.duration	number	800	Length of a bounce in ms. 1.0.8
mapTone	enum	color	Base-map colouring. Grayscale / Muted keep the map quiet so colour means state (HP-HMI); Dark suits a dark control room. Markers and overlays keep their colour. Options: color · grayscale · muted · dark. 1.0.8
cluster	object	{"enabled":false,"radius":60}	Group nearby markers into count bubbles for large fleets (a bubble takes the worst state inside it). 1.0.8
↳ cluster.enabled	boolean	false	— 1.0.8
↳ cluster.radius	number	60	Grid cell size in px. 1.0.8
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.
geoJsonStyle	object	{"color":"#2563eb","fillColor":"#3b82f6","fillOpacity":0.15,… (truncated)	Default GeoJSON style. A feature's own properties (stroke / fill / stroke-width / fill-opacity) override it. 1.0.8
↳ geoJsonStyle.color	color	#2563eb	Stroke colour. 1.0.8
↳ geoJsonStyle.fillColor	color	#3b82f6	Fill colour. 1.0.8
↳ geoJsonStyle.fillOpacity	number	0.15	— 1.0.8
↳ geoJsonStyle.weight	number	2	Stroke width in px. 1.0.8
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.
control	object	{"view":"","position":"topright","params":{}}	A View shown as a map corner control, with bi-directional params. 1.0.8
↳ control.view	view	""	View shown in the corner (blank = no control). 1.0.8
↳ control.position	enum	topright	Options: topleft · topright · bottomleft · bottomright. 1.0.8
↳ control.params	object	{}	Params passed into the control View. 1.0.8
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.group	string	""	Category, e.g. Trucks / Pumps — the legend's rows when its source is Group. Bind to a query column. 1.0.8
↳ 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.display	enum	icon	Draw the marker as a shape (with an optional icon), or as an uploaded image. Switching clears the other side's settings. Options: icon · image. 1.0.8
↳ markers.shape	enum	dot	Marker outline. Dot is the lightweight default (scales to large fleets); the others can hold an icon. Every outline shows the quality ring. Options: dot · pin · circle · square · diamond · triangle · arrow. 1.0.8
↳ markers.size	number	24	Marker width in px (a dot's diameter). No upper limit. 1.0.8
↳ markers.color	color	""	Fill colour; blank = the state shade.
↳ markers.icon	icon	""	Icon from the icon library, drawn inside the shape (a dot with an icon is drawn as a circle). 1.0.8
↳ markers.iconColor	color	""	Icon colour; blank = white. 1.0.8
↳ markers.spin	boolean	false	Spin the icon continuously — e.g. a running fan or pump. Bind to a running tag. 1.0.8
↳ markers.image	asset	""	Image from the asset Library or the Uploads folder. 1.0.8
↳ markers.rotate	number	0	Degrees — bind to a heading tag. Turns the whole marker; a pin keeps its tip on the point and turns its icon. 1.0.8
↳ markers.bounceTrigger	number	0	Bounce the marker once each time this value changes to a new non-zero value (LiveView). Bind it to an event counter, an alarm count, or a button output. 1.0.8
↳ markers.follow	boolean	false	Keep the map centred on this marker as it moves (LiveView). If several are set, the first one wins. 1.0.8
↳ markers.popupView	view	""	View embedded in a click popup, with bi-directional params.
↳ markers.popupParams	object	{}	Params passed into the popup View.
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.group	string	—	Category, e.g. Trucks / Pumps — the legend's rows when its source is Group. Bind to a query column. 1.0.8
↳ 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.display	enum	—	Draw the marker as a shape (with an optional icon), or as an uploaded image. Switching clears the other side's settings. Options: icon · image. 1.0.8
↳ selectedMarker.shape	enum	—	Marker outline. Dot is the lightweight default (scales to large fleets); the others can hold an icon. Every outline shows the quality ring. Options: dot · pin · circle · square · diamond · triangle · arrow. 1.0.8
↳ selectedMarker.size	number	—	Marker width in px (a dot's diameter). No upper limit. 1.0.8
↳ selectedMarker.color	color	—	Fill colour; blank = the state shade.
↳ selectedMarker.icon	icon	—	Icon from the icon library, drawn inside the shape (a dot with an icon is drawn as a circle). 1.0.8
↳ selectedMarker.iconColor	color	—	Icon colour; blank = white. 1.0.8
↳ selectedMarker.spin	boolean	—	Spin the icon continuously — e.g. a running fan or pump. Bind to a running tag. 1.0.8
↳ selectedMarker.image	asset	—	Image from the asset Library or the Uploads folder. 1.0.8
↳ selectedMarker.rotate	number	—	Degrees — bind to a heading tag. Turns the whole marker; a pin keeps its tip on the point and turns its icon. 1.0.8
↳ selectedMarker.bounceTrigger	number	—	Bounce the marker once each time this value changes to a new non-zero value (LiveView). Bind it to an event counter, an alarm count, or a button output. 1.0.8
↳ selectedMarker.follow	boolean	—	Keep the map centred on this marker as it moves (LiveView). If several are set, the first one wins. 1.0.8
↳ selectedMarker.popupView	view	—	View embedded in a click popup, with bi-directional params.
↳ selectedMarker.popupParams	object	—	Params passed into the popup View.
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.

Map settings were regrouped in 1.0.8, and saved views are not converted

Related settings moved into groups, and the marker look was rebuilt. A Map saved by 1.0.7 opens with these settings back at their defaults — re-enter them under the new names, and re-alias the columns of any query bound to markers:

1.0.7	1.0.8
showLegend	legend.show
cluster (on/off), clusterRadius	cluster.enabled, cluster.radius
geoJsonColor, geoJsonFillColor, geoJsonFillOpacity, geoJsonWeight	geoJsonStyle.color, .fillColor, .fillOpacity, .weight
controlView, controlPosition, controlParams	control.view, .position, .params
marker icon (pin, circle, square…)	marker shape; icon is now an icon from the icon library drawn inside the shape
marker iconAsset	marker image, with display set to image
marker radius, iconSize	marker size (width in px; a dot's diameter)
marker iconRotate	marker rotate

A marker's iconColor now colours the icon inside the shape and defaults to white; the shape itself takes color, or the state shade when that is blank. With legend.show defaulting to on, a legend you had hidden comes back until you turn it off again.

Markers Changed in 1.0.8

Each marker is one field per idea: display (a shape, or an uploaded image), shape — dot, pin, circle, square, diamond, triangle or arrow — size, color, an icon from the icon library with its iconColor, spin for a running fan or pump, and rotate for a heading. Every shape carries the quality ring. dot is the light default and scales to a large fleet; switching display clears the settings of the side it left.

Motion New in 1.0.8

• slide — a moving marker glides to its new position over slide.duration ms instead of jumping. Match the duration to how often the position updates and a vehicle moves continuously. A marker far off screen always jumps. Set follow on one marker to keep the map centred on it as it moves.
• bounce — markers drop in when they first appear (onAdd), bounce when they go into Alarm (onAlarm), and bounce once each time their own bounceTrigger changes to a new non-zero value — bind it to an event counter.

Both run in LiveView only, and both are off for a viewer whose system asks for reduced motion.

Map tone and legend New in 1.0.8

mapTone recolours the base map only — grayscale or muted keep it quiet so that colour on the map means state, dark suits a dark control room. Markers and overlays keep their colour.

The legend is a corner control of the map (it no longer overlaps the attribution). legend.source lists rows by marker state (Normal, Warning, Alarm, Offline), by marker group — a marker's group field, so trucks and pumps get a row each, drawn in their own marker look — or only your own custom items, which describe things that are not markers, such as a geofence colour. With legend.filter on, clicking a row hides or shows its markers.

Setting the default view

Double-click the Map on the canvas to enter it, then pan and zoom and apply the view as the default. Changed in 1.0.8 The button that used to do this sat under the selection box.

See also

• System settings