Commit 086e07fc authored by Samuel Schepp's avatar Samuel Schepp

Merge branch '96-display-tags-in-mapview-with-different-marker-type' into 'develop'

Resolve "Display tags in mapview with different marker type"

Closes #96

See merge request !81
parents 1f88c006 064ff782
Pipeline #17836 passed with stages
in 7 minutes and 47 seconds
......@@ -21,6 +21,13 @@
{{mapRendererService.poisShown ? 'Hide POIs' : 'Show POIs'}}
</button>
</div>
<div class="col">
<button class="btn btn-outline-primary btn-sm" (click)="toggleTags()">
<span class="fa fa-wifi mr-1">
</span>
{{mapRendererService.tagsShown ? 'Hide Tags' : 'Show Tags'}}
</button>
</div>
<div class="col">
<button class="btn btn-outline-primary btn-sm" (click)="centerViewButtonClicked()">
<span class="fa fa-location-arrow mr-1">
......
......@@ -42,6 +42,10 @@ export class MapViewComponent implements AfterViewInit {
this.mapRendererService.togglePois();
}
toggleTags(): void {
this.mapRendererService.toggleTags();
}
centerViewButtonClicked(): void {
this.mapRendererService.setCenterView();
}
......@@ -77,5 +81,6 @@ export class MapViewComponent implements AfterViewInit {
modalRef.componentInstance.long = this.mapRendererService.getContextLong();
modalRef.componentInstance.lat = this.mapRendererService.getContextLat();
modalRef.componentInstance.level = this.mapRendererService.selectedLevel.level;
modalRef.result.then(() => {}).catch(() => {}).then(() => this.mapRendererService.drawTags());
}
}
......@@ -69,6 +69,16 @@ export const redIcon: () => Icon = () => {
});
};
export const tagIcon: () => Icon = () => {
return L.icon({
iconUrl: 'assets/wifi.png',
iconRetinaUrl: 'assets/wifi-2x.png',
iconSize: [32, 32],
iconAnchor: [16, 32],
tooltipAnchor: [16, -26],
});
};
/**
* The tooltip options for the room tags.
* @returns {TooltipOptions}
......@@ -82,10 +92,10 @@ export const toolTipOptionsRoom: () => TooltipOptions = () => {
};
/**
* The tooltip, that will be shown when the user hovers overn an POI marker.
* The tooltip, that will be shown when the user hovers over an POI marker.
* @returns {TooltipOptions}
*/
export const toolTipOptionsPOI: () => TooltipOptions = () => {
export const toolTipOptionsMarker: () => TooltipOptions = () => {
return {
direction: 'top',
};
......
......@@ -10,7 +10,8 @@ import {
startLocationView,
startZoomSelected,
startZoomView,
toolTipOptionsPOI,
tagIcon,
toolTipOptionsMarker,
toolTipOptionsRoom,
} from '../../data/map-renderer.data';
import {buildingModelDefinition} from '../../model-definitions/BuildingModelDefinition';
......@@ -24,6 +25,9 @@ import {GenericDataService} from '../generic-data/generic-data.service';
import {AddEditPoiComponent} from '../../components/add-edit/add-edit-poi/add-edit-poi.component';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import {AuthService} from '../auth/auth.service';
import {tagModelDefinition} from '../../model-definitions/TagModelDefinition';
import {TagModel} from '../../models/tag.model';
import {AddEditTagComponent} from '../../components/add-edit/add-edit-tag/add-edit-tag.component';
@Injectable()
export class MapRendererService {
......@@ -32,11 +36,13 @@ export class MapRendererService {
public selectedBuilding: BuildingModel = null;
public selectedLevel: Level = null;
public poisShown = true;
public tagsShown = true;
public error: string = '';
private polygons: Polygon[] = [];
private polygonLayers: L.Polygon[] = [];
private map: L.Map;
private markers: Array<[L.Marker, PoiModel]> = [];
private poiMarkers: Array<[L.Marker, PoiModel]> = [];
private tagMarkers: Array<[L.Marker, TagModel]> = [];
private menuPosition: L.LatLng;
constructor(private dataService: GenericDataService,
......@@ -69,6 +75,7 @@ export class MapRendererService {
this.drawBuildings();
this.drawPois();
this.drawTags();
}
setCenterView(): void {
......@@ -104,10 +111,27 @@ export class MapRendererService {
const pois = await this.dataService.get(poiModelDefinition);
pois.forEach((poi: PoiModel) => {
if (poi.levels.length === 0 && !this.selectedBuilding) {
this.addMarker(poi); // general pois like A20, THM
this.addPoiToMap(poi); // general pois like A20, THM
} else if (this.selectedBuilding && this.selectedBuilding.name === poi.building &&
this.selectedLevel && poi.levels.includes(this.selectedLevel.level)) {
this.addMarker(poi);
this.addPoiToMap(poi);
}
});
} catch (err) {
this.error = err.message;
}
}
async drawTags(): Promise<void> {
this.tagsShown = true;
try {
const tags = await this.dataService.get(tagModelDefinition);
tags.forEach((tag: TagModel) => {
if (!this.selectedLevel && tag.floor === 0) {
this.addTagToMap(tag); // general pois like A20, THM
} else if (this.selectedLevel && this.selectedLevel.level === tag.floor) {
this.addTagToMap(tag);
}
});
} catch (err) {
......@@ -123,12 +147,28 @@ export class MapRendererService {
}
}
toggleTags() {
if (this.tagsShown) {
this.removeTags();
} else {
this.drawTags();
}
}
removePois() {
this.poisShown = false;
this.markers.forEach((tuple) => {
this.poiMarkers.forEach((tuple) => {
tuple[0].removeFrom(this.map);
});
this.poiMarkers = [];
}
removeTags() {
this.tagsShown = false;
this.tagMarkers.forEach((tuple) => {
tuple[0].removeFrom(this.map);
});
this.markers = [];
this.tagMarkers = [];
}
drawLevel() {
......@@ -147,6 +187,8 @@ export class MapRendererService {
this.applyPolygons();
this.removePois();
this.drawPois();
this.removeTags();
this.drawTags();
}
public leaveBuilding(): void {
......@@ -154,7 +196,9 @@ export class MapRendererService {
this.drawBuildings();
}
this.removePois();
this.removeTags();
this.drawPois();
this.drawTags();
}
public isBuildingClicked(): boolean {
......@@ -173,7 +217,7 @@ export class MapRendererService {
return this.menuPosition.lng;
}
private addMarker(poi: PoiModel) {
private addPoiToMap(poi: PoiModel) {
let marker: L.Marker;
marker = L.marker([poi.latitude, poi.longitude],
{
......@@ -186,8 +230,25 @@ export class MapRendererService {
}
});
marker.addTo(this.map);
marker.bindTooltip(poi.name, toolTipOptionsPOI());
this.markers.push([marker, poi]);
marker.bindTooltip(poi.name, toolTipOptionsMarker());
this.poiMarkers.push([marker, poi]);
}
private addTagToMap(tag: TagModel) {
let marker: L.Marker;
marker = L.marker([tag.coordinates.lat, tag.coordinates.lng],
{
title: tag.name,
icon: tagIcon(),
});
marker.on('click', () => {
if (this.authService.isLoggedIn()) {
this.editTag(tag.getID());
}
});
marker.addTo(this.map);
marker.bindTooltip(tag.name, toolTipOptionsMarker());
this.tagMarkers.push([marker, tag]);
}
private editPoi(id: string) {
......@@ -199,6 +260,15 @@ export class MapRendererService {
});
}
private editTag(id: string) {
const modalRef = this.modalService.open(AddEditTagComponent, {size: 'lg'});
modalRef.componentInstance.id = id;
modalRef.result.then(() => {
this.removeTags();
this.drawTags();
});
}
private clearPolygons() {
this.polygonLayers.forEach((polygonLayer) => this.map.removeLayer(polygonLayer));
this.polygonLayers = [];
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment