Add info window to control center

This commit is contained in:
David Eder
2021-06-12 11:53:03 +02:00
parent fade4c3af3
commit 99f0ef30fe
5 changed files with 50 additions and 14 deletions
@@ -1,6 +1,25 @@
<agm-map id="map" #map [zoom]="zoom" [latitude]="center.lat" [longitude]="center.lng" style="height: 900px; width: 1200px">
<agm-marker *ngFor="let m of car_markers | keyvalue" [iconUrl]="m.value.iconUrl" [latitude]="m.value.lat" [longitude]="m.value.lng" >
<agm-map disableDefaultUI="true" id="map" #map [zoom]="zoom" [latitude]="center.lat" [longitude]="center.lng">
<agm-marker (markerClick)="openInfoWindow(m.value.vin)" [openInfoWindow]="true"
*ngFor="let m of car_markers | keyvalue" [iconUrl]="m.value.iconUrl"
[latitude]="m.value.lat" [longitude]="m.value.lng">
<agm-info-window style="opacity: 0.5!important;" (infoWindowClose)="closeInfoWindow(m.value.vin)"
[isOpen]="isInfoWindowOpen(m.value.vin)" [latitude]="m.value.lat"
[longitude]="m.value.lng">
<p>VIN: {{m.value.vin}}</p>
<p>OEM: {{m.value.oem}}</p>
<p>Model Type: {{m.value.modelType}}</p>
<p>Velocity: {{m.value.velocity}}</p>
<p>Timestamp: {{m.value.timestamp}}</p>
</agm-info-window>
</agm-marker>
<agm-marker *ngFor="let m of traffic_light_markers | keyvalue" [iconUrl]="m.value.iconUrl" [latitude]="m.value.lat" [longitude]="m.value.lng" >
<agm-marker *ngFor="let m of traffic_light_markers | keyvalue" [iconUrl]="m.value.iconUrl"
[latitude]="m.value.lat" [longitude]="m.value.lng">
<agm-info-window>
<p>Id: {{m.value.id}}</p>
<p>Switching Time: {{m.value.switchingTime}}</p>
<p>Range: {{m.value.range}}</p>
<p>Color: {{m.value.color}}</p>
<p>Last Switch: {{m.value.last_switch}}</p>
</agm-info-window>
</agm-marker>
</agm-map>