diff --git a/angular.json b/angular.json
index dcab19b..6908d43 100644
--- a/angular.json
+++ b/angular.json
@@ -17,15 +17,9 @@
             "tsConfig": "frontend/tsconfig.app.json",
             "polyfills": "frontend/polyfills.ts",
             "assets": [
-              {
-                "glob": "**/*",
-                "input": "./node_modules/leaflet/dist/images",
-                "output": "/"
-              },
               "frontend/assets"
             ],
             "styles": [
-              "node_modules/leaflet/dist/leaflet.css",
               "node_modules/ngx-toastr/toastr.css",
               "node_modules/bootstrap/dist/css/bootstrap.css",
               "node_modules/open-iconic/font/css/open-iconic-bootstrap.css",
@@ -83,6 +77,7 @@
               "node_modules/ngx-toastr/toastr.css",
               "node_modules/bootstrap/dist/css/bootstrap.css",
               "node_modules/open-iconic/font/css/open-iconic-bootstrap.css",
+              "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
               "frontend/styles.css"
             ],
             "assets": [
diff --git a/backend/model/diagnostics/ConfigDiagnostics.ts b/backend/model/diagnostics/ConfigDiagnostics.ts
index e261153..54c6d3e 100644
--- a/backend/model/diagnostics/ConfigDiagnostics.ts
+++ b/backend/model/diagnostics/ConfigDiagnostics.ts
@@ -154,8 +154,15 @@ export class ConfigDiagnostics {
   }
 
 
-  static async testMapConfig(map: ClientConfig.MapConfig) {
-    if (map.enabled === true && map.mapProvider === ClientConfig.MapProviders.Custom &&
+  static async testMapConfig(map: ClientConfig.MapConfig): Promise<void> {
+    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)) {
       throw new Error('Custom maps need a valid tile url');
     }
diff --git a/backend/routes/PublicRouter.ts b/backend/routes/PublicRouter.ts
index e21881a..1cf6e18 100644
--- a/backend/routes/PublicRouter.ts
+++ b/backend/routes/PublicRouter.ts
@@ -90,7 +90,7 @@ export class PublicRouter {
       );
     });
 
