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.

JavaScript TypeScript Angular React Vue Blazor

<smart-site-map> · 16 properties, 5 methods, 4 events · source/modules/smart.sitemap.js

Usage in Blazor

The Razor component is <SiteMap> in Smart.Blazor.Industrial: every property is a parameter in PascalCase, every event an EventCallback<Event> named On<Event> whose ev["Detail"] is the typed detail class, and the methods are called on the @ref. String choices are enums. In a Blazor Web App (.NET 8 and later) the page needs an interactive render mode, for example @rendermode InteractiveServer; a statically rendered component stays empty.

@using Smart.Blazor.Industrial
@* .NET 8 and later: an interactive render mode, on the page or for the whole app *@
@rendermode InteractiveServer

<SiteMap @ref="siteMap" Label="Water network"
    OnSiteOpen="OnSiteOpen" />

@code {
    SiteMap siteMap;

    void OnSiteOpen(Event ev)
    {
        SiteMapSiteOpenEventDetail detail = ev["Detail"];
    }

    // void Push(object record)
    void Call() => siteMap.Push(new { });
}

Properties

Parameter	Type, default	Description
`Sites` sites	IEnumerable<object>	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` label	string	Sets or retrieves the heading of the map. It is also the accessible name of the group.
`Background` 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` 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` tileSubdomains	string abc	Sets or retrieves the letters {s} in tiles takes, one per tile in turn.
`Attribution` 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` center	object	Sets or retrieves where a map with tiles opens, as { lat, lon }. With zoom; null (either) fits every site.
`Zoom` zoom	int	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` maxZoom	int 18	Sets or retrieves the closest tile zoom offered.
`Zoomable` zoomable	bool true	Sets or retrieves whether the map pans and zooms at all. Off, it stays as it opened and the zoom buttons are gone.
`WheelZoom` wheelZoom	SiteMapWheelZoom ctrl	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` detail	SiteMapDetail below	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` aspectRatio	string 16 / 9	Sets or retrieves the picture's width to height, as CSS aspect-ratio has it.
`Selected` selected	string	Sets or retrieves the id of the selected site, which is shown under the map.
`View` view	SiteMapView map	Sets or retrieves whether the sites are shown on the map or as a table.
`ShowLabels` showLabels	bool true	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
`void Push(object record)`	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>'.
`void Fit()`	Shows every site: the closest zoom at which they all fit.
`void ZoomIn()`	Zooms in a step at the middle of the map.
`void ZoomOut()`	Zooms out a step.
`Task<object> GetView()`	Returns where the map is looking: { zoom, center: { lat, lon } } with tiles, { zoom, center: { x, y } } on a picture.

Events

Every event is an EventCallback<Event>; Event is a dictionary and ev["Detail"] converts to the detail class named under the event.

Event	Description and detail
`OnSiteSelect` siteSelect SiteMapSiteSelectEventDetail	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` siteOpen SiteMapSiteOpenEventDetail	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` mapMove SiteMapMapMoveEventDetail	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` int The zoom. `Center` object The center: { lat, lon } with tiles, { x, y } in percent on a picture.
`OnViewChange` viewChange SiteMapViewChangeEventDetail	This event is triggered when the operator switches between the map and the table. `View` string map or list.

Types

`enum SiteMapWheelZoom`

SiteMapWheelZoom.Ctrl "ctrl" SiteMapWheelZoom.Always "always" SiteMapWheelZoom.Never "never"

`enum SiteMapDetail`

SiteMapDetail.Below "below" SiteMapDetail.Popup "popup" SiteMapDetail.None "none"

`enum SiteMapView`

SiteMapView.Map "map" SiteMapView.List "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