diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts
index 29cc350..19ec0e7 100644
--- a/src/app/map/map.component.ts
+++ b/src/app/map/map.component.ts
@@ -4,7 +4,7 @@ import { NGXLogger } from 'ngx-logger';
 import { Subject, takeUntil } from 'rxjs';
 import { NotificationService } from '../notifications/notification.service';
 import { Deck, Layer } from '@deck.gl/core/typed';
-import { INITIAL_VIEW_STATE } from './map.constants';
+import { INITIAL_VIEW_STATE, LayerIndices } from './map.constants';
 
 @Component({
   selector: 'app-map',
@@ -40,6 +40,7 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   private initDeckGlMap() {
+    // TODO deck.gl: show metrics
     this.layers.then(layers => {
       this.map = new Deck({
         parent: this.mapDiv?.nativeElement,
@@ -48,7 +49,7 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
         width: '100vw',
         height: '100vh',
         controller: true,
-        useDevicePixels: true,
+        useDevicePixels: false,
         layers: [layers],
         onWebGLInitialized: gl => {
           gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE, gl.ONE_MINUS_DST_ALPHA, gl.ONE);
@@ -60,19 +61,19 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
 
   private initAllSubscriptions() {
     this.mapService.resetMap$.pipe(takeUntil(this.onUnsubscribe$)).subscribe(() => {
-      // TODO this.resetMap();
+      // TODO deck.gl: this.resetMap();
     });
 
     this.mapService.toMyLocation$.pipe(takeUntil(this.onUnsubscribe$)).subscribe(() => {
-      // TODO this.myLocation();
+      // TODO deck.gl: this.myLocation();
     });
 
-    this.mapService.showEuBorders$.pipe(takeUntil(this.onUnsubscribe$)).subscribe(value => {
-      // TODO this.showEuBorders(value);
+    this.mapService.showEuBorders$.pipe(takeUntil(this.onUnsubscribe$)).subscribe(() => {
+      // TODO deck.gl: this.showEuBorders(value);
     });
 
-    this.mapService.showCapitols$.pipe(takeUntil(this.onUnsubscribe$)).subscribe(value => {
-      // TODO this.showCapitols(value);
+    this.mapService.showCapitols$.pipe(takeUntil(this.onUnsubscribe$)).subscribe(() => {
+      // TODO deck.gl: this.showCapitols(value);
     });
   }
 
@@ -87,7 +88,7 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   private disposeMap() {
-    // TODO dispose map map
+    // TODO deck.gl: dispose map map
     this.log.info('Disposed theMap');
   }
 
@@ -99,12 +100,11 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
   // }
 
   private async loadAllLayers() {
-    // TODO map.gl impl
-    return this.mapService.loadAllLayers().then(([baseLayer, capitolsLayer]) => {
+    return this.mapService.loadAllLayers().then(([mapLayer, euBorderLayer, capitolsLayer]) => {
       const layers = new Array<Layer>(2);
-      layers[0] = baseLayer;
-      //layers[LayerIndices.EU_LAYER_INDEX] = euBorderLayer;
-      layers[1] = capitolsLayer;
+      layers[LayerIndices.MAP_LAYER_INDEX] = mapLayer;
+      layers[LayerIndices.EU_LAYER_INDEX] = euBorderLayer;
+      layers[LayerIndices.CAPITOLS_LAYER_INDEX] = capitolsLayer;
 
       this.log.debug('Layers loaded', layers);
       return layers;
@@ -124,7 +124,7 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
 
   // resetMap() {
   //   this.theMap!.flyTo(centerOfEurope, defaultZoom);
-  //   // TODO clear my location marker
+  //   // TODO deck.gl: clear my location marker
   // }
 
   // myLocation() {
@@ -157,7 +157,7 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
   //     .then(capitols => capitols.getLayers().forEach(capitol => this.markerVisible(capitol, value)));
   // }
 
-  // TODO does that work
+  // TODO deck.gl: does that work
   private markerVisible(layer: Layer, visible: boolean) {
     layer.setState({ visible: visible });
   }
diff --git a/src/app/map/map.constants.ts b/src/app/map/map.constants.ts
index 3aa8b07..62bfd8c 100644
--- a/src/app/map/map.constants.ts
+++ b/src/app/map/map.constants.ts
@@ -10,8 +10,8 @@ export const INITIAL_VIEW_STATE = {
   latitude: CENTER_OF_EUROPE[0],
   longitude: CENTER_OF_EUROPE[1],
   zoom: DEFAULT_ZOOM,
-  minZoom: 0,
-  maxZoom: 19,
+  minZoom: 3,
+  maxZoom: 10,
   pitch: 0,
   bearing: 0
 };
@@ -19,13 +19,13 @@ export const INITIAL_VIEW_STATE = {
 export const MAP_LAYER = new TileLayer({
   id: 'map-layer',
   data: environment.tileServerUrls,
-  maxRequests: 10,
+  maxRequests: 20,
   pickable: false,
   tileSize: 256,
 
   renderSubLayers: props => {
-    // using never in next two lines is just a hack for typescript
-    // see:
+    // using 'never' in next two lines is just a hack for typescript
+    // see: https://github.com/visgl/deck.gl/issues/8467
     const {
       bbox: { west, south, east, north }
     } = props.tile as never;
@@ -41,7 +41,7 @@ export const MAP_LAYER = new TileLayer({
   }
 });
 
-// TODO attribution
+// TODO deck.gl: attribution
 // export const darkMatterNoLabelsLayer = new TileLayer(environment.tileServerUrl, {
 //   attribution:
 //     '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
@@ -49,7 +49,7 @@ export const MAP_LAYER = new TileLayer({
 
 export const BERLIN = [52.52, 13.405];
 
-// TODO popup
+// TODO deck.gl: popup
 export const CAPITOLS_LAYER = new ScatterplotLayer({
   id: 'capitols-layer',
   data: [{ coordinates: BERLIN, radius: 30 }],
@@ -69,7 +69,7 @@ export const CAPITOLS_LAYER = new ScatterplotLayer({
 });
 
 export enum LayerIndices {
-  BASE_LAYER_INDEX = 0,
+  MAP_LAYER_INDEX = 0,
   EU_LAYER_INDEX = 1,
   CAPITOLS_LAYER_INDEX = 2
 }
diff --git a/src/app/map/map.service.ts b/src/app/map/map.service.ts
index af03a03..7435432 100644
--- a/src/app/map/map.service.ts
+++ b/src/app/map/map.service.ts
@@ -5,6 +5,7 @@ import { CAPITOLS_LAYER, CENTER_OF_EUROPE, MAP_LAYER } from './map.constants';
 import { NotificationService } from '../notifications/notification.service';
 import { Layer } from '@deck.gl/core/typed';
 import { GeoJsonLayer } from '@deck.gl/layers/typed';
+import { firstValueFrom } from 'rxjs';
 
 @Injectable()
 export class MapService {
@@ -13,40 +14,49 @@ export class MapService {
   showEuBorders$ = new EventEmitter<boolean>();
   showCapitols$ = new EventEmitter<boolean>();
 
-  private readonly euBordersLayer?: GeoJsonLayer;
+  private readonly euBordersLayer: Promise<GeoJsonLayer>;
 
   constructor(
     private readonly http: HttpClient,
     private readonly log: NGXLogger,
     private readonly notificationService: NotificationService
   ) {
-    //this.euBordersLayer = this.initEuBordersLayer();
-    //this.euBordersLayer = new GeoJsonLayer({});
+    this.euBordersLayer = this.initEuBordersLayer();
   }
 
-  // private async initEuBordersLayer() {
-  //   return firstValueFrom(this.http.get<JSON>('./assets/geo-data/european-borders.json'))
-  //     .then(jsonResponse => {
-  //       this.log.debug('Loaded borders json', jsonResponse);
-  //       return new GeoJsonLayer(jsonResponse, { style: euBorderStyle });
-  //     })
-  //     .catch(err => {
-  //       this.notificationService.showError('Error loading EU borders geo json', err);
-  //       return geoJson();
-  //     });
-  // }
+  private async initEuBordersLayer() {
+    return firstValueFrom(this.http.get<JSON>('./assets/geo-data/eu-borders.json'))
+      .then(geoJson => {
+        this.log.debug('Loaded borders json', geoJson);
 
+        return new GeoJsonLayer({
+          id: 'eu-borders-layer',
+          data: geoJson,
+          pickable: false,
+          stroked: true,
+          filled: true,
+          lineWidthMinPixels: 1,
+          getFillColor: [255, 214, 23, 15],
+          getLineColor: [255, 214, 23],
+          getElevation: 0
+        });
+      })
+      .catch(err => {
+        this.notificationService.showError('Error loading EU borders geo json', err);
+        return new GeoJsonLayer({ id: 'eu-borders-layer' });
+      });
+  }
+
+  // TODO deck.gl: do not forget this method
   getCenterOfEurope() {
     return CENTER_OF_EUROPE;
   }
 
   async loadAllLayers(): Promise<Layer[]> {
-    // TODO deck.gl impl
-    // return Promise.all([this.getBaseLayer(), this.getEuBordersLayer(), this.getCapitolsLayer()]);
-    return Promise.all([this.getBaseLayer(), this.getCapitolsLayer()]);
+    return Promise.all([this.getMapLayer(), this.getEuBordersLayer(), this.getCapitolsLayer()]);
   }
 
-  private getBaseLayer() {
+  private getMapLayer() {
     return MAP_LAYER;
   }
 
@@ -54,7 +64,7 @@ export class MapService {
     return this.euBordersLayer;
   }
 
-  // TODO load capitols via HTTP
+  // TODO feature: load capitols via HTTP and add population
   private async getCapitolsLayer() {
     return CAPITOLS_LAYER;
   }