Skip to content

Commit 703920b

Browse files
author
Andrea Barbasso
committed
[UXP-155] use leaflet for OpenStreetMaps
1 parent 077e411 commit 703920b

8 files changed

Lines changed: 126 additions & 1340 deletions

File tree

‎angular.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,8 @@
6969
"input": "src/themes/dspace/styles/theme.scss",
7070
"inject": false,
7171
"bundleName": "dspace-theme"
72-
}
72+
},
73+
"./node_modules/leaflet/dist/leaflet.css"
7374
],
7475
"scripts": [],
7576
"baseHref": "/"

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@
8686
"@angular/platform-server": "^15.2.8",
8787
"@angular/router": "^15.2.8",
8888
"@babel/runtime": "7.21.0",
89+
"@asymmetrik/ngx-leaflet": "^15.0.0",
8990
"@datadog/browser-rum": "^5.7.0",
9091
"@kolkov/ngx-gallery": "^2.0.1",
9192
"@material-ui/core": "^4.11.0",
@@ -103,6 +104,7 @@
103104
"@swimlane/ngx-charts": "^20.4.1",
104105
"@types/googlemaps": "^3.43.3",
105106
"@types/grecaptcha": "^3.0.4",
107+
"@types/leaflet": "^1.9.12",
106108
"angular-idle-preload": "3.0.0",
107109
"angulartics2": "^12.2.0",
108110
"axios": "^1.6.0",
@@ -133,6 +135,7 @@
133135
"jsonschema": "1.4.1",
134136
"jwt-decode": "^3.1.2",
135137
"klaro": "^0.7.18",
138+
"leaflet": "^1.9.4",
136139
"lodash": "^4.17.21",
137140
"lru-cache": "^7.14.1",
138141
"markdown-it": "^13.0.1",
@@ -147,7 +150,6 @@
147150
"ng2-nouislider": "^2.0.0",
148151
"ng2-pdfjs-viewer": "^15.0.0",
149152
"ngx-infinite-scroll": "^15.0.0",
150-
"ngx-openlayers": "0.8.22",
151153
"ngx-pagination": "6.0.3",
152154
"ngx-ui-switch": "^14.0.3",
153155
"nouislider": "^15.7.1",

