diff --git a/package-lock.json b/package-lock.json
index b1074d8d..3ded5670 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5002,9 +5002,9 @@
       "dev": true
     },
     "@types/mapbox-gl": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-2.4.2.tgz",
-      "integrity": "sha512-mKgjmhUN780YGy9ZEyJK0Sr9gMtERmTQimGsIa5WrBHPlBXdmjYfqtz8nSMI7hOnQFphcuSMyqQswaQESFLHsA==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-2.6.0.tgz",
+      "integrity": "sha512-lHdITzC0IVn9+Pq6WFkkK0N6rUKIqxsdrNeixiQdvROFn2Aeu3TDvhpuag1IdengL5WGGRuEhK6m6HB916ReLw==",
       "dev": true,
       "requires": {
         "@types/geojson": "*"
@@ -11084,11 +11084,11 @@
       }
     },
     "mapbox-gl": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.5.1.tgz",
-      "integrity": "sha512-mUYOe8z+00fWEtBDAtiNeVDH2wsoEQlOK0UskbIPKnG1XRTDYzzofh8f/1BHe1Q3OLxce2TQ+Ou3uo1yAlePaA==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.6.1.tgz",
+      "integrity": "sha512-faGbSZfcFuZ4GWwkWnJrRD3oICZAt/mVKnGuOmeBobCj9onfTRz270qSoOXeRBKd3po5VA2cCPI91YwA8DsAoQ==",
       "requires": {
-        "@mapbox/geojson-rewind": "^0.5.0",
+        "@mapbox/geojson-rewind": "^0.5.1",
         "@mapbox/geojson-types": "^1.0.2",
         "@mapbox/jsonlint-lines-primitives": "^2.0.2",
         "@mapbox/mapbox-gl-supported": "^2.0.0",
@@ -11098,7 +11098,7 @@
         "@mapbox/vector-tile": "^1.3.1",
         "@mapbox/whoots-js": "^3.1.0",
         "csscolorparser": "~1.0.3",
-        "earcut": "^2.2.2",
+        "earcut": "^2.2.3",
         "geojson-vt": "^3.2.1",
         "gl-matrix": "^3.3.0",
         "grid-index": "^1.1.0",
@@ -11108,9 +11108,9 @@
         "potpack": "^1.0.1",
         "quickselect": "^2.0.0",
         "rw": "^1.3.3",
-        "supercluster": "^7.1.3",
+        "supercluster": "^7.1.4",
         "tinyqueue": "^2.0.3",
-        "vt-pbf": "^3.1.1"
+        "vt-pbf": "^3.1.3"
       }
     },
     "mdn-data": {
diff --git a/package.json b/package.json
index 9de4b5d6..10ef759e 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "haversine": "^1.1.0",
     "js-md5": "^0.7.3",
     "lodash": "^4.17.21",
-    "mapbox-gl": "^2.5.1",
+    "mapbox-gl": "^2.6.1",
     "rxjs": "^6.6.7",
     "tassign": "^1.0.0",
     "ts-md5": "^1.2.8",
@@ -68,11 +68,11 @@
     "@types/haversine": "^1.1.0",
     "@types/jasmine": "^3.10.1",
     "@types/jasminewd2": "^2.0.9",
-    "@types/leaflet": "^1.7.0",
     "@types/js-md5": "^0.4.3",
-    "@types/node": "^14.0.0",
-    "@types/mapbox-gl": "^2.4.2",
+    "@types/leaflet": "^1.7.0",
     "@types/lodash": "^4.14.175",
+    "@types/mapbox-gl": "^2.6.0",
+    "@types/node": "^14.0.0",
     "@typescript-eslint/eslint-plugin": "4.23.0",
     "@typescript-eslint/parser": "4.23.0",
     "eslint": "^7.32.0",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 3b561be4..400f9233 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -52,7 +52,10 @@
         >
           <mat-icon>arrow_back</mat-icon> <span translate>action.return</span>
         </button>
-        <div class="detail-from-bottom" *ngIf="mode === 'details' && (fountainSelectorObservable | async) !== null">
+        <div
+          class="detail-from-bottom"
+          *ngIf="mode === 'details' && (fountainSelectorObservable | async) !== undefined"
+        >
           <div class="centering">
             <button mat-mini-fab color="basic" (click)="returnToMap()" class="mat-elevation-z4">
               <mat-icon>close</mat-icon>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index f577efc0..dcd4e936 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -19,8 +19,8 @@ import { IssueService } from './issues/issue.service';
 import { SubscriptionService } from './core/subscription.service';
 import { LayoutService } from './core/layout.service';
 import { FountainService } from './fountain/fountain.service';
-import { of } from 'rxjs';
 import { MatSidenav } from '@angular/material/sidenav';
+import { filterUndefined } from './shared/ObservableExtensions';
 
 @Component({
   selector: 'app-root',
@@ -109,24 +109,21 @@ export class AppComponent implements OnInit {
         }
       }),
       this.fountainService.selectedProperty
-        .switchMap(p => {
-          if (p !== null) {
-            if (!this.propertyDialogIsOpen) {
-              this.propertyDialog = this.dialog.open(FountainPropertyDialogComponent, {
-                maxWidth: 1000,
-                width: '800px',
-              });
-              this.propertyDialogIsOpen = true;
-            }
-            return this.propertyDialog.afterClosed().tap(() => {
-              this.fountainService.deselectProperty();
-              this.propertyDialogIsOpen = false;
+        .pipe(filterUndefined())
+        .switchMap(_ => {
+          if (!this.propertyDialogIsOpen) {
+            this.propertyDialog = this.dialog.open(FountainPropertyDialogComponent, {
+              maxWidth: 1000,
+              width: '800px',
             });
-          } else {
-            return of(undefined);
+            this.propertyDialogIsOpen = true;
           }
+          return this.propertyDialog.afterClosed().tap(() => {
+            this.fountainService.deselectProperty();
+            this.propertyDialogIsOpen = false;
+          });
         })
-        .subscribe(_ => undefined /* nothing to do in addition as side effect happens in tap */)
+        .subscribe(_ => undefined /* nothing to do in addition as side effect happens in switchMap and tap */)
     );
 
     // intro dialog for
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8f5bf59d..3e159490 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -57,7 +57,7 @@ import { LayoutService } from './core/layout.service';
 import { DirectionsService } from './directions/directions.service';
 import { FountainService } from './fountain/fountain.service';
 import { ConfigBasedParserService } from './core/config-based-parser.service';
-import { CityService } from './city/city.service';
+import { MapService } from './city/map.service';
 import { CitySelectorComponent } from './city/city-selector.component';
 import { LanguageSelectorComponent } from './core/language-selector.component';
 
@@ -149,7 +149,7 @@ import { LanguageSelectorComponent } from './core/language-selector.component';
     LayoutService,
     DirectionsService,
     FountainService,
-    CityService,
+    MapService,
     ConfigBasedParserService,
   ],
   bootstrap: [AppComponent],
diff --git a/src/app/city/city-selector.component.html b/src/app/city/city-selector.component.html
index 59f0fcb5..88daaefd 100644
--- a/src/app/city/city-selector.component.html
+++ b/src/app/city/city-selector.component.html
@@ -4,4 +4,5 @@
   [options]="cities"
   [valueObservable]="cityObservable"
   [changeHook]="changeCity.bind(this)"
+  pleaseSelectKey="selectCity"
 ></app-select>
diff --git a/src/app/city/city-selector.component.ts b/src/app/city/city-selector.component.ts
index 05de6b4f..73045d7e 100644
--- a/src/app/city/city-selector.component.ts
+++ b/src/app/city/city-selector.component.ts
@@ -3,7 +3,7 @@ import { Observable } from 'rxjs';
 import { LayoutService } from '../core/layout.service';
 import { DataService } from '../data.service';
 import { City } from '../locations';
-import { CityService } from './city.service';
+import { MapService } from './map.service';
 
 @Component({
   selector: 'app-city-selector',
@@ -13,14 +13,10 @@ import { CityService } from './city.service';
 export class CitySelectorComponent {
   @Input() tooltipText!: string;
 
-  constructor(
-    private dataService: DataService,
-    private cityService: CityService,
-    private layoutService: LayoutService
-  ) {}
+  constructor(private dataService: DataService, private mapService: MapService, private layoutService: LayoutService) {}
 
   public cities: City[] = this.dataService.getLocationMetadata()[1];
-  public cityObservable: Observable<City | undefined> = this.cityService.city;
+  public cityObservable: Observable<City | undefined> = this.mapService.city;
 
   changeCity(city: City): void {
     this.layoutService.flyToCity(city);
diff --git a/src/app/city/city.service.ts b/src/app/city/city.service.ts
deleted file mode 100644
index 7d0a8232..00000000
--- a/src/app/city/city.service.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { fountainAliases } from '../fountain-aliases';
-import { Config, ConfigBasedParserService } from '../core/config-based-parser.service';
-import { City } from '../locations';
-
-export const defaultCity: City = 'ch-zh';
-
-const internalCityConfigs = [
-  {
-    code: 'ch-zh',
-    aliases: ['zuerich', 'zuri', 'zürich ', 'zurich', 'zürih', 'züri', 'zueri', 'ch-zh'],
-  },
-  {
-    code: 'ch-ge',
-    aliases: ['genève', 'geneve', 'genf', 'geneva', 'cenevre', '/gen%C3%A8ve', 'ch-ge'],
-  },
-  {
-    code: 'ch-bs',
-    aliases: ['bale', 'bâle', 'basel', '/b%C3%A2le', 'ch-bs'],
-  },
-  {
-    code: 'ch-lu',
-    aliases: ['lucerne', 'luzern', 'ch-lu'],
-  },
-  {
-    code: 'ch-nw',
-    aliases: ['nidwalden', 'nidwald', 'nidvaldo', 'sutsilvania', 'ch-nw'],
-  },
-  {
-    code: 'de-hh',
-    aliases: ['Hamburg', 'hamburg', 'Hambourg', 'hambourg', 'Amburgo', 'amburgo', 'de-hh'],
-  },
-  {
-    code: 'fr-paris',
-    aliases: ['Paris', 'paris', 'Parigi', '75', 'fr-75', 'parigi', 'fr-paris'],
-  },
-  {
-    code: 'in-ch',
-    aliases: ['Chennai', 'chennai', 'in-ch'],
-  },
-  {
-    code: 'test',
-    aliases: ['Test-City', 'dev', 'dev-city', 'test'],
-  },
-  {
-    code: 'it-roma',
-    aliases: ['rome', 'roma', 'rom', 'it-roma'],
-  },
-  {
-    code: 'us-nyc',
-    aliases: ['NewYork', 'new_york', 'nyc', 'us-nyc', 'us-ny'],
-  },
-  {
-    code: 'tr-be',
-    aliases: ['bergama', 'Pergamon', 'tr-be'],
-  },
-  {
-    code: 'sr-bg',
-    aliases: ['Belgrade', 'belgrade', 'beograd', 'sr-bg'],
-  },
-] as const;
-const cityConfigs: readonly Config<City>[] = internalCityConfigs;
-
-// check that city code and aliases don't have an intersection with fountain aliases as the fountain aliases take precedence
-const cityConfigCode: Pick<typeof internalCityConfigs[number], 'code'> = { code: internalCityConfigs[0].code };
-const cityConfigAlias: Pick<typeof internalCityConfigs[number], 'aliases'> = {
-  aliases: internalCityConfigs[0].aliases,
-};
-type AllCityRelatedIdentifiers = typeof cityConfigCode.code | typeof cityConfigAlias.aliases[number];
-const fountainConfigAlias: Pick<typeof fountainAliases[number], 'alias'> = { alias: fountainAliases[0].alias };
-type FountainAliases = typeof fountainConfigAlias.alias;
-
-type Overlaps<T extends any[]> = {
-  [K in keyof T]: {
-    [L in keyof T]: L extends K
-      ? never
-      : T[K] & T[L] extends never
-      ? never
-      : ['Elements at indices', K | L, 'both contain', T[K] & T[L]];
-  }[number];
-}[number];
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-type ExpectNever<_T extends never> = void;
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-type _CheckCityAndFountainDoNotOverlapp = ExpectNever<Overlaps<[AllCityRelatedIdentifiers, FountainAliases]>>;
-
-@Injectable()
-export class CityService {
-  constructor(private configBasedParser: ConfigBasedParserService) {}
-
-  private readonly citySubject = new BehaviorSubject<City | undefined>(undefined);
-  get city(): Observable<City | undefined> {
-    return this.citySubject.asObservable();
-  }
-  setCity(city: City) {
-    this.citySubject.next(city);
-  }
-
-  parse(value: string | null | undefined): City | undefined {
-    return this.configBasedParser.parse(value, cityConfigs);
-  }
-}
diff --git a/src/app/city/map.service.ts b/src/app/city/map.service.ts
new file mode 100644
index 00000000..5606945f
--- /dev/null
+++ b/src/app/city/map.service.ts
@@ -0,0 +1,186 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { fountainAliases } from '../fountain-aliases';
+import { Config, ConfigBasedParserService } from '../core/config-based-parser.service';
+import { City, defaultCityLocationBounds, getCentre, getLocationBounds as getCityBounds } from '../locations';
+import { Bounds, LngLat, SharedLocation } from '../types';
+import _ from 'lodash';
+import { distinctUntilChanged } from 'rxjs/operators';
+import { filterUndefined } from '../shared/ObservableExtensions';
+import { MapConfig } from '../map/map.config';
+import { environment } from '../../environments/environment';
+
+export const defaultCity: City = 'ch-zh';
+
+const internalCityConfigs = [
+  {
+    code: 'ch-zh',
+    aliases: ['zuerich', 'zuri', 'zürich ', 'zurich', 'zürih', 'züri', 'zueri', 'ch-zh'],
+  },
+  {
+    code: 'ch-ge',
+    aliases: ['genève', 'geneve', 'genf', 'geneva', 'cenevre', '/gen%C3%A8ve', 'ch-ge'],
+  },
+  {
+    code: 'ch-bs',
+    aliases: ['bale', 'bâle', 'basel', '/b%C3%A2le', 'ch-bs'],
+  },
+  {
+    code: 'ch-lu',
+    aliases: ['lucerne', 'luzern', 'ch-lu'],
+  },
+  {
+    code: 'ch-nw',
+    aliases: ['nidwalden', 'nidwald', 'nidvaldo', 'sutsilvania', 'ch-nw'],
+  },
+  {
+    code: 'de-hh',
+    aliases: ['Hamburg', 'hamburg', 'Hambourg', 'hambourg', 'Amburgo', 'amburgo', 'de-hh'],
+  },
+  {
+    code: 'fr-paris',
+    aliases: ['Paris', 'paris', 'Parigi', '75', 'fr-75', 'parigi', 'fr-paris'],
+  },
+  {
+    code: 'in-ch',
+    aliases: ['Chennai', 'chennai', 'in-ch'],
+  },
+  {
+    code: 'test',
+    aliases: ['Test-City', 'dev', 'dev-city', 'test'],
+  },
+  {
+    code: 'it-roma',
+    aliases: ['rome', 'roma', 'rom', 'it-roma'],
+  },
+  {
+    code: 'us-nyc',
+    aliases: ['NewYork', 'new_york', 'nyc', 'us-nyc', 'us-ny'],
+  },
+  {
+    code: 'tr-be',
+    aliases: ['bergama', 'Pergamon', 'tr-be'],
+  },
+  {
+    code: 'sr-bg',
+    aliases: ['Belgrade', 'belgrade', 'beograd', 'sr-bg'],
+  },
+] as const;
+const cityConfigs: readonly Config<City>[] = internalCityConfigs;
+
+// check that city code and aliases don't have an intersection with fountain aliases as the fountain aliases take precedence
+const cityConfigCode: Pick<typeof internalCityConfigs[number], 'code'> = { code: internalCityConfigs[0].code };
+const cityConfigAlias: Pick<typeof internalCityConfigs[number], 'aliases'> = {
+  aliases: internalCityConfigs[0].aliases,
+};
+type AllCityRelatedIdentifiers = typeof cityConfigCode.code | typeof cityConfigAlias.aliases[number];
+const fountainConfigAlias: Pick<typeof fountainAliases[number], 'alias'> = { alias: fountainAliases[0].alias };
+type FountainAliases = typeof fountainConfigAlias.alias;
+
+type Overlaps<T extends any[]> = {
+  [K in keyof T]: {
+    [L in keyof T]: L extends K
+      ? never
+      : T[K] & T[L] extends never
+      ? never
+      : ['Elements at indices', K | L, 'both contain', T[K] & T[L]];
+  }[number];
+}[number];
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+type ExpectNever<_T extends never> = void;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+type _CheckCityAndFountainDoNotOverlapp = ExpectNever<Overlaps<[AllCityRelatedIdentifiers, FountainAliases]>>;
+
+export interface MapState {
+  bounds: Bounds;
+  city: City | undefined;
+  location: LngLat;
+  zoom: number | 'auto';
+}
+export type MapStateOmitCalculatedFields = Omit<MapState, 'location'>;
+
+@Injectable()
+export class MapService {
+  constructor(private configBasedParser: ConfigBasedParserService, private mapConfig: MapConfig) {}
+
+  private stateSubject = new BehaviorSubject<MapState | undefined>(undefined);
+
+  get state(): Observable<MapState> {
+    // we don't want to emit the first state where it is undefined
+    return this.stateSubject.pipe(filterUndefined());
+  }
+
+  updatedStateBasedOnSharedLocation(sharedLocation: SharedLocation, cityIdOrAlias: string | undefined): void {
+    const lng = sharedLocation.location.lng;
+    const lat = sharedLocation.location.lat;
+    let bounds: Bounds;
+    const currentState = this.stateSubject.value;
+    if (currentState !== undefined && _.isEqual(this.mapStateToSharedLocation(currentState), sharedLocation)) {
+      bounds = currentState.bounds;
+    } else {
+      // we don't know yet what bounds the map has, so we are faking it by using the same area as the default city
+      const diffLng = (defaultCityLocationBounds.max.lng - defaultCityLocationBounds.min.lng) / 2.0;
+      const diffLat = (defaultCityLocationBounds.max.lat - defaultCityLocationBounds.min.lat) / 2.0;
+      bounds = Bounds(LngLat(lng - diffLng, lat - diffLat), LngLat(lng + diffLng, lat + diffLat));
+    }
+
+    this.updateState({
+      bounds: bounds,
+      zoom: sharedLocation.zoom,
+      city: this.parseCity(cityIdOrAlias),
+    });
+  }
+
+  updateState(mapState: MapStateOmitCalculatedFields): void {
+    const calculcatedMapState: MapState = this.calculateFields(mapState);
+
+    if (!_.isEqual(calculcatedMapState, this.stateSubject.value)) {
+      if (!environment.production) {
+        console.log('updating map state to', calculcatedMapState);
+      }
+      this.stateSubject.next(calculcatedMapState);
+    }
+  }
+
+  calculateFields(mapState: MapStateOmitCalculatedFields): MapState {
+    return { ...mapState, location: getCentre(mapState.bounds) };
+  }
+
+  get currentCity(): City | undefined {
+    return this.stateSubject.value?.city;
+  }
+  get city(): Observable<City | undefined> {
+    return (
+      this.state
+        .map(s => s.city)
+        // we don't want to propagate a city change if something else changed
+        .pipe(distinctUntilChanged())
+    );
+  }
+
+  get sharedLocation(): Observable<SharedLocation> {
+    return (
+      this.state
+        .map(s => this.mapStateToSharedLocation(s))
+        // we don't want to propagate a change if e.g. the bounds change (due to resizing of the browser for instance)
+        .pipe(distinctUntilChanged((x, y) => _.isEqual(x, y)))
+    );
+  }
+
+  private mapStateToSharedLocation(state: MapState): SharedLocation {
+    return { location: state.location, zoom: state.zoom };
+  }
+
+  parseCity(value: string | null | undefined): City | undefined {
+    return this.configBasedParser.parse(value, cityConfigs);
+  }
+
+  setCity(city: City) {
+    this.updateState({
+      city: city,
+      bounds: getCityBounds(city),
+      // if we have not yet zoomed, then we want to fit to bounds
+      zoom: 'auto',
+    });
+  }
+}
diff --git a/src/app/core/layout.service.ts b/src/app/core/layout.service.ts
index 9bf33786..def5f9d4 100644
--- a/src/app/core/layout.service.ts
+++ b/src/app/core/layout.service.ts
@@ -1,11 +1,11 @@
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { shareReplay } from 'rxjs/operators';
+import { distinctUntilChanged, shareReplay } from 'rxjs/operators';
 import { Directions, DirectionsService } from '../directions/directions.service';
 import { FountainService } from '../fountain/fountain.service';
 import { City } from '../locations';
-import { CityService } from '../city/city.service';
+import { MapService } from '../city/map.service';
 import { Fountain, FountainSelector } from '../types';
 
 export type PreviewState = 'open' | 'closed';
@@ -15,7 +15,7 @@ export class LayoutService {
   constructor(
     private breakpointObserver: BreakpointObserver,
     private fountainService: FountainService,
-    private cityService: CityService,
+    private mapService: MapService,
     private directionService: DirectionsService
   ) {}
 
@@ -28,7 +28,7 @@ export class LayoutService {
 
   private readonly showListSubject = new BehaviorSubject<boolean>(false);
   get showList(): Observable<boolean> {
-    return this.showListSubject.asObservable();
+    return this.showListSubject.pipe(distinctUntilChanged());
   }
   setShowList(shallShow: boolean): void {
     this.showListSubject.next(shallShow);
@@ -36,7 +36,7 @@ export class LayoutService {
 
   private readonly showMenuSubject = new BehaviorSubject<boolean>(false);
   get showMenu(): Observable<boolean> {
-    return this.showMenuSubject.asObservable();
+    return this.showMenuSubject.pipe(distinctUntilChanged());
   }
   setShowMenu(shallShow: boolean): void {
     this.showMenuSubject.next(shallShow);
@@ -49,7 +49,7 @@ export class LayoutService {
 
   private readonly previewStateSubject = new BehaviorSubject<PreviewState>('closed');
   get previewState(): Observable<PreviewState> {
-    return this.previewStateSubject.asObservable();
+    return this.previewStateSubject.pipe(distinctUntilChanged());
   }
   setPreviewState(state: PreviewState) {
     this.previewStateSubject.next(state);
@@ -57,7 +57,7 @@ export class LayoutService {
 
   private readonly modeSubject = new BehaviorSubject<Mode>('map');
   get mode(): Observable<Mode> {
-    return this.modeSubject.asObservable();
+    return this.modeSubject.pipe(distinctUntilChanged());
   }
   setMode(mode: Mode): void {
     if (mode === 'map') {
@@ -86,7 +86,7 @@ export class LayoutService {
   }
 
   flyToCity(city: City): void {
-    this.cityService.setCity(city);
+    this.mapService.setCity(city);
     this.closeDetail();
   }
 }
diff --git a/src/app/core/selector.component.html b/src/app/core/selector.component.html
index 88a99f68..3ff292a1 100644
--- a/src/app/core/selector.component.html
+++ b/src/app/core/selector.component.html
@@ -4,6 +4,7 @@
     class="responsive"
     (selectionChange)="changeValue($event)"
     [value]="valueObservable | async"
+    [placeholder]="pleaseSelectKey | translate"
   >
     <mat-option *ngFor="let o of options" [value]="o">{{ translationPrefix + '.' + o | translate }}</mat-option>
   </mat-select>
diff --git a/src/app/core/selector.component.ts b/src/app/core/selector.component.ts
index b2c346a9..504c7ac0 100644
--- a/src/app/core/selector.component.ts
+++ b/src/app/core/selector.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { LayoutService } from './layout.service';
 
 @Component({
@@ -8,16 +8,19 @@ import { LayoutService } from './layout.service';
   styleUrls: ['./selector.component.css'],
 })
 export class SelectorComponent<T> {
-  @Input() tooltipText!: string;
-  @Input() options!: T[];
-  @Input() valueObservable!: Observable<T | undefined>;
-  @Input() changeHook!: (value: T) => void;
-  @Input() translationPrefix!: string;
+  @Input() tooltipText = '';
+  @Input() options: T[] = [];
+  @Input() valueObservable: Observable<T | undefined> = of();
+  @Input() changeHook: ((value: T) => void) | undefined;
+  @Input() translationPrefix = '';
+  @Input() pleaseSelectKey = '';
 
   constructor(private layoutService: LayoutService) {}
 
   changeValue(event: { value: T }): void {
-    this.changeHook(event.value);
+    if (this.changeHook) {
+      this.changeHook(event.value);
+    }
     this.layoutService.setShowMenu(false);
   }
 }
diff --git a/src/app/data.service.ts b/src/app/data.service.ts
index 432e303c..ebb42fec 100644
--- a/src/app/data.service.ts
+++ b/src/app/data.service.ts
@@ -33,15 +33,16 @@ import {
   FountainPropertyCollection,
   FountainSelector,
   Image,
-  LngLat,
   // PropertyMetadataCollection,
 } from './types';
 import './shared/importAllExtensions';
 import { Directions, DirectionsService } from './directions/directions.service';
 import { LayoutService } from './core/layout.service';
 import { FountainService } from './fountain/fountain.service';
-import { CityService } from './city/city.service';
+import { MapService } from './city/map.service';
 import { illegalState } from './shared/illegalState';
+import { filterUndefined } from './shared/ObservableExtensions';
+import { first } from 'rxjs/operators';
 
 export interface TransportLocationStations {
   id: string;
@@ -85,7 +86,7 @@ export class DataService {
     private directionsService: DirectionsService,
     private layoutService: LayoutService,
     private fountainService: FountainService,
-    private cityService: CityService
+    private mapService: MapService
   ) {
     console.log('constructor start ' + new Date().toISOString());
 
@@ -100,9 +101,14 @@ export class DataService {
       }
     });
 
-    this.cityService.city.subscribe(city => {
-      this._city = city;
-      this.loadCityData(city);
+    this.mapService.state.subscribe(mapState => {
+      //TODO @robstoll, get rid of loadCityData
+      if (mapState.city !== undefined && this._city !== mapState.city) {
+        this.loadCityData(mapState.city);
+      } else {
+        this.loadFountains(mapState.bounds);
+      }
+      this._city = mapState.city;
     });
 
     this.directionsService.travelMode.subscribe(() => {
@@ -110,8 +116,6 @@ export class DataService {
     });
   }
 
-  cityObservable = this.cityService.city;
-
   get fountainsAll(): FountainCollection | undefined {
     return this._fountainsAll;
   }
@@ -122,13 +126,8 @@ export class DataService {
     return of(this._fountainPropertiesMeta);
   }
 
-  get currentLocationsCollection(): Location | null {
-    const city = this._city;
-    if (city != null) {
-      return this._locationsCollection[city];
-    } else {
-      return null;
-    }
+  get currentLocation(): Location | null {
+    return this._city ? this._locationsCollection[this._city] : null;
   }
 
   // created for #114 display total fountains at city/location
@@ -136,15 +135,6 @@ export class DataService {
     return this._fountainsAll?.features?.length ?? 0;
   }
 
-  getLocationBounds(city: City): Bounds {
-    if (city !== null) {
-      const bbox = this._locationsCollection[city].bounding_box;
-      return [LngLat(bbox.lngMin, bbox.latMin), LngLat(bbox.lngMax, bbox.latMax)];
-    } else {
-      illegalState('no city selected');
-    }
-  }
-
   private registerApiError(
     error_incident: string,
     error_message = '',
@@ -180,34 +170,54 @@ export class DataService {
     return [this._locationsCollection, cities];
   }
 
+  private loadFountains(bounds: Bounds, forceRefresh = false): Observable<FountainCollection> {
+    const boundsParams = this.toRequestParams(bounds);
+    const fountainsUrl = `${this.apiUrl}api/v1/fountains?${boundsParams}&refresh=${forceRefresh}`;
+    // get new fountains
+    return this.http.get<FountainCollection>(fountainsUrl).tap(
+      (data: FountainCollection) => {
+        this._fountainsAll = data;
+        this.fountainsLoadedSuccess.emit(this._fountainsAll);
+        this.sortByProximity();
+        this.filterFountains(this._filter);
+        // launch reload of city processing errors
+        //TODO loadProcessingErrors?
+        // this.loadCityProcessingErrors(city);
+      },
+      (httpResponse: HttpErrorResponse) => {
+        this.registerApiError('error loading fountain data', '', httpResponse, fountainsUrl);
+      }
+    );
+  }
+
+  private toRequestParams(bounds: Bounds) {
+    return `sw=${bounds.min.lat},${bounds.min.lng}&ne=${bounds.max.lat},${bounds.max.lng}`;
+  }
+
   // TODO @ralf.hauser change to Observable, should not fetch data in service but pass on to component
   // share in order that we don't have to re-fetch for each subscription
   // Get the initial data
-  private loadCityData(city: City | undefined, forceRefresh = false): void {
-    if (city !== undefined) {
-      console.log(city + ' loadCityData ' + new Date().toISOString());
-      const fountainsUrl = `${this.apiUrl}api/v1/fountains?city=${city}&refresh=${forceRefresh}`;
+  private loadCityData(city: City, forceRefresh = false): void {
+    console.log(city + ' loadCityData ' + new Date().toISOString());
+    const fountainsUrl = `${this.apiUrl}api/v1/fountains?city=${city}&refresh=${forceRefresh}`;
 
-      // remove current fountains
-      this.fountainsFilteredSuccess.emit(undefined);
+    // remove current fountains
+    this.fountainsFilteredSuccess.emit(undefined);
 
-      // get new fountains
-      this.http.get<FountainCollection>(fountainsUrl).subscribeOnce(
-        (data: FountainCollection) => {
-          this._fountainsAll = data;
-          this.fountainsLoadedSuccess.emit(this._fountainsAll);
-          this.sortByProximity();
-          this.filterFountains(this._filter);
-          // launch reload of city processing errors
-          this.loadCityProcessingErrors(city);
-        },
-        (httpResponse: HttpErrorResponse) => {
-          this.registerApiError('error loading fountain data', '', httpResponse, fountainsUrl);
-        }
-      );
-    } else {
-      console.log('loadCityData: no city given ' + new Date().toISOString());
-    }
+    // get new fountains
+    this.http.get<FountainCollection>(fountainsUrl).subscribeOnce(
+      (data: FountainCollection) => {
+        this._fountainsAll = data;
+        this.fountainsLoadedSuccess.emit(this._fountainsAll);
+        this.sortByProximity();
+        this.filterFountains(this._filter);
+        // launch reload of city processing errors
+        this.loadCityProcessingErrors(city);
+      },
+      (httpResponse: HttpErrorResponse) => {
+        this.registerApiError('error loading fountain data', '', httpResponse, fountainsUrl);
+      }
+    );
   }
 
   // TODO @ralf.hauser change to Observable, should not fetch data in service but pass on to component
@@ -216,21 +226,19 @@ export class DataService {
   // Get the initial data
   // Get Location processing errors for #206
   private loadCityProcessingErrors(city: City): void {
-    if (city !== null) {
-      const url = `${this.apiUrl}api/v1/processing-errors?city=${city}`;
+    const url = `${this.apiUrl}api/v1/processing-errors?city=${city}`;
 
-      // get processing errors
-      this.http.get<DataIssue[]>(url).subscribeOnce(
-        (data: DataIssue[]) => {
-          this.issueService.setDataIssues(data);
-        },
-        (httpResponse: HttpErrorResponse) => {
-          const errMsg = 'loadCityProcessingErrors: error loading fountain processing issue list';
-          console.log(errMsg + ' ' + new Date().toISOString());
-          this.registerApiError(errMsg, '', httpResponse, url);
-        }
-      );
-    }
+    // get processing errors
+    this.http.get<DataIssue[]>(url).subscribeOnce(
+      (data: DataIssue[]) => {
+        this.issueService.setDataIssues(data);
+      },
+      (httpResponse: HttpErrorResponse) => {
+        const errMsg = 'loadCityProcessingErrors: error loading fountain processing issue list';
+        console.log(errMsg + ' ' + new Date().toISOString());
+        this.registerApiError(errMsg, '', httpResponse, url);
+      }
+    );
   }
 
   private filterFountain(
@@ -498,7 +506,7 @@ export class DataService {
 
   private sortByProximity(): void {
     console.log('sortByProximity ' + new Date().toISOString());
-    if (this._fountainsAll !== null) {
+    if (this._fountainsAll !== undefined) {
       this.userLocationService.userLocation.subscribeOnce(location => {
         if (location !== undefined) {
           console.log('sortByProximity: loc ' + location + ' ' + new Date().toISOString());
@@ -730,7 +738,6 @@ export class DataService {
         }
       });
     }
-    // return imgs;
   }
 
   private addDefaultPanoUrls(fountainPropertyCollection: FountainPropertyCollection<Record<string, unknown>>): void {
@@ -868,20 +875,28 @@ export class DataService {
   }
 
   private getFountainDetailsFromServer(fountainSelector: FountainSelector, forceReload: boolean) {
-    // create parameter string
-    let params = '';
-    for (const key in fountainSelector) {
-      if (Object.prototype.hasOwnProperty.call(fountainSelector, key)) {
-        params += `${key}=${fountainSelector[key as keyof FountainSelector]}&`;
-      }
-    }
-    if (environment.production) {
-      console.log('data.service.ts selectFountainBySelector: ' + params + ' ' + new Date().toISOString());
-    }
     // use selector criteria to create api call
-    this.cityService.city
-      .switchMap(city => {
-        const url = `${this.apiUrl}api/v1/fountain?${params}city=${city}`;
+    this.mapService.state
+      .pipe(first())
+      .switchMap(state => {
+        // create parameter string
+        let params = '';
+        for (const key in fountainSelector) {
+          if (Object.prototype.hasOwnProperty.call(fountainSelector, key)) {
+            params += `${key}=${fountainSelector[key as keyof FountainSelector]}&`;
+          }
+        }
+        if (environment.production) {
+          console.log('data.service.ts selectFountainBySelector: ' + params + ' ' + new Date().toISOString());
+        }
+        //TODO @robstoll remove old behaviour
+        if (state.city !== undefined) {
+          params += `city=${state.city}`;
+        } else {
+          params += this.toRequestParams(state.bounds);
+        }
+
+        const url = `${this.apiUrl}api/v1/fountain?${params}`;
         if (!environment.production) {
           console.log('selectFountainBySelector: ' + url + ' ' + new Date().toISOString());
         }
@@ -992,70 +1007,50 @@ export class DataService {
     const fountain = fountainData;
     const selector = selectorData;
     try {
-      if (fountain !== null) {
-        const fProps = fountain.properties;
-        const nam = fProps['name'].value;
-        if (null == fProps['gallery']) {
-          fProps['gallery'] = {};
-          // happend with Sardona in ch-zh after a bug which probably caused that gallery was not null but featured_image_name was undefined
-          // Thus it makes sense to check first and create a dummy object if necessary to prevent bugs
-          if (fProps['featured_image_name'] === undefined) {
-            fProps['featured_image_name'] = {};
-          }
-          fProps['featured_image_name'].source = 'Google Street View';
-          fProps['gallery'].comments =
-            'Image obtained from Google Street View Service because no other image is associated with the fountain.';
-          fProps['gallery'].status = propertyStatuses.info;
-          fProps['gallery'].source = 'google';
-        }
-        if (null != fProps['gallery'].value && 0 < fProps['gallery'].value.length) {
-          this.prepGallery(fProps['gallery'].value, fProps['id_wikidata'].value + ' "' + nam + '"');
-        } else {
-          fProps['gallery'].value = this.getStreetView(fountain);
+      const fProps = fountain.properties;
+      const nam = fProps['name'].value;
+      if (null == fProps['gallery']) {
+        fProps['gallery'] = {};
+        // happend with Sardona in ch-zh after a bug which probably caused that gallery was not null but featured_image_name was undefined
+        // Thus it makes sense to check first and create a dummy object if necessary to prevent bugs
+        if (fProps['featured_image_name'] === undefined) {
+          fProps['featured_image_name'] = {};
         }
-        this._currentFountainSelector = undefined;
-        this.layoutService.switchToDetail(fountain, selector);
+        fProps['featured_image_name'].source = 'Google Street View';
+        fProps['gallery'].comments =
+          'Image obtained from Google Street View Service because no other image is associated with the fountain.';
+        fProps['gallery'].status = propertyStatuses.info;
+        fProps['gallery'].source = 'google';
+      }
+      if (null != fProps['gallery'].value && 0 < fProps['gallery'].value.length) {
+        this.prepGallery(fProps['gallery'].value, fProps['id_wikidata'].value + ' "' + nam + '"');
+      } else {
+        fProps['gallery'].value = this.getStreetView(fountain);
+      }
+      this._currentFountainSelector = undefined;
+      this.layoutService.switchToDetail(fountain, selector);
 
+      console.log(
+        'data.service.ts selectFountainBySelector: updateDatabase "' +
+          nam +
+          '" ' +
+          fProps['id_wikidata'].value +
+          ' ' +
+          new Date().toISOString()
+      );
+      if (this._fountainPropertiesMeta) {
+        const fountain_simple = essenceOf(fountain, this._fountainPropertiesMeta);
         console.log(
-          'data.service.ts selectFountainBySelector: updateDatabase "' +
-            nam +
-            '" ' +
-            fProps['id_wikidata'].value +
-            ' ' +
-            new Date().toISOString()
-        );
-        if (this._fountainPropertiesMeta) {
-          const fountain_simple = essenceOf(fountain, this._fountainPropertiesMeta);
-          console.log(
-            'data.service.ts selectFountainBySelector: essenceOf done "' +
-              nam +
-              '" ' +
-              fProps['id_wikidata'].value +
-              ' ' +
-              new Date().toISOString()
-          );
-          if (this.fountainsAll) this._fountainsAll = replaceFountain(this.fountainsAll, fountain_simple);
-          console.log(
-            'data.service.ts selectFountainBySelector: replaceFountain done "' +
-              nam +
-              '" ' +
-              fProps['id_wikidata'].value +
-              ' ' +
-              new Date().toISOString()
-          );
-        }
-        this.sortByProximity();
-        console.log(
-          'data.service.ts selectFountainBySelector: sortByProximity done "' +
+          'data.service.ts selectFountainBySelector: essenceOf done "' +
             nam +
             '" ' +
             fProps['id_wikidata'].value +
             ' ' +
             new Date().toISOString()
         );
-        this.filterFountains(this._filter);
+        if (this.fountainsAll) this._fountainsAll = replaceFountain(this.fountainsAll, fountain_simple);
         console.log(
-          'data.service.ts selectFountainBySelector: filterFountains done "' +
+          'data.service.ts selectFountainBySelector: replaceFountain done "' +
             nam +
             '" ' +
             fProps['id_wikidata'].value +
@@ -1063,6 +1058,24 @@ export class DataService {
             new Date().toISOString()
         );
       }
+      this.sortByProximity();
+      console.log(
+        'data.service.ts selectFountainBySelector: sortByProximity done "' +
+          nam +
+          '" ' +
+          fProps['id_wikidata'].value +
+          ' ' +
+          new Date().toISOString()
+      );
+      this.filterFountains(this._filter);
+      console.log(
+        'data.service.ts selectFountainBySelector: filterFountains done "' +
+          nam +
+          '" ' +
+          fProps['id_wikidata'].value +
+          ' ' +
+          new Date().toISOString()
+      );
     } catch (err: unknown) {
       console.trace(err);
     }
@@ -1079,7 +1092,9 @@ export class DataService {
 
   forceLocationRefresh(): void {
     console.log('forceLocationRefresh ' + new Date().toISOString());
-    this.cityService.city.subscribeOnce(city => this.loadCityData(city, /* forceRefresh = */ true));
+    this.mapService.city
+      .pipe(filterUndefined())
+      .subscribeOnce(city => this.loadCityData(city, /* forceRefresh = */ true));
   }
 
   getDirections(): void {
diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts
index 7827e255..22423351 100644
--- a/src/app/detail/detail.component.ts
+++ b/src/app/detail/detail.component.ts
@@ -20,7 +20,7 @@ import { LanguageService } from '../core/language.service';
 import { SubscriptionService } from '../core/subscription.service';
 import { LayoutService, PreviewState } from '../core/layout.service';
 import { FountainService } from '../fountain/fountain.service';
-import { CityService } from '../city/city.service';
+import { MapService } from '../city/map.service';
 import { FountainPropertiesMeta } from '../fountain_properties';
 const wm_cat_url_root = 'https://commons.wikimedia.org/wiki/Category:';
 
@@ -70,11 +70,11 @@ export class DetailComponent implements OnInit {
     private languageService: LanguageService,
     private layoutService: LayoutService,
     private fountainService: FountainService,
-    private cityService: CityService
+    private mapService: MapService
   ) {}
 
   propertyMetadataCollection = this.dataService.propertyMetadataCollection;
-  cityObservable = this.cityService.city;
+  cityObservable = this.mapService.city;
   countryObservable = this.cityObservable.map(city => city?.split('-')?.[0]);
 
   ngOnInit(): void {
@@ -155,7 +155,7 @@ export class DetailComponent implements OnInit {
                   console.log('no videoUrls ' + new Date().toISOString());
                 }
                 // update issue api
-                const cityMetadata = this.dataService.currentLocationsCollection;
+                const cityMetadata = this.dataService.currentLocation;
                 if (
                   cityMetadata?.issue_api.operator !== null &&
                   cityMetadata?.issue_api.operator === fProps['operator_name'].value
diff --git a/src/app/directions/directions.component.ts b/src/app/directions/directions.component.ts
index 8a044364..2f5f190a 100644
--- a/src/app/directions/directions.component.ts
+++ b/src/app/directions/directions.component.ts
@@ -23,15 +23,13 @@ export class DirectionsComponent implements OnInit {
 
   ngOnInit(): void {
     this.directionsService.directions.subscribe(data => {
-      if (data !== null) {
-        const route = data.routes[0];
-        if (route !== undefined) {
-          //TODO @ralf.hauser check if this fallback is OK, what if a route has no legs defined?
-          this.leg = route.legs[0] ?? { steps: [], duration: 0 };
-          // added for #124 to move google maps button to directions pane
-          this.goalCoords = route.geometry.coordinates.slice(-1)[0];
-          this.startCoords = route.geometry.coordinates[0];
-        }
+      const route = data.routes[0];
+      if (route !== undefined) {
+        //TODO @ralf.hauser check if this fallback is OK, what if a route has no legs defined?
+        this.leg = route.legs[0] ?? { steps: [], duration: 0 };
+        // added for #124 to move google maps button to directions pane
+        this.goalCoords = route.geometry.coordinates.slice(-1)[0];
+        this.startCoords = route.geometry.coordinates[0];
       }
     });
   }
diff --git a/src/app/fountain/fountain.service.ts b/src/app/fountain/fountain.service.ts
index 2e8f926d..0d583825 100644
--- a/src/app/fountain/fountain.service.ts
+++ b/src/app/fountain/fountain.service.ts
@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import _ from 'lodash';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { illegalState } from '../shared/illegalState';
 import { Fountain, FountainConfigProperty, FountainSelector } from '../types';
@@ -10,7 +11,7 @@ interface FountainAndSelector {
 
 @Injectable()
 export class FountainService {
-  private readonly fountainAndSelectorSubject = new BehaviorSubject<FountainAndSelector | null>(null);
+  private readonly fountainAndSelectorSubject = new BehaviorSubject<FountainAndSelector | undefined>(undefined);
   get fountain(): Observable<Fountain | undefined> {
     return this.fountainAndSelectorSubject.map(x => x?.fountain);
   }
@@ -19,21 +20,24 @@ export class FountainService {
     return this.fountainAndSelectorSubject.map(x => x?.selector);
   }
 
-  private readonly selectedPropertySubject = new BehaviorSubject<FountainConfigProperty | null>(null);
-  get selectedProperty(): Observable<FountainConfigProperty | null> {
+  private readonly selectedPropertySubject = new BehaviorSubject<FountainConfigProperty | undefined>(undefined);
+  get selectedProperty(): Observable<FountainConfigProperty | undefined> {
     return this.selectedPropertySubject.asObservable();
   }
 
   setFountain(fountain: Fountain, selector: FountainSelector): void {
-    this.fountainAndSelectorSubject.next({
+    const newState = {
       fountain: fountain,
       selector: selector,
-    });
+    };
+    if (!_.isEqual(newState, this.fountainAndSelectorSubject.value)) {
+      this.fountainAndSelectorSubject.next(newState);
+    }
   }
 
   deselectFountain(): void {
-    if (this.fountainAndSelectorSubject.value !== null) {
-      this.fountainAndSelectorSubject.next(null);
+    if (this.fountainAndSelectorSubject.value !== undefined) {
+      this.fountainAndSelectorSubject.next(undefined);
     }
     //TODO @ralf.hauser I guess we should also deselect the property in this case, please check
   }
@@ -42,7 +46,7 @@ export class FountainService {
     if (name == null) {
       this.deselectProperty();
     } else {
-      if (this.fountainAndSelectorSubject.value !== null) {
+      if (this.fountainAndSelectorSubject.value !== undefined) {
         this.selectedPropertySubject.next(this.fountainAndSelectorSubject.value.fountain.properties[name]);
       } else {
         illegalState('cannot set a property if no fountain is selected');
@@ -51,6 +55,6 @@ export class FountainService {
   }
 
   deselectProperty(): void {
-    this.selectedPropertySubject.next(null);
+    this.selectedPropertySubject.next(undefined);
   }
 }
diff --git a/src/app/issues/issue-list.component.ts b/src/app/issues/issue-list.component.ts
index 14948721..a391c13e 100644
--- a/src/app/issues/issue-list.component.ts
+++ b/src/app/issues/issue-list.component.ts
@@ -7,7 +7,7 @@
 
 import { Component } from '@angular/core';
 import { IssueService } from '../issues/issue.service';
-import { CityService } from '../city/city.service';
+import { MapService } from '../city/map.service';
 
 @Component({
   selector: 'app-issue-list',
@@ -15,8 +15,8 @@ import { CityService } from '../city/city.service';
   styleUrls: ['./issue-list.component.css'],
 })
 export class IssueListComponent {
-  constructor(private issueService: IssueService, private cityService: CityService) {}
+  constructor(private issueService: IssueService, private mapService: MapService) {}
   appErrorsObservable = this.issueService.appErrors;
   dataIssuesObservable = this.issueService.dataIssues;
-  cityObservable = this.cityService.city;
+  cityObservable = this.mapService.city;
 }
diff --git a/src/app/locations.ts b/src/app/locations.ts
index c8f64aa2..766c921a 100644
--- a/src/app/locations.ts
+++ b/src/app/locations.ts
@@ -14,6 +14,8 @@ import { environment } from '../environments/environment';
 
 //TODO it would make more sense to just share the typescript constant instead of using json IMO
 import * as locationsJSON from './../assets/locations.json';
+import { defaultCity } from './city/map.service';
+import { Bounds, LngLat } from './types';
 
 // TODO it would make more sense to move common types to an own library which is consumed by both, datablue and proximap
 // if you change something here, then you need to change it in datablue as well
@@ -62,3 +64,13 @@ export type LocationsCollection = Record<City, Location>;
 export const cities: City[] = Object.keys(locationsCollection).filter(
   city => city !== 'default' && (city !== 'test' || !environment.production)
 ) as City[];
+
+export function getLocationBounds(city: City): Bounds {
+  const boundingBox = locationsCollection[city].bounding_box;
+  return { min: LngLat(boundingBox.lngMin, boundingBox.latMin), max: LngLat(boundingBox.lngMax, boundingBox.latMax) };
+}
+export const defaultCityLocationBounds = getLocationBounds(defaultCity);
+
+export function getCentre(bounds: Bounds): LngLat {
+  return LngLat((bounds.min.lng + bounds.max.lng) / 2.0, (bounds.min.lat + bounds.max.lat) / 2);
+}
diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts
index 64c6f342..638f715c 100644
--- a/src/app/map/map.component.ts
+++ b/src/app/map/map.component.ts
@@ -17,10 +17,13 @@ import { DataService } from '../data.service';
 import { DirectionsService } from '../directions/directions.service';
 import { FountainService } from '../fountain/fountain.service';
 import { City } from '../locations';
-import { Fountain, FountainCollection, LngLat } from '../types';
-import { CityService } from '../city/city.service';
+import { Bounds, Fountain, FountainCollection, LngLat } from '../types';
+import { MapService, MapState, MapStateOmitCalculatedFields } from '../city/map.service';
 import { MapConfig } from './map.config';
 import { UserLocationService } from './user-location.service';
+import _ from 'lodash';
+import { Subject } from 'rxjs';
+import { debounceTime, skip } from 'rxjs/operators';
 
 @Component({
   selector: 'app-map',
@@ -31,7 +34,7 @@ import { UserLocationService } from './user-location.service';
 export class MapComponent implements OnInit {
   private map!: M.Map;
   private _mode: Mode = 'map';
-  private _selectedFountain: Fountain | null = null;
+  private _selectedFountain: Fountain | undefined = undefined;
   private highlightPopup: M.Popup | undefined;
   private selectPopup: M.Popup | undefined; // popup displayed on currently selected fountain
   private userMarker: M.Marker | undefined;
@@ -39,6 +42,8 @@ export class MapComponent implements OnInit {
   private navControl: M.NavigationControl | undefined;
   private directionsGeoJson = EMPTY_LINESTRING;
   private satelliteShown = false;
+  private mapLocationChangeSubject = new Subject();
+  private initialStyleLoaded = new Subject();
 
   constructor(
     private subscriptionService: SubscriptionService,
@@ -50,61 +55,63 @@ export class MapComponent implements OnInit {
     private layoutService: LayoutService,
     private directionsService: DirectionsService,
     private fountainService: FountainService,
-    private cityService: CityService
+    private mapService: MapService
   ) {}
 
   ngOnInit(): void {
     this.initializeMap();
 
+    this.subscriptionService.registerSubjects(this.mapLocationChangeSubject, this.initialStyleLoaded);
+
     this.subscriptionService.registerSubscriptions(
       // When the app changes mode, change behaviour
-      this.layoutService.mode.subscribe(m => {
-        // adjust map shape because of details panel
-        setTimeout(() => this.map.resize(), 200);
-        this._mode = m;
-        this.adjustToMode();
-      }),
+      this.layoutService.mode
+        .pipe(
+          // we are not interested in the first state
+          skip(1)
+        )
+        .subscribe(m => {
+          this._mode = m;
+          this.adjustToMode();
+        }),
 
       // when the language is changed, update popups
-      this.languageService.langObservable.subscribe(lang => {
-        console.log('lang "' + lang + '", mode ' + this._mode + ' ' + new Date().toISOString());
+      this.languageService.langObservable.subscribe(_ => {
         if (this._mode !== 'map') {
           this.showSelectedPopupOnMap();
         }
       }),
 
-      // when the city is changed, update map bounds
-      this.cityService.city.subscribe(city => {
-        if (city !== undefined) {
-          this.zoomToCity(city);
-          console.log('city "' + city + '" ' + new Date().toISOString());
-        }
-      }),
+      // this.mapService.city.pipe(filterUndefined()).subscribe(city => this.fitToCityBoundsIfNotSame(city)),
+      this.mapService.state.subscribe(state => this.adjustMapToStateChange(state)),
+
+      this.mapLocationChangeSubject
+        .pipe(
+          // don't trigger multiple change events in case of an animation
+          debounceTime(50)
+        )
+        .subscribe(_ => this.handleMapLocationChange()),
 
       // When directions are loaded, display on map
       this.directionsService.directions.subscribe(data => {
-        if (data !== null) {
-          // create valid linestring
-          const newLine = EMPTY_LINESTRING;
-          const firstFeature = newLine.features[0];
-          if (firstFeature) {
-            const dataGeometry = data.routes[0]?.geometry;
-            if (dataGeometry !== undefined) {
-              firstFeature.geometry = dataGeometry;
-            }
-            const coordinates = firstFeature.geometry.coordinates as [number, number][];
-            const firstCoordinates = coordinates[0];
-            if (firstCoordinates !== undefined) {
-              const bounds = coordinates.reduce(function (bounds, coord) {
-                return bounds.extend(coord);
-              }, new M.LngLatBounds(firstCoordinates, firstCoordinates));
-              this.map.fitBounds(bounds, {
-                padding: 100,
-              });
-            }
+        // create valid linestring
+        const newLine = EMPTY_LINESTRING;
+        const firstFeature = newLine.features[0];
+        if (firstFeature) {
+          const dataGeometry = data.routes[0]?.geometry;
+          if (dataGeometry !== undefined) {
+            firstFeature.geometry = dataGeometry;
+          }
+          const coordinates = firstFeature.geometry.coordinates as [number, number][];
+          const firstCoordinates = coordinates[0];
+          if (firstCoordinates !== undefined) {
+            const bounds = coordinates.reduce(function (bounds, coord) {
+              return bounds.extend(coord);
+            }, new M.LngLatBounds(firstCoordinates, firstCoordinates));
+            this.map.fitBounds(bounds, { padding: 100 });
           }
-          (this.map.getSource('navigation-line') as M.GeoJSONSource).setData(newLine);
         }
+        (this.map.getSource('navigation-line') as M.GeoJSONSource).setData(newLine);
       }),
 
       // When a fountain is selected, zoom to it
@@ -149,7 +156,7 @@ export class MapComponent implements OnInit {
           this.userMarker.setLngLat(location).remove().addTo(this.map);
 
           this.map.flyTo({
-            center: location,
+            center: [location.lng, location.lat],
             maxDuration: 1500,
             zoom: 16,
           });
@@ -163,7 +170,7 @@ export class MapComponent implements OnInit {
   }
 
   private zoomToFountain(): void {
-    if (this._selectedFountain !== null) {
+    if (this._selectedFountain !== undefined) {
       this.map.flyTo({
         // GeoJson has number[] for backward compatibility reasons but it is either [number, number] or [number, number, number]
         center: this._selectedFountain.geometry.coordinates as [number, number],
@@ -176,37 +183,58 @@ export class MapComponent implements OnInit {
     }
   }
 
-  // Zoom to city bounds (only if current map bounds are outside of new city's bounds)
-  private zoomToCity(city: City): void {
-    try {
-      const bounds = this.dataService.getLocationBounds(city);
-      const waiting = () => {
-        if (!this.map.isStyleLoaded()) {
-          setTimeout(waiting, 200);
-        } else {
-          this.cityService.city.subscribeOnce(currentCity => {
-            // only refit city bounds if not zoomed into a fountain
-            if (this._mode === 'map') {
-              // might be the city already changed in the meantime - (after loading the map)
-              // only fit the bounds if the city is still the same (to reduce map drawing operations)
-              if (currentCity === city) {
-                const options = {
-                  maxDuration: 500,
-                  pitch: 0,
-                  bearing: 0,
-                };
-                this.map.fitBounds(bounds, options);
-              }
+  private firstStateChange = true;
+
+  private adjustMapToStateChange(newState: MapState) {
+    const currentState = this.mapService.calculateFields(this.toMapStateOmitCaluclatedFields(newState.city));
+
+    if (this.firstStateChange || !_.isEqual(currentState, newState)) {
+      if (this.firstStateChange) {
+        // we need to resize the map once as it is slightly displaced otherwise
+        this.map.resize();
+      }
+      if (newState.zoom === 'auto') {
+        try {
+          // only refit city bounds if not zoomed into a fountain and still same city
+          if (this._mode === 'map' && this.mapService.currentCity === newState.city) {
+            const bounds = newState.bounds;
+            const options = {
+              maxDuration: 500,
+              pitch: 0,
+              bearing: 0,
+              offset: [0, 0] as [number, number],
+            };
+            this.map.fitBounds([bounds.min, bounds.max], options);
+            if (this.firstStateChange) {
+              const afterFirstStyleLoad = () => {
+                // on first load, it happens that fitBounds does not trigger `moveend` all the time
+                // so we trigger one manually
+                this.mapLocationChangeSubject.next();
+                this.map.off('styledata', afterFirstStyleLoad);
+              };
+              this.map.on('styledata', afterFirstStyleLoad);
             }
-          });
+          }
+        } catch (e: unknown) {
+          console.error(e);
         }
-      };
-      waiting();
-    } catch (e: unknown) {
-      console.error(e);
+      } else {
+        this.map.jumpTo({
+          center: [newState.location.lng, newState.location.lat],
+          zoom: newState.zoom,
+        });
+      }
+      this.firstStateChange = false;
     }
   }
 
+  private toMapStateOmitCaluclatedFields(city: City | undefined): MapStateOmitCalculatedFields {
+    const mapboxBounds = this.map.getBounds();
+    const sw = mapboxBounds.getSouthWest();
+    const ne = mapboxBounds.getNorthEast();
+    return { bounds: Bounds(sw, ne), city: city, zoom: this.map.getZoom() };
+  }
+
   private zoomOut(): void {
     this.map.flyTo({
       zoom: this.mapConfig.map.zoomAfterDetail,
@@ -224,6 +252,7 @@ export class MapComponent implements OnInit {
         accessToken: environment.mapboxApiKey,
       })
     );
+    // this.onceStyleLoaded(() => this.map.resize());
 
     // Add navigation control to map
     this.navControl = new M.NavigationControl({
@@ -243,9 +272,8 @@ export class MapComponent implements OnInit {
     });
     this.map.addControl(this.geolocator);
 
-    this.geolocator.on('geolocate', (positionO?: Object) => {
-      if (positionO) {
-        const position = positionO as GeolocationPosition;
+    this.geolocator.on('geolocate', (position?: any) => {
+      if (position?.coords?.longitude && position.coords?.latitude) {
         this.setUserLocation(LngLat(position.coords.longitude, position.coords.latitude));
       }
     });
@@ -343,7 +371,7 @@ export class MapComponent implements OnInit {
   }
 
   private showSelectedPopupOnMap(): void {
-    if (this._selectedFountain !== null && this.selectPopup !== undefined) {
+    if (this._selectedFountain !== undefined && this.selectPopup !== undefined) {
       // hide popup
       this.selectPopup.remove();
       // show persistent popup over selected fountain
@@ -363,20 +391,18 @@ export class MapComponent implements OnInit {
   // filter fountains using array
   filterMappedFountains(fountainList: Fountain[]): void {
     // if the list is empty or null, hide all fountains
-    if (fountainList !== null) {
-      if (fountainList.length == 0) {
-        // set filter to look for non-existent key >> return none
-        this.map.setFilter('fountains', ['has', 'nt_xst']);
-      } else {
-        // if the list is not empty, filter the map
-        this.map.setFilter('fountains', [
-          'match',
-          ['get', 'id'],
-          fountainList.map(fountain => fountain.properties['id']),
-          true,
-          false,
-        ]);
-      }
+    if (fountainList.length == 0) {
+      // set filter to look for non-existent key >> return none
+      this.map.setFilter('fountains', ['has', 'nt_xst']);
+    } else {
+      // if the list is not empty, filter the map
+      this.map.setFilter('fountains', [
+        'match',
+        ['get', 'id'],
+        fountainList.map(fountain => fountain.properties['id']),
+        true,
+        false,
+      ]);
     }
   }
 
@@ -484,13 +510,17 @@ export class MapComponent implements OnInit {
         }
       })
     );
-    this.map.on('mouseleave', 'fountains', () => {
+    this.map.on('mouseleave', 'fountains', _ => {
       this.highlightFountainOnMap(undefined);
       this.map.getCanvas().style.cursor = '';
     });
     this.map.on('dblclick', event => {
       this.setUserLocation(LngLat(event.lngLat.lng, event.lngLat.lat));
     });
+    this.map.on('moveend', _ => {
+      this.mapLocationChangeSubject.next();
+    });
+
     // TODO @ralf.hauser, can the following be removed?
     // this.map.on('click', ()=>{
     //   if(!this.map.isMoving()){
@@ -499,6 +529,11 @@ export class MapComponent implements OnInit {
     // })
   }
 
+  private handleMapLocationChange() {
+    const state = this.toMapStateOmitCaluclatedFields(this.mapService.currentCity);
+    this.mapService.updateState(state);
+  }
+
   toggleBasemap(): void {
     this.satelliteShown = !this.satelliteShown;
     if (this.satelliteShown) {
@@ -531,10 +566,8 @@ export class MapComponent implements OnInit {
     }
   }
 
-  private setCurrentFountain(f: Fountain): void {
-    if (f !== null) {
-      this._selectedFountain = f;
-    }
+  private setCurrentFountain(fountain: Fountain): void {
+    this._selectedFountain = fountain;
     this.zoomToFountain();
     this.showSelectedPopupOnMap();
   }
diff --git a/src/app/mobile-menu/mobile-menu.component.html b/src/app/mobile-menu/mobile-menu.component.html
index 5c228835..d7f013c1 100644
--- a/src/app/mobile-menu/mobile-menu.component.html
+++ b/src/app/mobile-menu/mobile-menu.component.html
@@ -23,12 +23,12 @@ <h2 translate>intro.legend-title</h2>
       <ng-container *ngIf="cityObservable | async; let city">
         <!--   Add city-specific info for https://github.com/water-fountains/proximap/issues/277   -->
         <div
-          *ngIf="locationsCollection !== null && city"
+          *ngIf="locationsCollection !== undefined && city"
           [innerHTML]="locationsCollection[city].description[lang]"
         ></div>
         <mat-expansion-panel
           class="mat-elevation-z0"
-          *ngIf="locationsCollection !== null && city && locationsCollection[city].description_more[lang]"
+          *ngIf="locationsCollection !== undefined && city && locationsCollection[city].description_more[lang]"
         >
           <mat-expansion-panel-header>
             <mat-panel-title>
diff --git a/src/app/mobile-menu/mobile-menu.component.ts b/src/app/mobile-menu/mobile-menu.component.ts
index c43d918e..a10e085d 100644
--- a/src/app/mobile-menu/mobile-menu.component.ts
+++ b/src/app/mobile-menu/mobile-menu.component.ts
@@ -13,7 +13,7 @@ import { LayoutService } from '../core/layout.service';
 import { SubscriptionService } from '../core/subscription.service';
 import { DataService } from '../data.service';
 import { City, LocationsCollection } from '../locations';
-import { CityService } from '../city/city.service';
+import { MapService } from '../city/map.service';
 import * as sharedConstants from './../../assets/shared-constants.json';
 
 @Component({
@@ -25,7 +25,7 @@ import * as sharedConstants from './../../assets/shared-constants.json';
 export class MobileMenuComponent implements OnInit {
   publicSharedConsts = sharedConstants;
   cities: City[] = [];
-  locationsCollection: LocationsCollection | null = null;
+  locationsCollection: LocationsCollection | undefined = undefined;
   showMoreLocationDescription = false;
   versionInfo = {
     url: `https://github.com/water-fountains/proximap/commit/${versions.revision}`,
@@ -42,11 +42,11 @@ export class MobileMenuComponent implements OnInit {
     private dataService: DataService,
     private languageService: LanguageService,
     private layoutService: LayoutService,
-    private citySerivce: CityService
+    private mapService: MapService
   ) {}
 
   langObservable = this.languageService.langObservable;
-  cityObservable = this.citySerivce.city;
+  cityObservable = this.mapService.city;
   device = this.layoutService.isMobile.map(x => (x ? 'mobile' : 'desktop'));
 
   ngOnInit(): void {
diff --git a/src/app/navbar/navbar.component.css b/src/app/navbar/navbar.component.css
index d94d7f2e..e89a8041 100644
--- a/src/app/navbar/navbar.component.css
+++ b/src/app/navbar/navbar.component.css
@@ -19,6 +19,10 @@ app-city-selector {
   margin-right: 10px;
 }
 
+app-city-selector ::ng-deep mat-form-field {
+  width: 180px;
+}
+
 /* Show left sidebar button if on small screen*/
 @media (min-width: 900px) {
   #left-sidebar-button {
diff --git a/src/app/router/router.component.ts b/src/app/router/router.component.ts
index e40a1beb..19e45bd2 100644
--- a/src/app/router/router.component.ts
+++ b/src/app/router/router.component.ts
@@ -8,11 +8,14 @@
 import '../shared/importAllExtensions';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { combineLatest, of } from 'rxjs/index';
+import { combineLatest } from 'rxjs/index';
 import { SubscriptionService } from '../core/subscription.service';
-import { CityService } from '../city/city.service';
+import { MapService, MapState } from '../city/map.service';
+import { first, switchMap } from 'rxjs/operators';
+import { FountainService } from '../fountain/fountain.service';
+import { FountainSelector } from '../types';
+import { LanguageService } from '../core/language.service';
 import { RoutingService } from '../services/routing.service';
-import { switchMap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-router',
@@ -26,33 +29,55 @@ export class RouterComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     private routeValidator: RoutingService,
-    private cityService: CityService
+    private mapService: MapService,
+    private fountainService: FountainService,
+    private languageService: LanguageService
   ) {}
 
   ngOnInit(): void {
     this.subscriptionService.registerSubscriptions(
       combineLatest([this.route.paramMap, this.route.queryParamMap])
-        // need to use pipe(switchMap(...)) as WEBPACK somehow messes up everything and cannot find the extension method
-        .pipe(switchMap(([routeParam, queryParam]) => this.routeValidator.handleUrlChange(routeParam, queryParam)))
+        .pipe(
+          // we only want to know about the first url (i.e. the url the user entered into the addressbar)
+          // and not programmatic changes to the url
+          first(),
+          // need to use pipe(switchMap(...)) as WEBPACK somehow messes up everything and cannot find the extension method
+          switchMap(([routeParam, queryParam]) => this.routeValidator.handleUrlChange(routeParam, queryParam))
+        )
         .subscribe(_ => undefined /* nothing to do as side effect (navigating) occurs in handleUrlChange */),
 
-      // TODO @ralf.hauser - navigating to a fountain currently happens in two route changes due to the code below (which is not nice IMO).
+      // TODO @ralf.hauser - navigating to a fountain currently happens in two route changes (which is not nice IMO).
       // first it changes to https://old.water-fountains.org/ch-zh?l=de and then it changes to https://old.water-fountains.org/ch-zh?l=de&i=Q27229673
-      // this is because city and fountainSelector are independent states.
+      // this is because city and fountainSelector are independent states (subscribed independently)
       // Yet, they cannot really change independently and should be consolidated in one state
-      this.cityService.city
-        .switchMap(city => {
-          if (city !== null) {
-            return this.routeValidator.getShortenedQueryParams().tap(queryParams => {
-              this.router.navigate([`/${city}`], {
-                queryParams: queryParams,
-              });
-            });
-          } else {
-            return of(undefined);
-          }
-        })
-        .subscribe(_ => undefined /* nothing to do as side effect occurs in tap */)
+      combineLatest([this.mapService.state, this.fountainService.fountainSelector]).subscribe(([state, selector]) => {
+        this.navigateToNewRoute(state, selector);
+      })
     );
   }
+
+  private navigateToNewRoute(state: MapState, fountainSelector: FountainSelector | undefined): void {
+    const q: Omit<QueryParams, 'loc'> = fountainSelector ? this.getQueryParamsForSelector(fountainSelector) : {};
+    const queryParams: QueryParams = {
+      loc: `${state.location.lat},${state.location.lng},` + (state.zoom === 'auto' ? 'auto' : `${state.zoom}z`),
+      ...q,
+      l: this.languageService.currentLang,
+    };
+    this.router.navigate([`/${state.city ? state.city : ''}`], {
+      queryParams: queryParams,
+    });
+  }
+
+  private getQueryParamsForSelector(fountainSelector: FountainSelector): Omit<QueryParams, 'loc'> {
+    switch (fountainSelector.queryType) {
+      case 'byId':
+        return { i: fountainSelector.idval };
+    }
+  }
+}
+
+interface QueryParams {
+  l?: string;
+  i?: string; // url for identifiers, for #159
+  loc: string;
 }
diff --git a/src/app/services/routing.service.ts b/src/app/services/routing.service.ts
index ee1e8009..4a2909f8 100644
--- a/src/app/services/routing.service.ts
+++ b/src/app/services/routing.service.ts
@@ -15,17 +15,12 @@ import { LayoutService } from '../core/layout.service';
 import { DataService, lookupFountainAlias } from '../data.service';
 import { FountainService } from '../fountain/fountain.service';
 import { City } from '../locations';
-import { CityService, defaultCity } from '../city/city.service';
-import { Database, FountainSelector, LngLat } from '../types';
+import { MapService, defaultCity } from '../city/map.service';
+import { Database, FountainSelector, LngLat, SharedLocation } from '../types';
 import { getSingleStringParam, isNumeric } from './utils';
-import { catchError, filter, first } from 'rxjs/operators';
+import { catchError, filter } from 'rxjs/operators';
 import { MapConfig } from '../map/map.config';
 
-export interface QueryParams {
-  l?: string;
-  i?: string; // url for identifiers, for #159
-}
-
 @Injectable({
   providedIn: 'root',
 })
@@ -37,7 +32,7 @@ export class RoutingService {
     private dataService: DataService,
     private languageService: LanguageService,
     private fountainService: FountainService,
-    private cityService: CityService,
+    private mapService: MapService,
     private layoutService: LayoutService,
     private mapConfig: MapConfig
   ) {}
@@ -46,7 +41,7 @@ export class RoutingService {
    * we have the following precedence rules:
    * 1. if a valid fountain id (wikidata, osm or an alias) was defined in url => navigate to fountain, open detail, ignore id defined as queryparam, sharedLocation and/or city
    * 2. if a valid fountain id (wikidata, osm or an alias) was defined in queryParam => navigate to fountain, open detail, ignore sharedLocation and/or city
-   * 3. if we find a valid shared location => navigate to the location, ignore city
+   * 3. if we find a valid shared location => navigate to the location, ignore city, use only for drop-down if applicable
    * 4. if we find a valid city (code or alias) => navigate to the city
    * 5. fallback to the default city which is ch-zh
    *
@@ -62,7 +57,7 @@ export class RoutingService {
    * https://.../Q27229902?loc=... => wikidata id (shared location ignored)
    * https://.../?i=Q27229902&loc=... => wikidata id (shared location ignored)
    * https://.../ch-zh?i=Q27229902?loc=... => wikidata id (shared location and city ignored)
-   * https://.../ch-zh?loc=... => shared location (city ignored)
+   * https://.../ch-zh?loc=... => shared location (city used for drop-down if applicable)
    */
   handleUrlChange(routeParam: ParamMap, queryParam: ParamMap): Observable<boolean> {
     const fountainIdOrAlias_cityIdOrAlias = getSingleStringParam(
@@ -83,7 +78,7 @@ export class RoutingService {
       },
       () => {
         const loc = getSingleStringParam(queryParam, 'loc', /* isOptional= */ true);
-        return this.navigateToSharedLocation(loc);
+        return this.navigateToSharedLocation(loc, fountainIdOrAlias_cityIdOrAlias);
       },
       () => this.navigateToCity(fountainIdOrAlias_cityIdOrAlias),
       () => this.navigateToCity(defaultCity)
@@ -111,9 +106,9 @@ export class RoutingService {
           const { lngLat, database, updateId } = data;
           const city = this.getCityByLngLat(lngLat);
           if (city !== undefined) {
+            this.updateFromId(database, updateId);
             //TODO @ralf.hauser this function currently depends on that a fountain is in a city
             this.layoutService.flyToCity(city);
-            this.updateFromId(database, updateId);
           }
           return true;
         } else {
@@ -245,59 +240,60 @@ export class RoutingService {
     this.dataService.selectFountainBySelector(fountainSelector);
   }
 
-  private navigateToSharedLocation(maybLocAsString: string | undefined): Observable<boolean> {
+  private navigateToSharedLocation(
+    maybLocAsString: string | undefined,
+    cityIdOrAlias: string | undefined
+  ): Observable<boolean> {
     const locArr = maybLocAsString !== undefined ? maybLocAsString.split(',') : [];
     if ((locArr.length === 2 || locArr.length === 3) && isNumeric(locArr[0]) && isNumeric(locArr[1])) {
       const lat = Number(locArr[0]);
       const lng = Number(locArr[1]);
-      // TODO @robstoll implement sharedLocation here
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const _sharedLocation = { lngLat: LngLat(lng, lat), zoom: this.parseZoomOrDefault(locArr) };
-      return of(false);
+      const sharedLocation: SharedLocation = { location: LngLat(lng, lat), zoom: this.parseZoomOrDefault(locArr) };
+      this.mapService.updatedStateBasedOnSharedLocation(sharedLocation, cityIdOrAlias);
+      return of(true);
     } else {
       return of(false);
     }
   }
 
   private navigateToCity(maybeCity: string | undefined): Observable<boolean> {
-    const newCity = this.cityService.parse(maybeCity);
-    console.log("cityCode '" + newCity + "' cityOrId  '" + maybeCity + "' " + new Date().toISOString()); //todo show what came as parameters: https://angular.io/api/router/ParamMap  for '"+paramMap.params+"'
-
+    const newCity = this.mapService.parseCity(maybeCity);
     if (newCity !== undefined) {
-      // we are only interested in the current value at the time we navigate, thus pipe(first)
-      // if we don't use it we would get the update flyToCity produces (due to the subject change to newCity)
-      // and since city is then alwas == newCity we would return false even though we navigated beforehand
-      return this.cityService.city.pipe(first()).map(city => {
-        // update if different from current state
-        if (newCity !== city) {
-          console.log('fly to city ' + newCity + "' based on value '" + city + "' " + new Date().toISOString());
-          this.layoutService.flyToCity(newCity);
-        }
-        // regardless if we have to fly to the city or if we are already in the city
-        // we return true as we do no longer need to navigate
-        return true;
-      });
+      console.log('fly to city ' + newCity + "' based on value '" + maybeCity + "' " + new Date().toISOString());
+      this.layoutService.flyToCity(newCity);
+      return of(true);
     } else {
       return of(false);
     }
   }
 
-  private parseZoomOrDefault(arr: string[]): number {
-    let zoom = this.mapConfig.map.zoom;
-    const arg2 = arr[2];
-    if (arg2 !== undefined) {
-      const tmpZoom = parseInt(arg2, 10);
-      if (!isNaN(tmpZoom)) {
-        if (tmpZoom > this.mapConfig.map.maxZoom) {
-          zoom = this.mapConfig.map.maxZoom;
-        } else if (tmpZoom < this.mapConfig.map.minZoom) {
-          zoom = this.mapConfig.map.minZoom;
+  private parseZoomOrDefault(arr: string[]): number | 'auto' {
+    let zoomAsString = arr[2];
+    if (zoomAsString !== undefined) {
+      if (zoomAsString === 'auto') {
+        return 'auto';
+      } else if (zoomAsString.endsWith('z')) {
+        zoomAsString = zoomAsString.substring(0, zoomAsString.length - 1);
+        if (isNumeric(zoomAsString)) {
+          const tmpZoom = Number(zoomAsString);
+          if (tmpZoom > this.mapConfig.map.maxZoom) {
+            return this.mapConfig.map.maxZoom;
+          } else if (tmpZoom < this.mapConfig.map.minZoom) {
+            return this.mapConfig.map.minZoom;
+          } else {
+            return tmpZoom;
+          }
         } else {
-          zoom = tmpZoom;
+          console.warn('unsupported zoom parameter', zoomAsString);
+          return this.mapConfig.map.zoom;
         }
+      } else {
+        console.warn('unsupported zoom parameter', zoomAsString);
+        return this.mapConfig.map.zoom;
       }
+    } else {
+      return this.mapConfig.map.zoom;
     }
-    return zoom;
   }
 
   private detectLanguageChange(queryParams: ParamMap) {
@@ -313,22 +309,6 @@ export class RoutingService {
       }
     }
   }
-
-  getShortenedQueryParams(): Observable<QueryParams> {
-    return this.fountainService.fountainSelector.map(fountainSelector => {
-      // Get query parameter values from app state. use short query params by default for #159
-      const queryParams: QueryParams = fountainSelector ? this.getQueryParamsForSelector(fountainSelector) : {};
-      queryParams.l = this.languageService.currentLang;
-      return queryParams;
-    });
-  }
-
-  private getQueryParamsForSelector(fountainSelector: FountainSelector): QueryParams {
-    switch (fountainSelector.queryType) {
-      case 'byId':
-        return { l: this.languageService.currentLang };
-    }
-  }
 }
 
 function isWikidataId(id: string): boolean {
diff --git a/src/app/shared/ObservableExtensions.ts b/src/app/shared/ObservableExtensions.ts
index 49984c70..23f78da3 100644
--- a/src/app/shared/ObservableExtensions.ts
+++ b/src/app/shared/ObservableExtensions.ts
@@ -3,8 +3,8 @@
  * @license AGPL
  */
 
-import { BehaviorSubject, Observable, Subscription } from 'rxjs';
-import { first, map, switchMap, tap } from 'rxjs/operators';
+import { BehaviorSubject, Observable, OperatorFunction, pipe, Subscription, UnaryFunction } from 'rxjs';
+import { filter, first, map, switchMap, tap } from 'rxjs/operators';
 import { SubscriptionService } from '../core/subscription.service';
 
 declare module 'rxjs/internal/Observable' {
@@ -154,3 +154,11 @@ Observable.prototype.subscribeOnce = function <E>(
 ): Subscription {
   return this.pipe(first()).subscribe(next, error, complete);
 };
+
+/**
+ * @author Tegonal GmbH
+ * @license AGPL
+ */
+export function filterUndefined<T>(): UnaryFunction<Observable<T | undefined>, Observable<T>> {
+  return pipe(filter(x => x !== undefined) as OperatorFunction<T | undefined, T>);
+}
diff --git a/src/app/types.ts b/src/app/types.ts
index 02457e36..1c9448c7 100644
--- a/src/app/types.ts
+++ b/src/app/types.ts
@@ -146,16 +146,27 @@ export interface LngLat {
   lat: number;
 }
 export function LngLat(lng: number, lat: number): LngLat {
-  if (lng >= -180 && lng <= 180 && lat >= -90 && lat <= 90) {
-    return { lng: lng, lat: lat };
-  } else {
-    illegalState('lng or lat are out of range', lng, lat);
-  }
+  if (lng < -180 || lng > 180) illegalState('lng out of range [-180, 180]', lng);
+  if (lat < -90 || lat > 90) illegalState('lat out of range [-180, 180]', lat);
+
+  return { lng: lng, lat: lat };
+}
+
+export interface Bounds {
+  min: LngLat;
+  max: LngLat;
 }
-export type Bounds = [LngLat, LngLat];
+export function Bounds(min: LngLat, max: LngLat): Bounds {
+  if (min.lng > max.lng) illegalState('min lng greater than max lng');
+  if (min.lat > max.lat) illegalState('min lat greater than max lat');
+
+  return { min: min, max: max };
+}
+
+// A shared location does not include the bounds, depending on the screen two users will not see exactly the same excerpt.
 export interface SharedLocation {
-  lngLat: LngLat;
-  zoom: number;
+  location: LngLat;
+  zoom: number | 'auto';
 }
 
 // TODO it would make more sense to move common types to an own library which is consumed by both, datablue and proximap
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index ae7d6c33..74b82f4f 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -198,6 +198,7 @@
     "sr-bg": "Belgrad",
     "test": "Test-City-Beta"
   },
+  "selectCity": "Fliege nach...",
   "settings": {
     "city": "Stadt ändern",
     "city_last_scan": "Letzte Aktualisierung am",
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 7188bd24..62e29380 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -196,6 +196,7 @@
     "sr-bg": "Belgrade",
     "test": "Test-City-Beta"
   },
+  "selectCity": "Fly to...",
   "settings": {
     "city": "Change city",
     "city_last_scan": "Last processing",
diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json
index 66736060..8fe3547f 100644
--- a/src/assets/i18n/fr.json
+++ b/src/assets/i18n/fr.json
@@ -197,6 +197,7 @@
     "sr-bg": "Belgrade",
     "test": "Test-City-Beta"
   },
+  "selectCity": "Vole à...",
   "settings": {
     "city": "Changer de lieu",
     "city_last_scan": "Dernier scan le",
diff --git a/src/assets/i18n/it.json b/src/assets/i18n/it.json
index f0d4527f..b46cb1e9 100644
--- a/src/assets/i18n/it.json
+++ b/src/assets/i18n/it.json
@@ -196,6 +196,7 @@
     "sr-bg": "Belgrade",
     "test": "Test-City-Beta"
   },
+  "selectCity": "Vola a...",
   "settings": {
     "city": "Cambia la città",
     "city_last_scan": "Ultima elaborazione",