Commit 68c03d7a authored by Yannick Lehnhausen's avatar Yannick Lehnhausen

Resolve "Search for Map View"

parent 1dd5ceb9
.map-toolbar {
z-index: 1022;
pointer-events: none;
width: auto;
}
.map-toolbar .btn {
......
......@@ -29,6 +29,16 @@
Go to THM
</button>
</div>
<div class="col" >
<button class="btn btn-outline-primary btn-sm"
(click)="toggleSearch()">
<span class="fas fa-search">
</span>
</button>
</div>
<div class="col" *ngIf="this.searchToggled" style="display:inline;">
<input type="text" placeholder="Search POI" (keypress) = "this.searchPoi($event)" />
</div>
<div class="col" *ngIf="this.mapRendererService.isBuildingClicked()">
<button class="btn btn-outline-primary btn-sm"
(click)="leaveBuilding()">
......
......@@ -32,6 +32,8 @@ export class MapViewComponent implements AfterViewInit, OnDestroy {
end: NavigationPoint | null;
routingState: RoutingState;
buildingEnteredOrLeftSubscription: Subscription;
searchToggled: boolean;
searchterm: string;
constructor(public mapRendererService: MapRendererService,
private modalService: NgbModal,
......@@ -39,6 +41,8 @@ export class MapViewComponent implements AfterViewInit, OnDestroy {
public routeService: RouteService) {
this.route = null;
this.routingState = RoutingState.NotStarted;
this.searchToggled = false;
this.searchterm = null;
this.buildingEnteredOrLeftSubscription = this.mapRendererService.buildingEnteredOrLeft.subscribe(() => {
this.rerenderRoute();
......@@ -168,6 +172,19 @@ export class MapViewComponent implements AfterViewInit, OnDestroy {
this.mapRendererService.stopRouting();
}
toggleSearch(): void {
this.searchToggled = !this.searchToggled;
if (this.searchToggled === false) {
this.mapRendererService.drawPois();
}
}
searchPoi(event: any): void {
if (event.key === 'Enter') {
this.mapRendererService.searchPoi(event.target.value);
}
}
async findRoute(): Promise<void> {
this.routingState = RoutingState.Finding;
this.route = await this.routeService.get(new NavigationRequest(this.start, this.end));
......
......@@ -92,6 +92,10 @@ export const redIcon = () => {
return icon('assets/red-marker-icon.png', 'assets/red-marker-icon-2x.png');
};
export const favIcon = () => {
return icon('assets/wifi.png', 'assets/wifi-2x.png');
};
export const aIcon = () => {
return icon('assets/navigationMarkers/a-marker-icon.png', 'assets/navigationMarkers/a-marker-icon-2x.png');
};
......
......@@ -203,6 +203,10 @@ export class PoiModel implements IModel {
*/
getRevision(): number { return this.revision; }
getDescription(): string { return this.description; }
getName(): string { return this.name; }
getLatLng(): L.Marker {
let marker: L.Marker;
marker = L.marker([this.latitude, this.longitude],
......
......@@ -16,7 +16,7 @@ import {
startZoomSelected,
startZoomView,
toolTipOptionsMarker,
toolTipOptionsRoom,
toolTipOptionsRoom, defaultCategorieIcon, redIcon, favIcon,
} from '../../data/map-renderer.data';
import {buildingModelDefinition} from '../../model-definitions/BuildingModelDefinition';
import {poiModelDefinition} from '../../model-definitions/PoiModelDefinition';
......@@ -52,6 +52,7 @@ export class MapRendererService {
private poiMarkers: Array<[L.Marker, PoiModel]> = [];
private poiMarkersPositions: Array<[L.Marker, PoiModel]> = [];
private menuPosition: L.LatLng;
private searchedPoi: PoiModel;
public buildingEnteredOrLeft = new EventEmitter<void>();
/*
......@@ -122,20 +123,30 @@ export class MapRendererService {
}
}
async drawPois(): Promise<void> {
private createMarkerForPoi(poi: PoiModel, id?: string) {
this.poiMarkersPositions.push([poi.getLatLng(), poi]);
if (id) {
if (poi.getID() === id) {
this.addPoiToMap(poi);
}
} else {
if (poi.building.length === 0 && !this.selectedBuilding && poi.id !== this.selectedID) {
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) && poi.id !== this.selectedID) {
this.addPoiToMap(poi);
}
}
}
async drawPois(id?: string): Promise<void> {
this.removePois();
this.poisShown = true;
try {
const pois = await this.dataService.get(poiModelDefinition);
pois.forEach((poi: PoiModel) => {
this.poiMarkersPositions.push([poi.getLatLng(), poi]);
if (poi.building.length === 0 && !this.selectedBuilding && poi.id !== this.selectedID) {
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) && poi.id !== this.selectedID) {
this.addPoiToMap(poi);
}
this.createMarkerForPoi(poi, id);
});
} catch (err) {
this.error = err.message;
......@@ -150,6 +161,13 @@ export class MapRendererService {
}
}
highlightSearchedPoi() {
this.poiMarkers.forEach((poi) => {
poi[0].removeFrom(this.map);
});
this.poiMarkers = [];
}
cutPoi() {
this.poiCut = true;
this.poiMarked = false;
......@@ -208,8 +226,8 @@ export class MapRendererService {
this.applyPolygons();
}
public leaveBuilding(): void {
this.drawPois();
public leaveBuilding(id?: string): void {
this.drawPois(id);
if (this.isBuildingClicked()) {
this.drawBuildings();
}
......@@ -283,6 +301,20 @@ export class MapRendererService {
}).catch( (error) => error);
}
searchPoi(searchterm: string) {
this.removePois();
this.poiMarkersPositions.forEach((poiMarker) => {
if (poiMarker[1].getName().toLowerCase().includes(searchterm.toLowerCase()) ||
poiMarker[1].getDescription().toLowerCase().includes(searchterm.toLowerCase())) {
if (poiMarker[1].levels.length <= 0) {
this.leaveBuilding(poiMarker[1].getID());
}
this.drawPois(poiMarker[1].getID());
this.map.setView(poiMarker[0].getLatLng(), startZoomView);
}
});
}
private isMarkerInsidePolygon(marker: L.Marker, polygon: Polygon) {
const poly = L.polygon(polygon.latlngs);
let inside = false;
......
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