Skip to content

Commit

Permalink
Implement loading of EU border geo json layer
Browse files Browse the repository at this point in the history
  • Loading branch information
@holgerstolzenberg
holgerstolzenberg committed Mar 5, 2024
1 parent 36fc3c5 commit 9ff994f
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 43 deletions.
32 changes: 16 additions & 16 deletions src/app/map/map.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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,
Expand All @@ -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);
Expand All @@ -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);
});
}

Expand All @@ -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');
}

Expand All @@ -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;
Expand All @@ -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() {
Expand Down Expand Up @@ -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 });
}
Expand Down
16 changes: 8 additions & 8 deletions src/app/map/map.constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,22 @@ 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
};

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;
Expand All @@ -41,15 +41,15 @@ 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>'
// });

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 }],
Expand All @@ -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
}
48 changes: 29 additions & 19 deletions src/app/map/map.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -13,48 +14,57 @@ 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;
}

private getEuBordersLayer() {
return this.euBordersLayer;
}

// TODO load capitols via HTTP
// TODO feature: load capitols via HTTP and add population
private async getCapitolsLayer() {
return CAPITOLS_LAYER;
}
Expand Down

0 comments on commit 9ff994f

Please sign in to comment.