add map component

angular.json

@@ -28,6 +28,7 @@
             ],
             "styles": [
               "src/styles.scss",
+              "node_modules/leaflet/dist/leaflet.css",
               "src/assets/style/main.scss",
               "src/assets/style/material-theme.scss"
             ],

package.json

@@ -31,6 +31,8 @@
     "core-js": "^3.6.5",
     "jdnconvertiblecalendar": "^0.0.7",
     "jdnconvertiblecalendardateadapter": "^1.0.1",
+    "leaflet": "^1.9.4",
+    "leaflet-arrowheads": "^1.4.0",
     "ngx-color-picker": "^13.0.0",
     "openseadragon": "^2.4.2",
     "rxjs": "~6.5.5",
@@ -51,6 +53,7 @@
     "@angular/language-service": "^15.2.10",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/leaflet": "^1.9.8",
     "@types/node": "^12.11.1",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",

src/app/app.module.ts

@@ -69,6 +69,7 @@ import { ArkUrlDialogComponent } from './dialog/ark-url-dialog.component';
 import { ReisbuechleinUriPipe } from './pipes/reisbuechlein-uri.pipe';
 import { OnlyTranscriptionComponent } from './resource/page-transcription/only-transcription/only-transcription.component';
 import { LocationComponent } from './resource/location/location.component';
+import { MapComponent } from './map/map.component';
 
 @NgModule({
     declarations: [
@@ -112,7 +113,8 @@ import { LocationComponent } from './resource/location/location.component';
         ArkUrlDialogComponent,
         ReisbuechleinUriPipe,
         OnlyTranscriptionComponent,
-        LocationComponent
+        LocationComponent,
+        MapComponent
     ],
     imports: [
         AppRouting,

src/app/app.routing.ts

@@ -26,7 +26,7 @@ import { CommentComponent } from './resource/comment/comment.component';
 import { BiographyComponent } from './biography/biography.component';
 import { LeceLeooComponent } from './lece-leoo/lece-leoo.component';
 import { PageTranscriptionComponent } from './resource/page-transcription/page-transcription.component';
-import {LocationComponent} from './resource/location/location.component';
+import { LocationComponent } from './resource/location/location.component';
 
 
 const appRoutes: Routes = [

src/app/map/map.component.html

@@ -0,0 +1,4 @@
+<div class="map-frame">
+    <div id="map"></div>
+</div>
+

src/app/map/map.component.scss

@@ -0,0 +1,10 @@
+.map-frame {
+  border: 2px solid black;
+  height: 100%;
+  margin: 2rem 0;
+}
+
+#map {
+  height: 700px;
+}
+

src/app/map/map.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MapComponent } from './map.component';
+
+describe('MapComponent', () => {
+  let component: MapComponent;
+  let fixture: ComponentFixture<MapComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MapComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MapComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/map/map.component.ts

@@ -0,0 +1,93 @@
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { DataGraphDB } from '../services/beol.service';
+import * as L from 'leaflet';
+import 'leaflet-arrowheads';
+import { environment } from '../../environments/environment';
+
+@Component({
+  selector: 'app-map',
+  templateUrl: './map.component.html',
+  styleUrls: ['./map.component.scss']
+})
+export class MapComponent implements OnChanges {
+    @Input() mapData: DataGraphDB;
+    map: any;
+    constructor() {
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        this.initMap();
+    }
+
+    private initMap() {
+        const origin = this.get_origin()
+        const destination = this.get_destination()
+        const centroid = this.calculate_center(origin, destination)
+        this.loadMap(centroid);
+        this.addMarkers(origin, destination);
+        this.addLines();
+    }
+
+    private get_origin(): L.LatLng {
+        const latitude = this.mapData.results.bindings[0].startLat.value
+        const longitude = this.mapData.results.bindings[0].startLong.value
+        return new L.LatLng(latitude, longitude)
+    }
+
+    private get_destination(): L.LatLng {
+        const length = this.mapData.results.bindings.length
+        const lastObject = this.mapData.results.bindings[length-1]
+        const latitude = lastObject.endLat.value
+        const longitude = lastObject.endLong.value
+        return new L.LatLng(latitude, longitude)
+    }
+    private calculate_center(origin: L.LatLng, destination: L.LatLng): L.LatLng {
+        const middle_point_lat = (origin.lat + destination.lat)/2
+        const middle_point_lng = (origin.lng + destination.lng)/2
+        return new L.LatLng(middle_point_lat, middle_point_lng)
+    }
+
+    private loadMap(centroid: L.LatLngExpression): void {
+        this.map = L.map('map', {center: centroid, zoom: 8.4});
+        const tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
+            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+            maxZoom: 18,
+            id: 'mapbox/streets-v11',
+            tileSize: 512,
+            zoomOffset: -1,
+            accessToken: environment.mapbox.accessToken,
+        })
+        tiles.addTo(this.map);
+    }
+
+    private addMarkers(origin_coord: L.LatLng, destination_coord: L.LatLng): void {
+        const origin = L.marker(origin_coord, {
+            icon: new L.Icon({
+                iconSize: new L.Point(40, 40),
+                iconAnchor: [13, 41],
+                iconUrl: 'assets/images/red_marker.svg',
+            }), title: 'Workspace'
+        } as L.MarkerOptions);
+        origin.addTo(this.map);
+
+        const destination = L.marker(destination_coord, {
+            icon: new L.Icon({
+                iconSize: new L.Point(40, 40),
+                iconAnchor: [13, 41],
+                iconUrl: 'assets/images/blue_marker.svg',
+            }), title: 'Workspace'
+        } as L.MarkerOptions);
+        destination.addTo(this.map);
+    }
+
+    private addLines(): void {
+        this.mapData.results.bindings.forEach((obj, index) => {
+            const start =  new L.LatLng(obj.startLat.value, obj.startLong.value)
+            const end = new  L.LatLng(obj.endLat.value, obj.endLong.value)
+            const line = L.polyline([start, end], {
+                color: '#800080'
+            } as L.PolylineOptions).arrowheads({size: '15%'});
+            line.addTo(this.map)
+        })
+    }
+}

src/app/resource/location/location.component.scss

@@ -25,6 +25,10 @@
     margin-inline-end: 14rem;
     max-width: 1000px;
     align-content: center;
+
+    h1 {
+      text-align: left;
+    }
   }
 }
 

