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 | © <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. |
wmsLayers | array | [] | WMS overlays (GIS raster). Reference a WMS server registered in System settings → Map. |
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. |
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]]. Empty = unrestricted. |
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 to trigger it. |
shapes | array | [] | Vector shapes drawn on the map (circle / rectangle / polygon / polyline). |
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. |
selectedMarker | object | {} | Output: the marker last clicked in LiveView ({ id, lat, lng, label, state, quality, ... }). |
popupOutput | object | {} | Output: out/both params echoed back from the open popup's View — bind {{ <Map>.popupOutput.<key> }}. |
mapView | object | {} | Output: current map view { lat, lng, zoom } — updates on pan/zoom. |
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. |
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.