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 TypeScript
The package ships its definitions: SiteMap is the element type and SiteMapProperties the properties, both exported from smart-industrial/source/typescript/smart.industrial. document.querySelector('smart-site-map') is typed as SiteMap.
import { SiteMap, SiteMapProperties } from 'smart-industrial/source/typescript/smart.industrial';
const siteMap = document.querySelector('smart-site-map') as SiteMap;
siteMap.label = 'Water network';
siteMap.addEventListener('siteOpen', (event: CustomEvent) => console.log(event.detail));
siteMap.push({});
Properties
| Property | 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: object): 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(): object | 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.
| Event | Description and detail |
|---|---|
siteSelect | 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. |
siteOpen | 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. |
mapMove | 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. |
viewChange | 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