xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00
Code Actions Projects Activity

positioning small map

Browse Source
This commit is contained in:
Braun Patrik 2017-01-23 21:29:07 +01:00
parent f1a43c9f92
commit 935b723bdb
5 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/app/gallery/gallery.component.css
View File

@ -1,3 +1,7 @@
.sebm-google-map-container { gallery-map {
height: 300px; margin-right: 0;
margin-left: auto;
display: block;
height: 80px;
width: 100px;
} }

3
frontend/app/gallery/gallery.component.html
View File

@ -7,9 +7,10 @@
<div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.directory"> <div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.directory">
<gallery-navbar [directory]="_galleryService.content.directory"></gallery-navbar> <gallery-navbar [directory]="_galleryService.content.directory"></gallery-navbar>
<gallery-map [photos]="_galleryService.content.directory.photos"></gallery-map>
<gallery-directory *ngFor="let directory of _galleryService.content.directory.directories" <gallery-directory *ngFor="let directory of _galleryService.content.directory.directories"
[directory]="directory"></gallery-directory> [directory]="directory"></gallery-directory>
<gallery-map [photos]="_galleryService.content.directory.photos"></gallery-map>
<gallery-grid [photos]="_galleryService.content.directory.photos" [lightbox]="lightbox"></gallery-grid> <gallery-grid [photos]="_galleryService.content.directory.photos" [lightbox]="lightbox"></gallery-grid>
</div> </div>

4
frontend/app/gallery/map/map.gallery.component.css
View File

@ -1,4 +1,4 @@
.sebm-google-map-container { .sebm-google-map-container {
height: 150px; width: 100%;
width: 200px; height: 100%;
} }

8
frontend/app/gallery/map/map.gallery.component.html
View File

@ -1,4 +1,10 @@
<sebm-google-map [zoom]="0"> <sebm-google-map
[disableDefaultUI]="true"
[zoomControl]="false"
[streetViewControl]="false"
[zoom]="0"
[latitude]="mapCenter.latitude"
[longitude]="mapCenter.longitude">
<sebm-google-map-marker <sebm-google-map-marker
*ngFor="let photo of mapPhotos" *ngFor="let photo of mapPhotos"

12
frontend/app/gallery/map/map.gallery.component.ts
View File

@ -10,12 +10,14 @@ export class GalleryMapComponent implements OnChanges {
@Input() photos: Array<PhotoDTO>; @Input() photos: Array<PhotoDTO>;
mapPhotos: Array<{latitude, longitude, iconUrl}> = []; mapPhotos: Array<{latitude: string, longitude: string, iconUrl}> = [];
mapCenter = {latitude: "0", longitude: "0"};
//TODO: fix zooming //TODO: fix zooming
ngOnChanges() { ngOnChanges() {
this.mapPhotos = this.photos.filter(p => p.metadata.positionData.GPSData).map(p => { this.mapPhotos = this.photos.filter(p => {
return p.metadata && p.metadata.positionData && p.metadata.positionData.GPSData;
}).map(p => {
return { return {
latitude: p.metadata.positionData.GPSData.latitude, latitude: p.metadata.positionData.GPSData.latitude,
longitude: p.metadata.positionData.GPSData.longitude, longitude: p.metadata.positionData.GPSData.longitude,
@ -23,6 +25,10 @@ export class GalleryMapComponent implements OnChanges {
}; };
}); });
if (this.mapPhotos.length > 0) {
this.mapCenter = this.mapPhotos[0];
}
} }
} }