sunstone-map-unstable v1.0.0
Sunstone Map
An angular library to help create maps for the Sunstone-RTLS system.
Installing
Install by running the following the command:
npm install sunstone-map
You also have to install its dependencies as well:
npm install @asymmetrik/ngx-leaflet leaflet leaflet-webgl-overlay
Usage
Import SunstoneMapModule
into your app or feature module:
import {SunstoneMapModule} from 'sunstone-map'
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
SunstoneMapModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
The library provides a single component called SunstoneMapComponent
. A map can be created through this component.
Creating a map
Create a new angular component that will house your map.
Add the sunstone map to your component's template file. Note that the component must be wrapped into a div width fixed width and height in order for the map to show up.
<div class="map">
<sunstone-map
[imageUrl]="'https://omt-hq.sunstone-cloud.com/settings/map/svg'"
[mapConfig]="mapConfig"
[settings]="settings"
></sunstone-map>
</div>
The SunstoneMapComponent
has many attributes and events that can be set, three of which are mandatory: imageUrl
,mapConfig
,settings
Read more abut the attributes here.
Adding tags to the map
First create a field in your components ts file to store the tags and bind to the SunstoneMapComponent
tagList attribute
app.component.ts:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
//load the tag data from api
tags: TagModel[] = [
{
pos: [0,0],
tagId: 12
}
];
settings: FeatureSettings = {
useWithTags: true,
tagFeatures: {},
zoneFeatures: {},
pathFeatures: {}
};
//load it from the api
mapConfig: MapConfigModel;
}
app.component.html:
<div class="map">
<sunstone-map
[imageUrl]="'https://omt-hq.sunstone-cloud.com/settings/map/svg'"
[mapConfig]="mapConfig"
[settings]="settings"
[tagList]="tags"
></sunstone-map>
</div>
Handling tag selection
If you want to handle selecting tag on the map you need to expand the previous example the following way:
app.component.ts:
selectedTag: TagModel;
settings: FeatureSettings = {
useWithTags: true,
tagFeatures: {
useSelectedTag: true, // use tag selection
},
zoneFeatures: {},
pathFeatures: {}
};
//tag selection event handler
tagSelected(tag: TagModel) {
this.selectedTag = tag;
//do whatever
}
app.component.html:
<div class="map">
<sunstone-map
[imageUrl]="'https://omt-hq.sunstone-cloud.com/settings/map/svg'"
[mapConfig]="mapConfig"
[settings]="settings"
[tagList]="tags"
(selectedTag)="selectedTag"
(tagSelected)="tagSelected($event)"
></sunstone-map>
</div>
Reference
SunstoneMapComponent
Attributes
Attribute | Type | Description |
---|---|---|
imageUrl | string | Url for the map image |
mapConfig | MapConfigModel | The Sunstone mapconfig from the api used to set up the map transformations |
settings | FeatureSettings | Settings that turns on or off map featuers |
tagList | TagModel[] | Array of tags to be displayed on the map |
anchorList | AnchorModel[] | Array of anchors to be displayed on the map |
selectedTag | TagModel | The selected tag |
zoneList | ZoneModel[] | Array of zones to be displayed on the map |
spaghettiData | SpaghettiData[] | Array of spaghetti data to display paths on the map |
minTime | number | Used with spaghetti data, the minimum time that the path should be displayed from |
maxTime | number | Used with spaghetti data, the maximum time that the path should be displayed to |
Events
Event | Data | Description |
---|---|---|
tagSelected | TagModel | Fired when a tag is selected (clicked) on the map. |
mapLoaded | Map | Fired when the map finished loading. |
zoneCreated | {upperBounds: number[], lowerBounds: number[]} | Fired when a new zone is created. |
zoneEdited | ZoneModel | Fired when a zone is edited. |
zoneRemoved | ZoneModel | Fired when a zone is removed. |
zoneSelected | ZoneModel | Firead when a zone is selected. |
Models
MapConfigModel
Interface for mapconfig data from the Sunstone RestAPI. Read more here
export interface MapConfigModel {
scale: number;
xoff: number;
yoff: number;
xmirror: number;
ymirror: number;
switchxy: number;
}
FeatureSettings
Settings that turns on or off map featuers |Setting| Type | Description| |-------|------|------------| |useWithTags| boolean| Whether to display tags on the map or not. Requires tagList attribute to be set. | | useWithAnchors| boolean | Whether to display anchors on the map or not. Requires anchorList attribute to be set. | | useWithZones | boolean | Whether to display zones on the map or not. Requires zoneList attribute to be set. | | useWithPath | boolean | Whether to display paths on the map or not. Requires spaghettiData attribute to be set. | tagFeatures| TagFeatures | Tag specific settings | zoneFeatures | ZoneFeatures | Zone specific settings | pathFeatures | PathFeatures | Path specific settings
TagFeatures
Tag specific settings |Setting| Type | Description| |-------|------|------------| |followSelected| boolean| If true the map will pan to the tag when selected and follow it around when it moves. |useSelectedTag| boolean| Sets if a selected tag will be used. Related attributes and events will only work if this is true. |selectedTagColor| string | The selected tag's color in hex color format. Default: #00FF00 | trailMovement| boolean | Sets it so the movement of the tag will be trailed by dots | maxTrail | number | How long the trail should be
ZoneFeatures
Zone specific settings |Setting| Type | Description| |-------|------|------------| |zoneFillColor| string | The fill color of the zone in hex format. | zoneStrokeColor | string | The outline color of the zone in hex format. | useZoneEditor| boolean | Whether to use zone editor functionality or not. | useSelectedZone | boolean | Whether to use zone selection. | selectedZoneColor | string | The color of the selected zone. Default: #00FF00
PathFeatures
Path specific settings |Setting| Type | Description| |-------|------|------------| | color | string| The color of the path in hex format. Leave it empty for random colors.
TagModel
Interface for tag data. Read more here
export interface TagModel {
tagId: number;
pos?: number[];
type?: string;
description?: string;
velocity?: number[];
updatedAt_msFromEpoch?: number;
updatedAt?: string; // ISO8601_FRAC_FORMAT
orient?: number;
}
ZoneModel
Interface for zone data. Read more here
export interface ZoneModel {
zoneName?: string;
upperBounds: number[];
lowerBounds: number[];
zoneId: number;
}
AnchorModel
Interface for anchor data. Read more here
export interface AnchorModel {
anchorId: number;
pos: number[];
}
SpaghettiData
Interface representing path data of a tag
export interface SpaghettiData {
tagId: number;
data: Array<{
pos: number[],
time: number
}>;
}
5 years ago