-    app.get('/assets/:file',
+    app.get('/assets/:file(*)',
       setLocale,
       (req: Request, res: Response) => {
         const file = path.resolve(ProjectPath.FrontendFolder, req['localePath'], 'assets', req.params.file);
diff --git a/common/config/public/ConfigClass.ts b/common/config/public/ConfigClass.ts
index ca7d55a..6cff3df 100644
--- a/common/config/public/ConfigClass.ts
+++ b/common/config/public/ConfigClass.ts
@@ -4,7 +4,7 @@ import {UserRoles} from '../../entities/UserDTO';
 export module ClientConfig {
 
   export enum MapProviders {
-    OpenStreetMap, Custom
+    OpenStreetMap, Mapbox, Custom
   }
 
   export interface SearchConfig {
@@ -29,6 +29,7 @@ export module ClientConfig {
   export interface MapConfig {
     enabled: boolean;
     mapProvider: MapProviders;
+    mapboxAccessToken: string;
     tileUrl: string;
   }
 
@@ -107,6 +108,7 @@ export class PublicConfigClass {
     Map: {
       enabled: true,
       mapProvider: ClientConfig.MapProviders.OpenStreetMap,
+      mapboxAccessToken: '',
       tileUrl: ''
     },
     RandomPhoto: {
diff --git a/docs/assets/lightbox_info.jpg b/docs/assets/lightbox_info.jpg
index da6320c..7c96b14 100644
Binary files a/docs/assets/lightbox_info.jpg and b/docs/assets/lightbox_info.jpg differ
diff --git a/docs/assets/main_page.jpg b/docs/assets/main_page.jpg
index 036149d..ce53b04 100644
Binary files a/docs/assets/main_page.jpg and b/docs/assets/main_page.jpg differ
diff --git a/docs/assets/map.jpg b/docs/assets/map.jpg
index 1000325..9d65f57 100644
Binary files a/docs/assets/map.jpg and b/docs/assets/map.jpg differ
diff --git a/docs/assets/random_link.jpg b/docs/assets/random_link.jpg
index 3b07468..40e983a 100644
Binary files a/docs/assets/random_link.jpg and b/docs/assets/random_link.jpg differ
diff --git a/docs/assets/search.jpg b/docs/assets/search.jpg
index cd7537c..fc0a4a6 100644
Binary files a/docs/assets/search.jpg and b/docs/assets/search.jpg differ
diff --git a/docs/assets/sharing.jpg b/docs/assets/sharing.jpg
index cacb215..e476cac 100644
Binary files a/docs/assets/sharing.jpg and b/docs/assets/sharing.jpg differ
diff --git a/docs/index.html b/docs/index.html
index be947e0..5e9b0fd 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -16,7 +16,7 @@
 
 <body class="text-center">
 <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>
 <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column ">
   <header class="masthead">
@@ -66,8 +66,10 @@
       </div>
       <div class="col">
         <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.
+        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>
 
diff --git a/frontend/app/app.module.ts b/frontend/app/app.module.ts
index ee47f41..d0552f4 100644
--- a/frontend/app/app.module.ts
+++ b/frontend/app/app.module.ts
@@ -74,6 +74,7 @@ import {FixOrientationPipe} from './gallery/FixOrientationPipe';
 import {VideoSettingsComponent} from './settings/video/video.settings.component';
 import {DurationPipe} from './pipes/DurationPipe';
 import {MapService} from './gallery/map/map.service';
+import {Icon} from 'leaflet';
 import {MetaFileSettingsComponent} from './settings/metafiles/metafile.settings.component';
 
 
@@ -83,7 +84,16 @@ export class MyHammerConfig extends HammerGestureConfig {
     '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 {
   private _defaultUrlSerializer: DefaultUrlSerializer = new DefaultUrlSerializer();
 
diff --git a/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html b/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html
index 2a89017..58b17f0 100644
--- a/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html
+++ b/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html
@@ -105,6 +105,10 @@
         [lat]="PositionData.GPSData.latitude"
         [lng]="PositionData.GPSData.longitude">
       </yaga-marker>
+      <yaga-attribution-control
+        prefix=""
+        [attributions]="mapService.Attributions">
+      </yaga-attribution-control>
       <yaga-tile-layer [url]="mapService.MapLayer"></yaga-tile-layer>
     </yaga-map>
   </div>
diff --git a/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.html b/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.html
index f29eb2b..adf3303 100644
--- a/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.html
+++ b/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.html
@@ -46,8 +46,9 @@
         </yaga-popup>
       </yaga-marker>
       <yaga-attribution-control
-        [attributions]="mapService.Attributions"
-      ></yaga-attribution-control>
+        prefix=""
+        [attributions]="mapService.Attributions">
+      </yaga-attribution-control>
       <yaga-tile-layer [url]="mapService.MapLayer"></yaga-tile-layer>
     </yaga-map>
   </div>
diff --git a/frontend/app/gallery/map/map.gallery.component.html b/frontend/app/gallery/map/map.gallery.component.html
index b883735..3deaa43 100644
--- a/frontend/app/gallery/map/map.gallery.component.html
+++ b/frontend/app/gallery/map/map.gallery.component.html
@@ -12,10 +12,17 @@
         *ngFor="let photo of mapPhotos"
         [lat]="photo.lat"
         [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-attribution-control
-        [attributions]="mapService.Attributions"
-      ></yaga-attribution-control>
+        prefix=""
+        [attributions]="mapService.ShortAttributions">
+      </yaga-attribution-control>
       <yaga-tile-layer [url]="mapService.MapLayer"></yaga-tile-layer>
     </yaga-map>
     <div class="overlay" (click)="click()"
diff --git a/frontend/app/gallery/map/map.gallery.component.ts b/frontend/app/gallery/map/map.gallery.component.ts
index 1c5b780..c65c183 100644
--- a/frontend/app/gallery/map/map.gallery.component.ts
+++ b/frontend/app/gallery/map/map.gallery.component.ts
@@ -38,8 +38,8 @@ export class GalleryMapComponent implements OnChanges, IRenderable, AfterViewIni
     });
 
     if (this.yagaMap) {
-      this.yagaMap.setView(this.mapPhotos[0], 0);
-      this.yagaMap.fitBounds(<any>this.mapPhotos);
+      this.yagaMap.setView(this.mapPhotos[0], 99);
+      this.yagaMap.fitBounds(this.mapPhotos.map(mp => <[number, number]>[mp.lat, mp.lng]));
       this.yagaMap.zoom = 0;
     }
 
@@ -48,8 +48,8 @@ export class GalleryMapComponent implements OnChanges, IRenderable, AfterViewIni
   ngAfterViewInit() {
     setTimeout(() => {
       this.height = this.mapElement.nativeElement.clientHeight;
-      this.yagaMap.setView(this.mapPhotos[0], 0);
-      this.yagaMap.fitBounds(<any>this.mapPhotos);
+      this.yagaMap.setView(this.mapPhotos[0], 99);
+      this.yagaMap.fitBounds(this.mapPhotos.map(mp => <[number, number]>[mp.lat, mp.lng]));
       this.yagaMap.zoom = 0;
     }, 0);
   }
diff --git a/frontend/app/gallery/map/map.service.ts b/frontend/app/gallery/map/map.service.ts
index 789bad7..2a70878 100644
--- a/frontend/app/gallery/map/map.service.ts
+++ b/frontend/app/gallery/map/map.service.ts
@@ -2,7 +2,6 @@ import {Injectable} from '@angular/core';
 import {NetworkService} from '../../model/network/network.service';
 import {FileDTO} from '../../../../common/entities/FileDTO';
 import {Utils} from '../../../../common/Utils';
-import {OSM_TILE_LAYER_URL} from '@yaga/leaflet-ng2';
 import {Config} from '../../../../common/config/public/Config';
 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[] {
-    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 {
     if (Config.Client.Map.mapProvider === ClientConfig.MapProviders.Custom) {
       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';
   }
 
 }
diff --git a/frontend/app/settings/map/map.settings.component.html b/frontend/app/settings/map/map.settings.component.html
index 406bbe1..0a10963 100644
--- a/frontend/app/settings/map/map.settings.component.html
+++ b/frontend/app/settings/map/map.settings.component.html
@@ -45,6 +45,19 @@
         </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"
               [disabled]="!settingsForm.form.valid || !changed || inProgress"
               (click)="save()" i18n>Save
diff --git a/frontend/app/settings/settings.service.ts b/frontend/app/settings/settings.service.ts
index 0256f86..f93762d 100644
--- a/frontend/app/settings/settings.service.ts
+++ b/frontend/app/settings/settings.service.ts
@@ -34,6 +34,7 @@ export class SettingsService {
         Map: {
           enabled: true,
           mapProvider: ClientConfig.MapProviders.OpenStreetMap,
+          mapboxAccessToken: '',
           tileUrl: ''
         },
         RandomPhoto: {
diff --git a/frontend/index.html b/frontend/index.html
index 153f902..ab15ba5 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -9,6 +9,9 @@
 
   <link rel="stylesheet"
         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>
     var ServerInject = {user:  <%- JSON.stringify(user); %>, ConfigInject: <%- JSON.stringify(clientConfig); %>}
diff --git a/frontend/translate/messages.en.xlf b/frontend/translate/messages.en.xlf
index 1970291..2b92da9 100644
--- a/frontend/translate/messages.en.xlf
+++ b/frontend/translate/messages.en.xlf
@@ -604,12 +604,28 @@
         </context-group>
         <target>The map module will use this url to fetch the map tiles.</target>
       </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">
         <source>Save
       </source>
         <context-group purpose="location">
           <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 purpose="location">
           <context context-type="sourcefile">app/settings/thumbnail/thumbanil.settings.component.html</context>
@@ -650,7 +666,7 @@
       </source>
         <context-group purpose="location">
           <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 purpose="location">
           <context context-type="sourcefile">app/settings/thumbnail/thumbanil.settings.component.html</context>
diff --git a/frontend/translate/messages.hu.xlf b/frontend/translate/messages.hu.xlf
index c68cd84..38a1547 100644
--- a/frontend/translate/messages.hu.xlf
+++ b/frontend/translate/messages.hu.xlf
@@ -604,12 +604,28 @@
         </context-group>
         <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 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">
         <source>Save
       </source>
         <context-group purpose="location">
           <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 purpose="location">
           <context context-type="sourcefile">app/settings/thumbnail/thumbanil.settings.component.html</context>
@@ -650,7 +666,7 @@
       </source>
         <context-group purpose="location">
           <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 purpose="location">
           <context context-type="sourcefile">app/settings/thumbnail/thumbanil.settings.component.html</context>
diff --git a/package.json b/package.json
index cfb8d90..eff5101 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
     "karma-jasmine": "2.0.1",
     "karma-jasmine-html-reporter": "1.4.0",
     "karma-remap-istanbul": "0.6.0",
-    "karma-systemjs": "0.16.0", 
+    "karma-systemjs": "0.16.0",
     "merge2": "1.2.3",
     "mocha": "5.2.0",
     "ng2-cookies": "1.0.12",