diff --git a/src/app/map/map.component.scss b/src/app/map/map.component.scss
index 1781cb1..421ba8d 100644
--- a/src/app/map/map.component.scss
+++ b/src/app/map/map.component.scss
@@ -17,8 +17,15 @@
width: 256px;
background-color: #3f51b5;
color: white;
+ a{
+ color:white;
+ }
}
.info{
padding: 16px;
+ color:white;
+ a, a:hover, a:visited{
+ color:white;
+ }
}
\ No newline at end of file
diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts
index 7a1da78..e80f9ce 100644
--- a/src/app/map/map.component.ts
+++ b/src/app/map/map.component.ts
@@ -1,18 +1,20 @@
import { OhmService } from './../ohm.service';
import { DateComponent } from './../date/date.component';
import { DecimaldatePipe } from './../decimaldate.pipe';
-import { Component, OnInit, Input, isDevMode } from '@angular/core';
+import { Component, OnInit, Input, isDevMode, ViewChild } from '@angular/core';
import { MnDockerService } from '@modalnodes/mn-docker';
import { HttpClient } from '@angular/common/http';
-import env from '../../assets/env.json';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
-import { NicedatePipe } from '../nicedate.pipe';
-import { timeInterval } from 'rxjs/operators';
import { MatDialog } from '@angular/material/dialog';
import { Observable } from 'rxjs';
+import { MatomoTracker } from 'ngx-matomo';
+import { MatSidenav } from '@angular/material/sidenav';
+import { Clipboard } from '@angular/cdk/clipboard';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { NgxCaptureService } from 'ngx-capture';
declare const mapboxgl;
declare const vis;
@@ -56,14 +58,24 @@ export class MapComponent implements OnInit {
infoData: any;
+ @ViewChild('ibar') ibar: MatSidenav;
+ @ViewChild('sharebar') sharebar: MatSidenav;
+ @ViewChild('screen') screen: any;
+ share_link: string;
+
+ selectedFeatures = [];
constructor(
private ds: MnDockerService,
private ar: ActivatedRoute,
private l: Location,
private md: MatDialog,
private ohm: OhmService,
- private http: HttpClient
+ private http: HttpClient,
+ private matomoTracker: MatomoTracker,
+ private _snackBar: MatSnackBar,
+ private clipboard: Clipboard,
+ private capture: NgxCaptureService
) { }
ngOnInit(): void {
@@ -92,6 +104,7 @@ export class MapComponent implements OnInit {
style: this.style, // stylesheet location
center: this.start.center, // starting position [lng, lat]
zoom: this.start.zoom, // starting zoom
+ preserveDrawingBuffer: true,
transformRequest: (url, resourceType) => {
let nurl = url;
if (isDevMode()) {
@@ -121,6 +134,29 @@ export class MapComponent implements OnInit {
this.map.on('moveend', () => {
this.changeUrl();
});
+ this.map.on('mouseenter', () => {
+ this.map.getCanvas().style.cursor = 'pointer';
+ });
+
+ // Change it back to a pointer when it leaves.
+ this.map.on('mouseleave', () => {
+ this.map.getCanvas().style.cursor = '';
+ });
+ this.map.on('click', (e) => {
+ console.log(e.lngLat);
+ this.ohm.drilldown(e.lngLat).subscribe(feats=>{
+ //this.ibar.open();
+ if(feats.length > 0) {
+ this.selectedFeatures = feats;
+ console.log(feats[0].properties);
+ new mapboxgl.Popup()
+ .setLngLat(e.lngLat)
+ .addTo(this.map);
+ }
+
+ })
+ });
+
const container = document.getElementById('visualization');
@@ -148,9 +184,23 @@ export class MapComponent implements OnInit {
});
}
+ copy_url(){
+ this.capture.getImage(this.screen.elementRef.nativeElement, true).subscribe(img=>{
+ this.ohm.su(window.location.href, img).subscribe(data =>{
+ this.clipboard.copy(data);
+ this.share_link = data;
+ this.sharebar.open();
+ this._snackBar.open('Address ready to share','Close', {
+ duration: 1000
+ });
+ });
+ })
+ }
+
changeUrl(ev = null): void{
const c = this.map.getCenter();
this.l.go(`/${this.atDate}/${this.map.getZoom()}/${c.lat}/${c.lng}` + (this.rels ? '/' + this.rels : ''));
+ this.matomoTracker.trackPageView(`/${this.atDate}/${this.map.getZoom()}/${c.lat}/${c.lng}` + (this.rels ? '/' + this.rels : ''));
if (ev) {
this.map.getSource('ohm').setSourceProperty(() => { });
this.map.getSource('ohm-boundaries')?.setSourceProperty(() => { });
@@ -162,7 +212,9 @@ export class MapComponent implements OnInit {
changeStyle(style): void {
this.style = style;
- this.map.setStyle(style);
+ try{
+ this.map.setStyle(style);
+ } catch(ex) { }
}
toDateFloat(date: Date): number{
@@ -189,7 +241,7 @@ export class MapComponent implements OnInit {
this.atDate = parseFloat(this.atDate.toString()) + delta;
this.timeline.setCustomTime(this.toFloatDate(this.atDate), 'atTime');
this.changeUrl(this.atDate);
- }, this.speed);
+ }, 4000);
} else {
clearInterval(this.startstopInterval);
}
diff --git a/src/app/ohm.service.ts b/src/app/ohm.service.ts
index f99a177..390a8b5 100644
--- a/src/app/ohm.service.ts
+++ b/src/app/ohm.service.ts
@@ -1,6 +1,6 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
@Injectable({
providedIn: 'root'
@@ -11,7 +11,28 @@ export class OhmService {
private http: HttpClient
) { }
- getEvents(date, amount = 20): Observable {
- return this.http.get('http://51.15.160.236:9034/events/' + date + '?limit=' + amount);
+ getEvents(date, bbox=null, amount = 20, from=null, to=null): Observable {
+ if(bbox){
+ return this.http.get('https://api.events.openhistorymap.org/events/timeline.json?bbox='+bbox.join(',')+'&date=' + date + '&limit=' + amount+'&from='+from+'&to='+to);
+ } else {
+ return of([]);
+ }
+ }
+
+ getStats(date, bbox=null, amount = 20, from=null, to=null): Observable {
+ if(bbox){
+ return this.http.get('https://api.stats.openhistorymap.org/stats.json?bbox='+bbox.join(',')+'&date=' + date + '&limit=' + amount+'&from='+from+'&to='+to);
+ } else {
+ return of([]);
+ }
+ }
+
+ drilldown(lnglat, radius=100, time='now'): Observable{
+ console.log('getting the elements around the selected point')
+ return of([]);
+ }
+
+ su(url: string, image:string = null): Observable{
+ return this.http.post('https://su.openhistorymap.org/?url='+url, image);
}
}
diff --git a/src/app/share.directive.spec.ts b/src/app/share.directive.spec.ts
new file mode 100644
index 0000000..1c1e580
--- /dev/null
+++ b/src/app/share.directive.spec.ts
@@ -0,0 +1,8 @@
+import { ShareDirective } from './share.directive';
+
+describe('ShareDirective', () => {
+ it('should create an instance', () => {
+ const directive = new ShareDirective();
+ expect(directive).toBeTruthy();
+ });
+});
diff --git a/src/app/share.directive.ts b/src/app/share.directive.ts
new file mode 100644
index 0000000..9c71c55
--- /dev/null
+++ b/src/app/share.directive.ts
@@ -0,0 +1,18 @@
+import { Directive, Input } from '@angular/core';
+
+@Directive({
+ selector: '[share]',
+ host: {
+ "(click)": "onClick($event)"
+ }
+})
+export class ShareDirective {
+
+ @Input('share') url = ''
+ constructor() { }
+
+ onClick(e){
+ window.open(this.url, 'share', "width=400,height=300,toolbar=no,status=no,menubar=no");
+ }
+
+}
diff --git a/src/assets/info.json b/src/assets/info.json
index c3e5f08..e8bc6d1 100644
--- a/src/assets/info.json
+++ b/src/assets/info.json
@@ -1,3 +1,3 @@
{
- "info": "OpenHistoryMap si propone di accorciare questo divario seppur in maniera minima, dando la possibilità a chiunque di consultare ed avere esperienza dei dati archeologici pubblicati."
+ "info": "OpenHistoryMap is an italian non profit association (APS) founded by a team of archaeologists and software developers based in Bologna, Italy. The aim is the creation of a web-GIS platform containing spatial historical and archaeological data.
OHM is an open source project using open source tools. The code is available on github
Technology and academia are the main sources of data, as you can see in our OHM Data Index, but end users can contribute as well, by sharing their datasets and by exploring the map and the data."
}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 6e2a1c2..d290981 100644
--- a/src/index.html
+++ b/src/index.html
@@ -15,7 +15,22 @@
-
+
+
+
+