Maintenance and sites
Site Map <smart-site-map>
SiteMap puts many sites on one picture - the pump stations of a water network, the turbines of a wind farm, the substations of a grid - so that "where is something wrong" is answered with a place.
<smart-site-map> · 16 properties, 5 methods, 4 events · source/modules/smart.sitemap.js
Usage in Angular
The Angular wrapper is SiteMapComponent from SiteMapModule: every property is an input, every event an output named on<Event>, and the methods are called on the component reference from @ViewChild. A method that returns a value returns a Promise of it, resolved once the component has rendered; its ...Sync() twin returns the value at once, or null before the component has rendered. Unknown bindings are rejected at compile time.
import { SiteMapModule, SiteMapComponent } from 'smart-industrial/angular/sitemap';
<smart-site-map #siteMap [label]="'Water network'"
(onSiteOpen)="onSiteOpen($event)"></smart-site-map>
@ViewChild('siteMap', { read: SiteMapComponent }) siteMap!: SiteMapComponent;
// methods are called on the component reference
this.siteMap.push({});
Properties
| Input | Type, default | Description |
|---|---|---|
[sites] | array | Sets or retrieves the sites as [{ id, name, x, y, lat, lon, state, alarms, reading, unit, description, href }]. On a picture, x and y are percent from its top left; with tiles, lat and lon place the site. state is normal, warning, alarm, offline or maintenance, in any case and with spaces round it ignored - or an alarm bit (1 or true is alarm, 0 or false normal), or the whole number 2 warning, 3 offline, 4 maintenance. Anything else - no state, an empty string, another word such as stale, a number outside 0 to 4 or not whole - is unknown: drawn as a hollow dotted marker with a question mark, named "State unknown", counted in the summary line and sorted in the table straight after warning (alarm, warning, unknown, offline, maintenance, normal), so a site whose state cannot be read never passes for normal. "All normal" is said only when every site is normal. A numeric reading is shown with unit; a reading that is there but is no reading (NaN, Infinity, null, an object, "NaN") shows "--" and is spoken "no reading"; a site without a reading shows none. href adds a link to the site's card (http, https or a path; nothing else is made a link). Assign a new array to update the component; readings, states and alarm counts can also come through push(). An item that is not a site (null, a number, an object with neither id nor name) is skipped with one console warning; a site with a name and no id goes by its name. |
[label] | string | Sets or retrieves the heading of the map. It is also the accessible name of the group. |
[background] | string | Sets or retrieves the URL of an image under the sites. Without one, an SVG placed inside the element is the picture, and without that the sites sit on a grid. |
[tiles] | string | Sets or retrieves the URL of the map tiles, with {z}, {x} and {y}, and optionally {s} for a subdomain - https://tile.openstreetmap.org/{z}/{x}/{y}.png, or a plant's own tile server. With tiles, sites are placed by lat and lon. Nothing is fetched while it is empty. |
[tileSubdomains] | string | Sets or retrieves the letters {s} in tiles takes, one per tile in turn. |
[attribution] | string | Sets or retrieves the tile provider's credit, shown in the corner of the map. OpenStreetMap's own is shown when tiles come from it and this is empty. |
[center] | object? | Sets or retrieves where a map with tiles opens, as { lat, lon }. With zoom; null (either) fits every site. |
[zoom] | number? | Sets or retrieves the tile zoom a map opens at (1 to maxZoom), or the magnification of a picture (1 to 8). null fits every site. |
[maxZoom] | number | Sets or retrieves the closest tile zoom offered. |
[zoomable] | boolean | Sets or retrieves whether the map pans and zooms at all. Off, it stays as it opened and the zoom buttons are gone. |
[wheelZoom] | SiteMapWheelZoom | Sets or retrieves what the mouse wheel does over the map: zoom only with Ctrl held, as a page the map is only part of needs (the wheel alone scrolls the page, and a hint says how to zoom); always; or never. |
[detail] | SiteMapDetail | Sets or retrieves where the selected site's card opens: under the map, beside its marker, or nowhere (for a screen with its own detail panel). |
[aspectRatio] | string | Sets or retrieves the picture's width to height, as CSS aspect-ratio has it. |
[selected] | string | Sets or retrieves the id of the selected site, which is shown under the map. |
[view] | SiteMapView | Sets or retrieves whether the sites are shown on the map or as a table. |
[showLabels] | boolean | Sets or retrieves whether every site is named beside its marker. Off, only the selected site and those that need someone are named. |
Methods
| Method | Description |
|---|---|
push(record: any): void | Changes readings, states and alarm counts as they arrive, without re-sending the list: { '<site id>.reading': 4.2, '<site id>.state': 1 }. The record a strip chart's push takes, so Connect.stream() feeds a map as it feeds a chart. A new sites array drops what push brought for the old one. A state goes through the same reading as in sites: a word or code the map does not know makes the site unknown, not normal.record object Fields named '<site id>.<reading|state|alarms|description|name>'. |
fit(): void | Shows every site: the closest zoom at which they all fit. |
zoomIn(): void | Zooms in a step at the middle of the map. |
zoomOut(): void | Zooms out a step. |
getView(): Promise<any> | Returns where the map is looking: { zoom, center: { lat, lon } } with tiles, { zoom, center: { x, y } } on a picture. |
Events
The data of an event is in event.detail. siteSelect, viewChange and mapMove report what the site map has already done: it sets selected or view, or pans and zooms its own view, and then raises the event. siteOpen is a request: the site map changes nothing and the application opens the screen for the site.
| Output | Description and detail |
|---|---|
(onSiteSelect) | This event is triggered when a site is selected on the map or in the table - or deselected, with an empty id, when its card is closed.id string The id of the site. |
(onSiteOpen) | This event is triggered by the Open button of the selected site, for the application to go to that site's screen.id string The id of the site. |
(onMapMove) | This event is triggered when the map has been panned or zoomed, once the movement stops - with the view as getView() gives it, for an application that keeps where an operator left the map.zoom number The zoom.center object The center: { lat, lon } with tiles, { x, y } in percent on a picture. |
(onViewChange) | This event is triggered when the operator switches between the map and the table.view string map or list. |
Types
type SiteMapWheelZoom
'ctrl' | 'always' | 'never'
type SiteMapDetail
'below' | 'popup' | 'none'
type SiteMapView
'map' | 'list'
CSS variables
The component declares 8 CSS variables; the CSS page shows how to set them.
--smart-site-map-normal --smart-site-map-warning --smart-site-map-alarm --smart-site-map-alarm-color --smart-site-map-warning-color --smart-site-map-land --smart-site-map-tile-filter --smart-site-map-edge