‎src/app/directives/text-select/text-select.directive.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,6 @@ export class TextSelectDirective implements OnInit, OnDestroy {
9494
if (!selection.rangeCount || !stringSelection || previousSelection === stringSelection) {
9595
return;
9696
}
97-
console.warn('selection', stringSelection);
9897
let range = selection.getRangeAt(0);
9998
let rangeContainer = this.getRangeContainer(range);
10099
// check if the range container is inside the current element

‎src/app/shared/open-street-map/open-street-map.component.html‎

Lines changed: 10 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,12 @@
1-
<div id="osm-wrapper" *ngIf="(coordinates$ | async) !== null">
2-
<aol-map [logo]="true" [width]="width" [height]="height">
3-
<aol-interaction-default></aol-interaction-default>
4-
<aol-view [zoom]="zoom">
5-
<aol-coordinate [x]="(coordinates$ | async)?.longitude" [y]="(coordinates$ | async)?.latitude" [srid]="SRID"></aol-coordinate>
6-
</aol-view>
7-
<aol-layer-tile>
8-
<aol-source-osm></aol-source-osm>
9-
</aol-layer-tile>
10-
<aol-layer-vector>
11-
<aol-source-vector>
12-
<aol-feature *ngFor="let pointer of (pointers$ | async)">
13-
<aol-geometry-point>
14-
<aol-coordinate [x]="pointer.coordinates.longitude" [y]="pointer.coordinates.latitude" [srid]="SRID"></aol-coordinate>
15-
</aol-geometry-point>
16-
<aol-style>
17-
<aol-style-circle [radius]="10">
18-
<aol-style-stroke color="black" [width]="1"></aol-style-stroke>
19-
<aol-style-fill [color]="pointer.color"></aol-style-fill>
20-
</aol-style-circle>
21-
</aol-style>
22-
</aol-feature>
23-
</aol-source-vector>
24-
</aol-layer-vector>
25-
<aol-control>
26-
<aol-content>
27-
<div *ngIf="showControlsZoom" class="ol-overlaycontainer-stopevent">
28-
<div class="ol-zoom ol-unselectable ol-control">
29-
<button [title]="'openstreetmap.location.zoomIn' | translate" class="ol-zoom-in" type="button" title="Zoom in"
30-
(click)="increaseZoom()">+
31-
</button>
32-
<button [title]="'openstreetmap.location.zoomOut' | translate" class="ol-zoom-out" type="button"
33-
title="Zoom out"
34-
(click)="decreaseZoom()">−
35-
</button>
36-
</div>
37-
<!-- TODO: add the possibility to center the map by clicking on this button -->
38-
<!--<div class="ol-rotate ol-unselectable ol-control">
39-
<button [title]="'openstreetmap.location.center' | translate" (click)="centerMap()">
40-
&#8982;
41-
</button>
42-
</div>-->
43-
</div>
44-
</aol-content>
45-
</aol-control>
46-
</aol-map>
1+
<div *ngIf="(coordinates$ | async) !== null"
2+
leaflet
3+
[ngStyle]="mapStyle"
4+
[leafletOptions]="leafletOptions"
5+
[leafletZoom]="leafletZoom"
6+
[leafletCenter]="leafletCenter"
7+
[leafletLayers]="leafletLayers">
478
</div>
489
<div *ngIf="showDisplayName" class="my-1 text-muted">{{ displayName$ | async }}</div>
49-
<div *ngIf="(invalidLocationErrorCode | async) as errorCode" class="text-danger">{{ 'location.error.' + errorCode | translate }}</div>
10+
<div *ngIf="(invalidLocationErrorCode | async) as errorCode"
11+
class="text-danger">{{ 'location.error.' + errorCode | translate }}
12+
</div>

‎src/app/shared/open-street-map/open-street-map.component.scss‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1-
@import 'openlayers/dist/ol.css';
2-
3-
#osm-wrapper {
4-
position: relative; // required to align internal elements
1+
::ng-deep {
2+
// remove leaflet default attribution
3+
.leaflet-control-attribution.leaflet-control {
4+
span {
5+
display: none;
6+
}
7+
a {
8+
display: none;
9+
}
10+
}
511
}

‎src/app/shared/open-street-map/open-street-map.component.ts‎

Lines changed: 45 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
import { Component, Input, OnInit } from '@angular/core';
1+
import { Component, ElementRef, Input, OnInit } from '@angular/core';
22
import {
33
LocationCoordinates,
44
LocationErrorCodes,
55
LocationPlace,
66
LocationService
77
} from '../../core/services/location.service';
8-
import { filter, map } from 'rxjs/operators';
9-
import { BehaviorSubject, Observable } from 'rxjs';
8+
import { filter, map, tap } from 'rxjs/operators';
9+
import { BehaviorSubject, Observable, of } from 'rxjs';
1010
import { TranslateService } from '@ngx-translate/core';
1111
import { isNotEmpty } from '../empty.util';
12+
import { latLng, LatLng, Layer, MapOptions, marker, tileLayer } from 'leaflet';
13+
1214

1315
export interface OpenStreetMapPointer {
1416
coordinates: LocationCoordinates,
@@ -25,8 +27,6 @@ export class OpenStreetMapComponent implements OnInit {
2527
// Spacial reference identifier
2628
SRID = 'EPSG:4326'; // World Geodetic System 1984
2729

28-
zoom = 14;
29-
3030
/**
3131
* The width of the map
3232
*/
@@ -83,31 +83,51 @@ export class OpenStreetMapComponent implements OnInit {
8383
place = new BehaviorSubject<LocationPlace>(undefined);
8484

8585
/**
86-
* The pointers to be shown on the map
86+
* The styles that are being applied to the map container
87+
*/
88+
mapStyle: {[key: string]: string} = {};
89+
90+
/**
91+
* The center of the map
92+
*/
93+
leafletCenter: LatLng;
94+
95+
/**
96+
* The zoom level of the map
97+
*/
98+
leafletZoom = 14;
99+
100+
/**
101+
* The layers of the map
87102
*/
88-
pointers$: Observable<OpenStreetMapPointer[]>;
103+
leafletLayers: Layer[] = [];
104+
105+
/**
106+
* The options for the map
107+
*/
108+
leafletOptions: MapOptions = {
109+
// attribution is still needed
110+
// attributionControl: false,
111+
zoomControl: this.showControlsZoom
112+
};
89113

90114
constructor(
91115
protected translateService: TranslateService,
92-
private locationService: LocationService) {
116+
private locationService: LocationService,
117+
protected elementRef: ElementRef) {
93118
}
94119

95120
ngOnInit(): void {
96121

122+
this.mapStyle = {
123+
width: this.width || '100%',
124+
height: this.height || `${(+this.width || this.elementRef.nativeElement.parentElement.offsetWidth) / 2}px`
125+
};
126+
97127
this.coordinates$ = this.place.asObservable().pipe(
98128
filter((place) => isNotEmpty(place)),
99129
map((place) => place.coordinates),
100-
);
101-
102-
this.pointers$ = this.place.asObservable().pipe(
103-
filter((place) => isNotEmpty(place)),
104-
map((place) => {
105-
const pointer: OpenStreetMapPointer = {
106-
coordinates: place.coordinates,
107-
color: 'green',
108-
};
109-
return [pointer];
110-
}),
130+
tap(coordinates => this.setCenterAndPointer(coordinates))
111131
);
112132

113133
this.displayName$ = this.place.asObservable().pipe(
@@ -169,12 +189,11 @@ export class OpenStreetMapComponent implements OnInit {
169189

170190
}
171191

172-
increaseZoom() {
173-
this.zoom++;
192+
private setCenterAndPointer(coordinates: LocationCoordinates) {
193+
this.leafletCenter = latLng(coordinates.latitude, coordinates.longitude);
194+
this.leafletLayers = [
195+
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18, attribution: 'Leaflet'}),
196+
marker([coordinates.latitude, coordinates.longitude])
197+
];
174198
}
175-
176-
decreaseZoom() {
177-
this.zoom--;
178-
}
179-
180199
}

‎src/app/shared/open-street-map/open-street-map.module.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
33

44
import { SharedModule } from '../shared.module';
55
import { OpenStreetMapComponent } from './open-street-map.component';
6-
import { AngularOpenlayersModule } from 'ngx-openlayers';
6+
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
77

88
const COMPONENTS = [
99
OpenStreetMapComponent
@@ -13,7 +13,7 @@ const COMPONENTS = [
1313
imports: [
1414
CommonModule,
1515
SharedModule,
16-
AngularOpenlayersModule,
16+
LeafletModule,
1717
],
1818
declarations: [...COMPONENTS],
1919
exports: [...COMPONENTS]

0 commit comments

Comments
 (0)