43 lines
1.3 KiB
HTML
43 lines
1.3 KiB
HTML
<mgl-map [style]="'mapbox://styles/mapbox/dark-v10'" [zoom]="[15]" [center]="[this.lastLocation[0], this.lastLocation[1]]" *ngIf="showMap">
|
|
<mgl-geojson-source id="locHistory" [data]="data"></mgl-geojson-source>
|
|
<mgl-geojson-source id="locHistoryFiltered" [data]="mostVisitData"></mgl-geojson-source>
|
|
<mgl-geojson-source id="lastLoc" [data]="lastLocationData"></mgl-geojson-source>
|
|
<mgl-layer
|
|
id="locHistory"
|
|
type="line"
|
|
source="locHistory"
|
|
[paint]="{
|
|
'line-color': '#ff0000',
|
|
'line-width': 3
|
|
}"
|
|
></mgl-layer>
|
|
<mgl-layer
|
|
id="locHistoryHeatmap"
|
|
type="heatmap"
|
|
source="locHistoryFiltered"
|
|
[paint]="mostVisitPaint"
|
|
></mgl-layer>
|
|
<mgl-layer
|
|
id="lastLoc"
|
|
type="circle"
|
|
source="lastLoc"
|
|
[paint]="lastLocationPaint"
|
|
></mgl-layer>
|
|
<div class="controls">
|
|
<mgl-control *ngIf="heatmapPending">
|
|
Compute heat map, please wait ... ({{heatmapProgress}}% done)
|
|
</mgl-control>
|
|
<mgl-control
|
|
mglNavigation
|
|
></mgl-control>
|
|
<mgl-control
|
|
mglScale
|
|
unit="metric"
|
|
position="top-right"
|
|
></mgl-control>
|
|
</div>
|
|
</mgl-map>
|
|
<div id="noData" *ngIf="!this.showMap">
|
|
<h1>There is no data</h1><br>
|
|
<p>Selected time span does not contain any coordiantes.</p>
|
|
</div> |