ohm-map/src/app/map/map.component.html at 49889e939772007bb718ac4ea3af7e9f12a58931 · openfantasymap/ohm-map · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<mat-toolbar color="primary">
    <button mat-button mat-icon-button (click)="lbar.toggle()"><mat-icon>menu</mat-icon></button>
    <h1>OpenHistoryMap</h1>
    <span class="spacer"></span>
    <span class="spacer"></span>
    <span class="spacer"></span>
    <span class="spacer"></span>
    <ohm-style-selector (styleChange)="changeStyle($event)"></ohm-style-selector>
    <button mat-button mat-icon-button class="hidesmall" (click)="info()"><mat-icon>help</mat-icon></button>
    <span class="spacer"></span>
    <button mat-button class="hidesmall">{{atDate|decimaldate|date:'d/M/y G - hh:mm:ss'|nicedate}}</button>
    <button mat-button class="hidesmall" disabled mat-icon-button (click)="startstop()"><mat-icon>{{startstopicon}}</mat-icon></button>
    <button mat-button class="hidesmall" disabled mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>speed</mat-icon></button>

    <span class="spacer hidesmall"></span>
    <span class="spacer hidesmall"></span>
    <span class="spacer hidesmall"></span>
    <span class="spacer hidesmall"></span>
    <button mat-button mat-icon-button (click)="copy_url()" class="hidesmall"><mat-icon>share</mat-icon></button>
    <button disabled mat-button mat-icon-button (click)="rbar.toggle()" class="hidesmall"><mat-icon>menu</mat-icon></button>
    <button disabled mat-button mat-icon-button (click)="pbar.toggle()" class="hidesmall"><mat-icon>person</mat-icon></button>
    <button disabled mat-button mat-icon-button (click)="ibar.toggle()" class="hidesmall"><mat-icon>location_on</mat-icon></button>

</mat-toolbar>

<mat-sidenav-container class="example-container">
    <mat-sidenav class="sidebar" mode="over" #lbar>
        <div *ngIf="infoData" class="info" [innerHtml]="infoData?.info">

        </div>
        <mat-nav-list>
            <a target="_blank" href="https://www.openhistorymap.org/" mat-list-item>OHM Home</a>
            <a target="_blank" href="https://blog.openhistorymap.org/" mat-list-item>OHM Blog</a>
            <a target="_blank" href="https://index.openhistorymap.org/" mat-list-item>OHM Index</a>
            <a target="_blank" href="https://www.openhistorymap.org/about/" mat-list-item>About OHM</a>
            <a target="_blank" href="https://www.openhistorymap.org/help/" mat-list-item>How to help/donate to OHM</a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav class="sidebar" mode="over" #ibar position="end">
        <mat-toolbar>
            <h1>What is here</h1>
        </mat-toolbar>

        <mat-list *ngFor="let event of selectedFeatures">
            <a mat-list-item (click)="goTimeSpace(event.ohm_from, event.geom)">{{event.properties.name}}</a>
        </mat-list>
    </mat-sidenav>
    <mat-sidenav class="sidebar" mode="over" #rbar position="end">
        <mat-toolbar color="primary">
            <h1>Events</h1>
        </mat-toolbar>

        <mat-list *ngFor="let event of (events|async)">
            <a mat-list-item (click)="goTimeSpace(event.ohm_from, event.geom)">{{event.properties.name}}</a>
        </mat-list>
    </mat-sidenav>
    <mat-sidenav class="sidebar" mode="over" #pbar position="end">
        <mat-toolbar color="primary">
            <h1>Ephemeral</h1>
        </mat-toolbar>

        <mat-list *ngFor="let event of (events|async)">
            <a mat-list-item (click)="goTimeSpace(event.ohm_from, event.geom)">{{event.properties.name}}</a>
        </mat-list>
    </mat-sidenav>
    <mat-sidenav class="sidebar" mode="over" #sharebar position="end">
        <mat-toolbar color="primary">
            <h1>Sharing</h1>
            <span class="spacer"></span>
            <button mat-button mat-icon-button (click)="sharebar.close()" class="hidesmall"><mat-icon>close</mat-icon></button>
        </mat-toolbar>

        <mat-list>
            <a share="https://www.facebook.com/sharer/sharer.php?u={{share_link}}" mat-list-item><mat-icon>facebook</mat-icon> Share on Facebook</a>
            <a share="" mat-list-item><mat-icon>twitter</mat-icon> Share on Twitter</a>
            <a share="" mat-list-item><mat-icon></mat-icon> Share on Linkedin</a>
            <a share="" mat-list-item><mat-icon>class</mat-icon> Share on Classroom</a>
        </mat-list>

    </mat-sidenav>
    <mat-sidenav-content #screen>

        <mat-menu #menu="matMenu">
            <button mat-menu-item (click)="setSpeed(5)">Slow</button>
            <button mat-menu-item (click)="setSpeed(50)">Medium</button>
            <button mat-menu-item (click)="setSpeed(500)">High</button>
        </mat-menu>
        <div class="row">
            <div id="ohm_map"></div>
        </div>
        <div id="visualization"></div>
    </mat-sidenav-content>
</mat-sidenav-container>
<div></div>