hft-informatik/geovisualisierung
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add popUp to miniMap for better usability

Browse Source
This commit is contained in:
tim-herbst 2021-01-01 15:31:57 +01:00
parent 82b8b8bd74
commit 7a80335860
4 changed files with 31 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
projects/project-3/frontend/src/app/dashboard/dashboard.component.html
View File

@ -1,6 +1,6 @@
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<mat-toolbar class="mat-toolbar" color="primary">
<span>Bike Stations in London</span>
<span routerLink="/">Bike Stations in London</span>
<span class="toolbar-spacer"></span>
<a class="button-wiki" color="primary"
href="https://gitlab.com/marcel.schwarz/geovisualisierung/-/wikis/Projektarbeit%203" mat-flat-button
@ -49,8 +49,6 @@
<div class="chart-bikepoint-availability" fxFlex fxLayout="column">
<div id="chart">
<apx-chart
[title]="bikePointChartOptions.title"
[subtitle]="bikePointChartOptions.subtitle"
[chart]="bikePointChartOptions.chart"
[colors]="bikePointChartOptions.colors"
[dataLabels]="bikePointChartOptions.dataLabels"
@ -59,6 +57,8 @@
[plotOptions]="bikePointChartOptions.plotOptions"
[series]="bikePointChartOptions.series"
[stroke]="bikePointChartOptions.stroke"
[subtitle]="bikePointChartOptions.subtitle"
[title]="bikePointChartOptions.title"
[tooltip]="bikePointChartOptions.tooltip"
[xaxis]="bikePointChartOptions.xaxis"
[yaxis]="bikePointChartOptions.yaxis"
@ -81,12 +81,12 @@
<div class="dashboard-table-to" fxFlex>
<table [dataSource]="stationToSource" class="mat-elevation-z8" fxFill mat-table>
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row">
<mat-checkbox matTooltip="toggle to view marker on map" matTooltipPosition="above"
(click)="$event.stopPropagation()"
(change)="$event ? selectRow($event, row) : null"
[checked]="selectionModel.isSelected(row)">
<th *matHeaderCellDef mat-header-cell></th>
<td *matCellDef="let row" mat-cell>
<mat-checkbox (change)="$event ? selectRow($event, row) : null" (click)="$event.stopPropagation()"
[checked]="selectionModel.isSelected(row)"
matTooltip="toggle to view marker on map"
matTooltipPosition="above">
</mat-checkbox>
</td>
</ng-container>
@ -108,7 +108,7 @@
<ng-container matColumnDef="marker">
<th *matHeaderCellDef mat-header-cell> icon on map</th>
<td *matCellDef="let element" mat-cell> <img [src]="drawIconInTable(element)" alt="marker"> </td>
<td *matCellDef="let element" mat-cell><img [src]="drawIconInTable(element)" alt="marker"></td>
</ng-container>
<tr *matHeaderRowDef="displayedColumnsTo" mat-header-row></tr>
@ -118,12 +118,12 @@
<div class="dashboard-table-from" fxFlex>
<table [dataSource]="stationFromSource" class="mat-elevation-z9" fxFill mat-table>
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row">
<mat-checkbox matTooltip="toggle to view marker on map" matTooltipPosition="above"
(click)="$event.stopPropagation()"
(change)="$event ? selectRow($event, row) : null"
[checked]="selectionModel.isSelected(row)">
<th *matHeaderCellDef mat-header-cell></th>
<td *matCellDef="let row" mat-cell>
<mat-checkbox (change)="$event ? selectRow($event, row) : null" (click)="$event.stopPropagation()"
[checked]="selectionModel.isSelected(row)"
matTooltip="toggle to view marker on map"
matTooltipPosition="above">
</mat-checkbox>
</td>
</ng-container>
@ -145,7 +145,7 @@
<ng-container matColumnDef="marker">
<th *matHeaderCellDef mat-header-cell> icon on map</th>
<td *matCellDef="let element" mat-cell> <img [src]="drawIconInTable(element)" alt="marker"> </td>
<td *matCellDef="let element" mat-cell><img [src]="drawIconInTable(element)" alt="marker"></td>
</ng-container>
<tr *matHeaderRowDef="displayedColumnsFrom" mat-header-row></tr>
@ -187,7 +187,7 @@
<mat-card-header class="chart-header">
<mat-card-title>Rental Time</mat-card-title>
<mat-card-subtitle>
This chart shows the workload of the currently selected Station in relation
This chart shows the workload of the currently selected station in relation
of the time of the day. It is visualized at which time of the day a journey begins or ends (blue).
In addition, the average rental duration of the trips is displayed at the given time (green).
</mat-card-subtitle>
@ -199,10 +199,10 @@
[chart]="timeChartOptions.chart"
[colors]="timeChartOptions.colors"
[dataLabels]="timeChartOptions.dataLabels"
[tooltip]="timeChartOptions.tooltip"
[fill]="timeChartOptions.fill"
[series]="timeChartOptions.series"
[stroke]="timeChartOptions.stroke"
[tooltip]="timeChartOptions.tooltip"
[xaxis]="timeChartOptions.xaxis"
[yaxis]="timeChartOptions.yaxis"></apx-chart>
</div>