src/app/resource/manuscript-entry/manuscript-entry.component.html

@@ -118,6 +118,10 @@ <h4>Stages</h4>
             </section>
         </ng-container>
 
+        <ng-container *ngIf="mapCoordinates$ | async as coordinates">
+            <app-map *ngIf="coordinates.results.bindings.length > 0" [mapData]="coordinates"></app-map>
+        </ng-container>
+
     </ng-container>
 
 </main>

src/app/resource/manuscript-entry/manuscript-entry.component.ts

@@ -22,7 +22,6 @@ import { MatDialog } from '@angular/material/dialog';
 import { map } from 'rxjs/operators';
 
 class ManuscriptEntryProps implements PropertyValues {
-
     title: ReadTextValue[] = [];
     seqnum: ReadIntValue[] = [];
     page: ReadLinkValue[] = [];
@@ -55,9 +54,10 @@ export class ManuscriptEntryComponent extends BeolResource {
     };
     props: ManuscriptEntryProps;
     transcriptions: ReadResource[] = [];
+    pages$: Observable<any>;
     journey$: Observable<any>;
     stages$: Observable<any>;
-    pages$: Observable<any>;
+    mapCoordinates$: Observable<any>;
 
     constructor(
         @Inject(DspApiConnectionToken) protected _dspApiConnection: KnoraApiConnection,
@@ -88,6 +88,7 @@ export class ManuscriptEntryComponent extends BeolResource {
             this.getPages();
             this.getJourney();
             this.getStages();
+            this.getMapCoordinates();
         }
     }
 
@@ -118,6 +119,12 @@ export class ManuscriptEntryComponent extends BeolResource {
         this.pages$ = this._dspApiConnection.v2.search.doExtendedSearch(gravsearch);
     }
 
+    /**
+     * Function that adds the uri information to the data.
+     *
+     * @param data
+     * @private
+     */
     private addURI(data: DataGraphDB) {
         const headerWithIRI = data.head.vars.filter((item: string) => item.endsWith("Iri"));
         data.head.vars = data.head.vars.filter((item: string) => !item.endsWith("Iri"));
@@ -151,6 +158,10 @@ export class ManuscriptEntryComponent extends BeolResource {
             );
     }
 
+    private getMapCoordinates() {
+        this.mapCoordinates$ = this._beolService.make_coordinates_query(this.iri);
+    }
+
     goToLocation(resIri) {
         this.goToResource(this._appInitService.config['ontologyIRI'] + '/ontology/0801/beol/v2#Location', resIri, undefined);
     }