fossilfranv/pigallery2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fixing map bug, adding mapbox support

Browse Source
This commit is contained in:
Patrik J. Braun 2018-12-08 11:28:56 +01:00
parent b27365bbad
commit 452ead4fa7
23 changed files with 138 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
angular.json
View File

@ -17,15 +17,9 @@
"tsConfig": "frontend/tsconfig.app.json", "tsConfig": "frontend/tsconfig.app.json",
"polyfills": "frontend/polyfills.ts", "polyfills": "frontend/polyfills.ts",
"assets": [ "assets": [
{
"glob": "**/*",
"input": "./node_modules/leaflet/dist/images",
"output": "/"
},
"frontend/assets" "frontend/assets"
], ],
"styles": [ "styles": [
"node_modules/leaflet/dist/leaflet.css",
"node_modules/ngx-toastr/toastr.css", "node_modules/ngx-toastr/toastr.css",
"node_modules/bootstrap/dist/css/bootstrap.css", "node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/open-iconic/font/css/open-iconic-bootstrap.css", "node_modules/open-iconic/font/css/open-iconic-bootstrap.css",
@ -83,6 +77,7 @@
"node_modules/ngx-toastr/toastr.css", "node_modules/ngx-toastr/toastr.css",
"node_modules/bootstrap/dist/css/bootstrap.css", "node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/open-iconic/font/css/open-iconic-bootstrap.css", "node_modules/open-iconic/font/css/open-iconic-bootstrap.css",
"node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"frontend/styles.css" "frontend/styles.css"
], ],
"assets": [ "assets": [

11
backend/model/diagnostics/ConfigDiagnostics.ts
View File

@ -154,8 +154,15 @@ export class ConfigDiagnostics {
} }
static async testMapConfig(map: ClientConfig.MapConfig) { static async testMapConfig(map: ClientConfig.MapConfig): Promise<void> {
if (map.enabled === true && map.mapProvider === ClientConfig.MapProviders.Custom && if (map.enabled === false) {
return;
}
if (map.mapProvider === ClientConfig.MapProviders.Mapbox &&
(!map.mapboxAccessToken || map.mapboxAccessToken.length === 0)) {
throw new Error('Mapbox needs a valid api key.');
}
if (map.mapProvider === ClientConfig.MapProviders.Custom &&
(!map.tileUrl || map.tileUrl.length === 0)) { (!map.tileUrl || map.tileUrl.length === 0)) {
throw new Error('Custom maps need a valid tile url'); throw new Error('Custom maps need a valid tile url');
} }

2
backend/routes/PublicRouter.ts
View File

@ -90,7 +90,7 @@ export class PublicRouter {
); );
}); });
app.get('/assets/:file', app.get('/assets/:file(*)',
setLocale, setLocale,
(req: Request, res: Response) => { (req: Request, res: Response) => {
const file = path.resolve(ProjectPath.FrontendFolder, req['localePath'], 'assets', req.params.file); const file = path.resolve(ProjectPath.FrontendFolder, req['localePath'], 'assets', req.params.file);

4
common/config/public/ConfigClass.ts
View File

@ -4,7 +4,7 @@ import {UserRoles} from '../../entities/UserDTO';
export module ClientConfig { export module ClientConfig {
export enum MapProviders { export enum MapProviders {
OpenStreetMap, Custom OpenStreetMap, Mapbox, Custom
} }
export interface SearchConfig { export interface SearchConfig {
@ -29,6 +29,7 @@ export module ClientConfig {
export interface MapConfig { export interface MapConfig {
enabled: boolean; enabled: boolean;
mapProvider: MapProviders; mapProvider: MapProviders;
mapboxAccessToken: string;
tileUrl: string; tileUrl: string;
} }
@ -107,6 +108,7 @@ export class PublicConfigClass {
Map: { Map: {
enabled: true, enabled: true,
mapProvider: ClientConfig.MapProviders.OpenStreetMap, mapProvider: ClientConfig.MapProviders.OpenStreetMap,
mapboxAccessToken: '',
tileUrl: '' tileUrl: ''
}, },
RandomPhoto: { RandomPhoto: {

BIN
docs/assets/lightbox_info.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 308 KiB

After

Width:  |  Height:  |  Size: 422 KiB

BIN
docs/assets/main_page.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 271 KiB

After

Width:  |  Height:  |  Size: 342 KiB

BIN
docs/assets/map.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 251 KiB

After

Width:  |  Height:  |  Size: 245 KiB

BIN
docs/assets/random_link.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 224 KiB

After

Width:  |  Height:  |  Size: 286 KiB

BIN
docs/assets/search.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 232 KiB

After

Width:  |  Height:  |  Size: 298 KiB

BIN
docs/assets/sharing.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 217 KiB

After

Width:  |  Height:  |  Size: 280 KiB

6
docs/index.html
View File

@ -16,7 +16,7 @@
<body class="text-center"> <body class="text-center">
<a href="https://github.com/bpatrik/pigallery2"><img style="position: absolute; top: 0; left: 0; border: 0;" <a href="https://github.com/bpatrik/pigallery2"><img style="position: absolute; top: 0; left: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_left_white_ffffff.png" src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"
alt="Fork me on GitHub"></a> alt="Fork me on GitHub"></a>
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column "> <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column ">
<header class="masthead"> <header class="masthead">
@ -66,8 +66,10 @@
</div> </div>
<div class="col"> <div class="col">
<h3>Map</h3> <h3>Map</h3>
PiGallery2 reads the location data of the photos and puts them on google maps. PiGallery2 reads the location data of the photos and puts them on a nice map.
The gallery also supports *.gps file to show your tracked path on the map too. The gallery also supports *.gps file to show your tracked path on the map too.
It by default supports <a href="https://www.openstreetmap.org">OpenStreetMap</a> and <a
href="https://www.mapbox.com">Mapbox</a>, but you can also add you own favourite map provider.
</div> </div>
</div> </div>

12
frontend/app/app.module.ts
View File

@ -74,6 +74,7 @@ import {FixOrientationPipe} from './gallery/FixOrientationPipe';
import {VideoSettingsComponent} from './settings/video/video.settings.component'; import {VideoSettingsComponent} from './settings/video/video.settings.component';
import {DurationPipe} from './pipes/DurationPipe'; import {DurationPipe} from './pipes/DurationPipe';
import {MapService} from './gallery/map/map.service'; import {MapService} from './gallery/map/map.service';
import {Icon} from 'leaflet';
import {MetaFileSettingsComponent} from './settings/metafiles/metafile.settings.component'; import {MetaFileSettingsComponent} from './settings/metafiles/metafile.settings.component';
@ -83,7 +84,16 @@ export class MyHammerConfig extends HammerGestureConfig {
'swipe': {direction: 31} // enable swipe up 'swipe': {direction: 31} // enable swipe up
}; };
} }
/*
console.log(Icon);
console.log(Icon.Default);
console.log(Icon.Default.prototype);
console.log(Icon.Default.prototype.options);
Icon.Default.prototype.options.iconRetinaUrl = 'assets/leaflet/marker-icon-2x.png';
Icon.Default.imagePath = 'assets/leaflet/marker-icon.png';
Icon.Default.prototype.options.iconUrl = 'assets/leaflet/marker-icon.png';
Icon.Default.prototype.options.shadowUrl = 'assets/leaflet/marker-shadow.png';
*/
export class CustomUrlSerializer implements UrlSerializer { export class CustomUrlSerializer implements UrlSerializer {
private _defaultUrlSerializer: DefaultUrlSerializer = new DefaultUrlSerializer(); private _defaultUrlSerializer: DefaultUrlSerializer = new DefaultUrlSerializer();

4
frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html
View File

@ -105,6 +105,10 @@
[lat]="PositionData.GPSData.latitude" [lat]="PositionData.GPSData.latitude"
[lng]="PositionData.GPSData.longitude"> [lng]="PositionData.GPSData.longitude">
</yaga-marker> </yaga-marker>
<yaga-attribution-control
prefix=""
[attributions]="mapService.Attributions">
</yaga-attribution-control>
<yaga-tile-layer [url]="mapService.MapLayer"></yaga-tile-layer> <yaga-tile-layer [url]="mapService.MapLayer"></yaga-tile-layer>
</yaga-map> </yaga-map>
</div> </div>

5
frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.html
View File

@ -46,8 +46,9 @@
</yaga-popup> </yaga-popup>
</yaga-marker> </yaga-marker>
<yaga-attribution-control <yaga-attribution-control
[attributions]="mapService.Attributions" prefix=""
></yaga-attribution-control> [attributions]="mapService.Attributions">
</yaga-attribution-control>
<yaga-tile-layer [url]="mapService.MapLayer"></yaga-tile-layer> <yaga-tile-layer [url]="mapService.MapLayer"></yaga-tile-layer>
</yaga-map> </yaga-map>
</div> </div>

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

@ -12,10 +12,17 @@
*ngFor="let photo of mapPhotos" *ngFor="let photo of mapPhotos"
[lat]="photo.lat" [lat]="photo.lat"
[lng]="photo.lng"> [lng]="photo.lng">
<!-- <yaga-icon
[iconSize]="[25,41]"
[iconAnchor]="[13,41]"
iconUrl="assets/leaflet/marker-icon.png"
shadowUrl="assets/leaflet/marker-shadow.png"
></yaga-icon>-->
</yaga-marker> </yaga-marker>
<yaga-attribution-control <yaga-attribution-control
[attributions]="mapService.Attributions" prefix=""
></yaga-attribution-control> [attributions]="mapService.ShortAttributions">
</yaga-attribution-control>
<yaga-tile-layer [url]="mapService.MapLayer"></yaga-tile-layer> <yaga-tile-layer [url]="mapService.MapLayer"></yaga-tile-layer>
</yaga-map> </yaga-map>
<div class="overlay" (click)="click()" <div class="overlay" (click)="click()"

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

@ -38,8 +38,8 @@ export class GalleryMapComponent implements OnChanges, IRenderable, AfterViewIni
}); });
if (this.yagaMap) { if (this.yagaMap) {
this.yagaMap.setView(this.mapPhotos[0], 0); this.yagaMap.setView(this.mapPhotos[0], 99);
this.yagaMap.fitBounds(<any>this.mapPhotos); this.yagaMap.fitBounds(this.mapPhotos.map(mp => <[number, number]>[mp.lat, mp.lng]));
this.yagaMap.zoom = 0; this.yagaMap.zoom = 0;
} }
@ -48,8 +48,8 @@ export class GalleryMapComponent implements OnChanges, IRenderable, AfterViewIni
ngAfterViewInit() { ngAfterViewInit() {
setTimeout(() => { setTimeout(() => {
this.height = this.mapElement.nativeElement.clientHeight; this.height = this.mapElement.nativeElement.clientHeight;
this.yagaMap.setView(this.mapPhotos[0], 0); this.yagaMap.setView(this.mapPhotos[0], 99);
this.yagaMap.fitBounds(<any>this.mapPhotos); this.yagaMap.fitBounds(this.mapPhotos.map(mp => <[number, number]>[mp.lat, mp.lng]));
this.yagaMap.zoom = 0; this.yagaMap.zoom = 0;
}, 0); }, 0);
} }

38
frontend/app/gallery/map/map.service.ts
View File

@ -2,7 +2,6 @@ import {Injectable} from '@angular/core';
import {NetworkService} from '../../model/network/network.service'; import {NetworkService} from '../../model/network/network.service';
import {FileDTO} from '../../../../common/entities/FileDTO'; import {FileDTO} from '../../../../common/entities/FileDTO';
import {Utils} from '../../../../common/Utils'; import {Utils} from '../../../../common/Utils';
import {OSM_TILE_LAYER_URL} from '@yaga/leaflet-ng2';
import {Config} from '../../../../common/config/public/Config'; import {Config} from '../../../../common/config/public/Config';
import {ClientConfig} from '../../../../common/config/public/ConfigClass'; import {ClientConfig} from '../../../../common/config/public/ConfigClass';
@ -29,15 +28,48 @@ export class MapService {
} }
public get ShortAttributions(): string[] {
const yaga = '<a href="https://yagajs.org" title="YAGA">YAGA</a>';
const lf = '<a href="https://leaflet-ng2.yagajs.org" title="Leaflet in Angular2">leaflet-ng2</a>';
const OSM = '<a href="https://www.openstreetmap.org/copyright">OSM</a>';
const MB = '<a href="https://www.mapbox.com/">Mapbox</a>';
if (Config.Client.Map.mapProvider === ClientConfig.MapProviders.OpenStreetMap) {
return [yaga + ' | &copy; ' + OSM];
}
if (Config.Client.Map.mapProvider === ClientConfig.MapProviders.Mapbox) {
return [yaga + ' | ' + OSM + ' | ' + MB];
}
return [yaga + ' | ' + lf];
}
public get Attributions(): string[] { public get Attributions(): string[] {
return ['&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>']; const yagalf = '<a href="https://yagajs.org" title="YAGA">YAGA</a> | ' +
'<a href="https://leaflet-ng2.yagajs.org" title="Leaflet in Angular2">leaflet-ng2</a>';
const OSM = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>';
const MB = '&copy; <a href="https://www.mapbox.com/">Mapbox</a>';
if (Config.Client.Map.mapProvider === ClientConfig.MapProviders.OpenStreetMap) {
return [yagalf + ' | ' + OSM];
}
if (Config.Client.Map.mapProvider === ClientConfig.MapProviders.Mapbox) {
return [yagalf + ' | ' + OSM + ' | ' + MB];
}
return [yagalf];
} }
public get MapLayer(): string { public get MapLayer(): string {
if (Config.Client.Map.mapProvider === ClientConfig.MapProviders.Custom) { if (Config.Client.Map.mapProvider === ClientConfig.MapProviders.Custom) {
return Config.Client.Map.tileUrl; return Config.Client.Map.tileUrl;
} }
return OSM_TILE_LAYER_URL; if (Config.Client.Map.mapProvider === ClientConfig.MapProviders.Mapbox) {
return 'https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token='
+ Config.Client.Map.mapboxAccessToken;
}
return 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
} }
} }

13
frontend/app/settings/map/map.settings.component.html
View File

@ -45,6 +45,19 @@
</div> </div>
</div> </div>
<div class="form-group row" *ngIf="settings.mapProvider === MapProviders.Mapbox">
<label class="col-md-2 control-label" for="mapboxAccessToken" i18n>Mapbox access token</label>
<div class="col-md-10">
<input type="text" class="form-control" placeholder="Mapbox access token"
[(ngModel)]="settings.mapboxAccessToken"
name="mapboxAccessToken" id="mapboxAccessToken" required>
<small class="form-text text-muted">
<ng-container i18n>MapBox needs an access token to work, create one at </ng-container><a href="https://www.mapbox.com">https://www.mapbox.com</a>.
</small>
</div>
</div>
<button class="btn btn-success float-right" <button class="btn btn-success float-right"
[disabled]="!settingsForm.form.valid || !changed || inProgress" [disabled]="!settingsForm.form.valid || !changed || inProgress"
(click)="save()" i18n>Save (click)="save()" i18n>Save

1
frontend/app/settings/settings.service.ts
View File

@ -34,6 +34,7 @@ export class SettingsService {
Map: { Map: {
enabled: true, enabled: true,
mapProvider: ClientConfig.MapProviders.OpenStreetMap, mapProvider: ClientConfig.MapProviders.OpenStreetMap,
mapboxAccessToken: '',
tileUrl: '' tileUrl: ''
}, },
RandomPhoto: { RandomPhoto: {

3
frontend/index.html
View File

@ -9,6 +9,9 @@
<link rel="stylesheet" <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.css"> href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script> <script>
var ServerInject = {user: <%- JSON.stringify(user); %>, ConfigInject: <%- JSON.stringify(clientConfig); %>} var ServerInject = {user: <%- JSON.stringify(user); %>, ConfigInject: <%- JSON.stringify(clientConfig); %>}

20
frontend/translate/messages.en.xlf
View File

@ -604,12 +604,28 @@
</context-group> </context-group>
<target>The map module will use this url to fetch the map tiles.</target> <target>The map module will use this url to fetch the map tiles.</target>
</trans-unit> </trans-unit>
<trans-unit id="d43c7ef9da77ac203afc6f0b748adfc03a10e569" datatype="html">
<source>Mapbox access token</source>
<context-group purpose="location">
<context context-type="sourcefile">app/settings/map/map.settings.component.html</context>
<context context-type="linenumber">49</context>
</context-group>
<target>Mapbox access token</target>
</trans-unit>
<trans-unit id="0afcc21341fab96f7e87fa4ef028e4a58b20190b" datatype="html">
<source>MapBox needs an access token to work, create one at </source>
<context-group purpose="location">
<context context-type="sourcefile">app/settings/map/map.settings.component.html</context>
<context context-type="linenumber">55</context>
</context-group>
<target>MapBox needs an access token to work, create one at</target>
</trans-unit>
<trans-unit id="d682be8fc94c1861394919e021e9dcf8def8f554" datatype="html"> <trans-unit id="d682be8fc94c1861394919e021e9dcf8def8f554" datatype="html">
<source>Save <source>Save
</source> </source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">app/settings/map/map.settings.component.html</context> <context context-type="sourcefile">app/settings/map/map.settings.component.html</context>
<context context-type="linenumber">50</context> <context context-type="linenumber">63</context>
</context-group> </context-group>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">app/settings/thumbnail/thumbanil.settings.component.html</context> <context context-type="sourcefile">app/settings/thumbnail/thumbanil.settings.component.html</context>
@ -650,7 +666,7 @@
</source> </source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">app/settings/map/map.settings.component.html</context> <context context-type="sourcefile">app/settings/map/map.settings.component.html</context>
<context context-type="linenumber">53</context> <context context-type="linenumber">66</context>
</context-group> </context-group>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">app/settings/thumbnail/thumbanil.settings.component.html</context> <context context-type="sourcefile">app/settings/thumbnail/thumbanil.settings.component.html</context>

20
frontend/translate/messages.hu.xlf
View File

@ -604,12 +604,28 @@
</context-group> </context-group>
<target>A térkép modul ezt az URL-t fogja használni a térkép letöltéséhez.</target> <target>A térkép modul ezt az URL-t fogja használni a térkép letöltéséhez.</target>
</trans-unit> </trans-unit>
<trans-unit id="d43c7ef9da77ac203afc6f0b748adfc03a10e569" datatype="html">
<source>Mapbox access token</source>
<context-group purpose="location">
<context context-type="sourcefile">app/settings/map/map.settings.component.html</context>
<context context-type="linenumber">49</context>
</context-group>
<target>Mapbox access token</target>
</trans-unit>
<trans-unit id="0afcc21341fab96f7e87fa4ef028e4a58b20190b" datatype="html">
<source>MapBox needs an access token to work, create one at </source>
<context-group purpose="location">
<context context-type="sourcefile">app/settings/map/map.settings.component.html</context>
<context context-type="linenumber">55</context>
</context-group>
<target>A MapBox-hoz access token szükséges, amit itt lehet létrehozni:</target>
</trans-unit>
<trans-unit id="d682be8fc94c1861394919e021e9dcf8def8f554" datatype="html"> <trans-unit id="d682be8fc94c1861394919e021e9dcf8def8f554" datatype="html">
<source>Save <source>Save
</source> </source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">app/settings/map/map.settings.component.html</context> <context context-type="sourcefile">app/settings/map/map.settings.component.html</context>
<context context-type="linenumber">50</context> <context context-type="linenumber">63</context>
</context-group> </context-group>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">app/settings/thumbnail/thumbanil.settings.component.html</context> <context context-type="sourcefile">app/settings/thumbnail/thumbanil.settings.component.html</context>
@ -650,7 +666,7 @@
</source> </source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">app/settings/map/map.settings.component.html</context> <context context-type="sourcefile">app/settings/map/map.settings.component.html</context>
<context context-type="linenumber">53</context> <context context-type="linenumber">66</context>
</context-group> </context-group>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">app/settings/thumbnail/thumbanil.settings.component.html</context> <context context-type="sourcefile">app/settings/thumbnail/thumbanil.settings.component.html</context>