4
projects/project-3/frontend/src/app/dashboard/dashboard.component.ts
View File

@ -148,8 +148,8 @@ export class DashboardComponent implements OnInit {
});
this.changeDetectorRefs.detectChanges();
this.map.removeTableStationMarkerOnReload();
this.selectionModel.clear();
this.route.params.subscribe(params => {
this.selectionModel.clear();
this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red'];
this.service.fetchDashboardInit(params.id).then(data => {
this.station = data;
@ -393,7 +393,7 @@ export class DashboardComponent implements OnInit {
};
});
this.map.initDashboardMap(this.station.lat, this.station.lon, 17);
this.map.drawDashboardStationMarker(this.station.lat, this.station.lon);
this.map.drawDashboardStationMarker(this.station);
}
async onSubmit(): Promise<any> {

2
projects/project-3/frontend/src/app/map/map.component.html
View File

@ -1,6 +1,6 @@
<div class="myApp">
<mat-toolbar class="mat-toolbar" color="primary">
<span>Bike Stations in London</span>
<span routerLink="/">Bike Stations in London</span>
<span class="toolbar-spacer"></span>
<app-auto-refresh></app-auto-refresh>
<a class="button-wiki" color="primary"

11
projects/project-3/frontend/src/app/service/map.service.ts
View File

@ -6,6 +6,8 @@ import {HttpClient} from '@angular/common/http';
import {environment} from '../../environments/environment';
import {PopUpService} from './pop-up.service';
import {IMapBikePoint} from './domain/map-bike-point';
import {Router} from '@angular/router';
import {IDashboardCommonBikePoint} from './domain/dashboard-common-bike-point';
const createIcon = color => L.icon({
@ -32,6 +34,7 @@ export class MapService {
constructor(
private client: HttpClient,
private popUpService: PopUpService,
private router: Router
) {
}
@ -136,8 +139,10 @@ export class MapService {
}
}
public drawDashboardStationMarker(lat: number, lon: number): void {
this.dashBoardMarker = L.marker([lat, lon], {icon: createIcon('blue')}).addTo(this.miniMap);
public drawDashboardStationMarker(station: IDashboardCommonBikePoint): void {
this.dashBoardMarker = L.marker([station.lat, station.lon], {icon: createIcon('blue')}).addTo(this.miniMap);
this.dashBoardMarker.on('mouseover', e => e.target.bindPopup(`<p>${station.commonName}</p>`).openPopup());
this.dashBoardMarker.on('mouseout', e => e.target.closePopup());
}
public removeTableStationMarkerOnReload(): void {
@ -158,6 +163,8 @@ export class MapService {
}
for (const point of bikePoints) {
const marker = L.marker([point.stationLat, point.stationLon], {icon: createIcon(point.color)}).addTo(this.miniMap);
marker.on('mouseover', e => e.target.bindPopup(`<p>${point.stationName}</p>`).openPopup());
marker.on('mouseout', e => e.target.closePopup());
this.markerLayer.push(marker);
this.miniMap.fitBounds(L.featureGroup([...this.markerLayer, this.dashBoardMarker]).getBounds());
}