display root and other positions on the map

src/app/components/map/map.component.ts

@@ -4,8 +4,9 @@ import { Subscription } from 'rxjs';
 import * as L from "leaflet";
 import { IMqttMessage, MqttService } from 'ngx-mqtt';
 
-import { environment } from 'src/environments/environment';
-import {RelativePos, WGS84} from 'src/app/model/base-model';
+import { environment, MarkerColorMap } from 'src/environments/environment';
+import {Position, PositionUpdate, RelativePos, WGS84} from 'src/app/model/base-model';
+
 
 @Component({
   selector: 'app-map',
@@ -18,61 +19,92 @@ export class MapComponent implements OnInit {
   private subsOrigin: Subscription;
 
   private map!: L.Map;
-
-  private origin!: WGS84;
+  private root!: Position;
   
-  agentsInfo = new Map();
-  markOverlays = new Map();
+  agentsInfo: { [key: string]: {} } = {};
+  markOverlays: { [key: string]: L.LayerGroup<any> } = {}; 
   posOverlays: { [key: string]: L.LayerGroup<any> } = {};
 
   constructor(private _mqttService: MqttService) {
-    this.origin = {"latitude": 51.02545, "longitude": 13.72295}
+    this.root = {"refSystemId": "ROOT", "point": {"latitude": 51.02545, "longitude": 13.72295}}
 
-    this.subsPosition = this._mqttService.observe('testtopic/5699').subscribe((message: IMqttMessage) => {
-      let pos: RelativePos = JSON.parse(message.payload.toString())
-      this.updatePosition('default', pos)
+    this.subsPosition = this._mqttService.observe('ipos/client/root').subscribe((message: IMqttMessage) => {
+      this.root = JSON.parse(message.payload.toString())
+      console.log("New root: ", this.root)
+      this.registerPoint("ROOT", {"position": this.root})
     });
 
-    this.subsOrigin = this._mqttService.observe('testtopic/5699/origin').subscribe((message: IMqttMessage) => {
-      this.origin = JSON.parse(message.payload.toString())
+    this.subsOrigin = this._mqttService.observe('ipos/client/position').subscribe((message: IMqttMessage) => {
+      let upd: PositionUpdate = JSON.parse(message.payload.toString())
+      upd.object.forEach(obj => this.registerPoint(obj.id, obj));
     });
   }
 
-  ngOnInit(): void {}
+  ngOnInit(): void { }
 
   // --- Controllers
 
-  updatePosition(key: string, pos: RelativePos) {
-    // estimated position of an agent
-
-    let glob_pos = this.convert2wgs(pos)
+  ref2root(pos: RelativePos) {
+    // convert a relative position to WFG84 format
+    let source = <WGS84>this.root.point
+    let origin = L.latLng([source.latitude, source.longitude])
+    let point = L.Projection.Mercator.project(origin)
+    let newPoint = L.point([point.x + pos.x, point.y + pos.y])
+    let newLatLng = L.Projection.Mercator.unproject(newPoint)
+    return newLatLng
+  }
 
-    // let point = L.point(pos.x, pos.y);
-    // let glob_pos = (this.map).layerPointToLatLng(point)
 
-    // --- Leyers
-    if (key in this.posOverlays) {
-      this.posOverlays[key].clearLayers();
+  registerPoint(key: string, desc: { [key: string]: any }) {
+    // --- Leyers for markers
+    if (key in this.markOverlays) {
+      this.markOverlays[key].clearLayers();
     } else {
-      this.posOverlays[key] = L.layerGroup().addTo(<L.Map>this.map)
+      this.markOverlays[key] = L.layerGroup().addTo(<L.Map>this.map)
     }
 
     // --- Info
-    this.agentsInfo.set(key, {"glob_pos": glob_pos})
+    let pos = desc["position"]
+    this.agentsInfo[key] = desc
+    this.addMarker(key, pos)
+  }
 
-    L.circle(glob_pos, 6, { color: '#d32f2f' }
-    ).addTo(this.posOverlays[key]);
+  addMarker(key: string, pos: Position) {
+    let point = pos.point
 
-  }
+    if ('x' in point) {
+      var globPos = this.ref2root(point)
+    } else {
+      var globPos = L.latLng([point.latitude, point.longitude]);
+    }
 
-  convert2wgs(pos: RelativePos) {
-    let origin = L.latLng([this.origin.latitude, this.origin.longitude]);
-    let point = this.map.latLngToContainerPoint(origin);
-    let newPoint = L.point([point.x + pos.x, point.y + pos.y]);
-    let newLatLng = this.map.containerPointToLatLng(newPoint);
-    return newLatLng
+    // --- Marker
+    if (key in MarkerColorMap) {
+      var markerConf = MarkerColorMap[key]
+    } else {
+      var markerConf = MarkerColorMap['Default']
+    }
+      
+    let marker = L.marker(globPos, {
+      icon: L.icon({
+        iconSize: [25, 41],
+        iconAnchor: [13, 41],
+        iconUrl: `assets/marker-icon-${markerConf.marker}.png`,
+        iconRetinaUrl: `assets/marker-icon-2x-${markerConf.marker}.png`,
+        shadowUrl: 'assets/marker-shadow.png',
+        className: 'true-position-marker'
+      })
+    }).bindPopup(key).openPopup();
+    marker.addTo(this.markOverlays[key])
+
+    // --- Accuracy
+    if (pos?.accuracy) {
+      L.circle(globPos, pos.accuracy, { color: markerConf.circle}
+      ).addTo(this.markOverlays[key]);
+    }
   }
 
+
   // @https://asymmetrik.com/ngx-leaflet-tutorial-angular-cli/
   // --- Layers: Define base layers so we can reference them multiple times
   streetMaps = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -117,13 +149,18 @@ export class MapComponent implements OnInit {
     let legend = new L.Control({ position: "bottomleft" });
     legend.onAdd = function () {
       var div = L.DomUtil.create("div", "legend");
-      div.innerHTML += '<img style="opacity: .5" src="assets/marker-icon-grey.png"> <span> Agents </span><br>';
+      div.innerHTML += '<img style="opacity: .5" src="assets/marker-icon-grey.png"> <span> Employee </span><br>';
       div.innerHTML += '<i class="est-pos"></i> <span> Estimated position </span><br>';
 
       return div;
     };
 
-    legend.addTo(this.map);
+    // legend.addTo(this.map);
+
+    //-- check root
+    if (this.root) {
+      this.registerPoint("ROOT", {"position": this.root})
+    }
 
   }  
 

src/app/model/base-model.ts

    
+export interface PositionUpdate {
+    object: Object[]
+    type: NotificationType
+}
+
+export interface Object {
+    id: string
+    sensorId: string
+    type: ObjectType
+    sensorType: SensorType
+    position: Position
+    orientation?: Orientation
+    lastPosUpdate: string
+}
+
+export interface Position {
+    refSystemId: string
+    point: WGS84 | RelativePos
+    accuracy?: number
+}
+
 export interface WGS84 {
     latitude: number
     longitude: number
+    altitude?: number
 }
 
 export interface RelativePos {
     x: number
     y: number
+    z?: number
+}
+
+interface Orientation {
+    x: number
+    y: number
+    z: number
+    w: number
 }
+
+enum NotificationType {
+    EntryNotification,
+    Unknown
+}
+
+enum ObjectType {
+    HUMAN,
+    BOX,
+    ROBOT
+}
+
+enum SensorType {
+    UWB,
+    Bluetooth,
+    WiFi
+}
+
+
+

src/environments/environment.prod.ts

+import { IMqttServiceOptions } from 'ngx-mqtt';
+
 export const environment = {
   production: true,
-  APIEndpoint: 'http://webserver:7071'
+
+  mapbox: {
+    accessToken1: 'pk.eyJ1IjoidmFsYXZhbmNhIiwiYSI6ImNrbGZlNzhpaTJhb3oyeG4weHEyZ2dvaDMifQ.3CSKC5AkzxrAtQ40BD5tsQ',
+    accessToken2: 'pk.eyJ1IjoidmFsYXZhbmNhIiwiYSI6ImNrbGZlYm13ZTJtZ2gyb25wbGhqdGhmZzkifQ.atRzBqwKjY9wEUlue2YLzQ'
+  },
+
+  indoorequal: {
+    APIkey: 'l70N1y3m02lRDrlIqOzYyB'
+  },
+
 };
+
+export const MQTTconfig: IMqttServiceOptions = {
+  hostname: 'broker.hivemq.com',
+  port: 8000,
+  path: '/mqtt'
+};
+
+export const MarkerColorMap: { [key: string]: MarkerColor } = {
+  "ROOT": {"marker": "red", "circle": "#d32f2f"},
+  "Employee1": {"marker": "green", "circle": "#008632"},
+  "Employee2": {"marker": "blue", "circle": "#0076EE"},
+  "Employee3": {"marker": "violet", "circle": "#9700ee"},
+  "Employee4": {"marker": "yellow", "circle": "#eee600"},
+  "Default": {"marker": "grey", "circle": "#606060"},
+}
+
+interface MarkerColor {
+  marker: string
+  circle: string
+}
\ No newline at end of file

src/environments/environment.ts

@@ -6,7 +6,6 @@ import { IMqttServiceOptions } from 'ngx-mqtt';
 
 export const environment = {
   production: false,
-  APIEndpoint: 'http://localhost:7071',
 
   mapbox: {
     accessToken1: 'pk.eyJ1IjoidmFsYXZhbmNhIiwiYSI6ImNrbGZlNzhpaTJhb3oyeG4weHEyZ2dvaDMifQ.3CSKC5AkzxrAtQ40BD5tsQ',
@@ -25,6 +24,20 @@ export const MQTTconfig: IMqttServiceOptions = {
   path: '/mqtt'
 };
 
+export const MarkerColorMap: { [key: string]: MarkerColor } = {
+  "ROOT": {"marker": "red", "circle": "#d32f2f"},
+  "Employee1": {"marker": "green", "circle": "#008632"},
+  "Employee2": {"marker": "blue", "circle": "#0076EE"},
+  "Employee3": {"marker": "violet", "circle": "#9700ee"},
+  "Employee4": {"marker": "yellow", "circle": "#eee600"},
+  "Default": {"marker": "grey", "circle": "#606060"},
+}
+
+interface MarkerColor {
+  marker: string
+  circle: string
+}
+
 
 /*
  * For easier debugging in development mode, you can import the following file