Added share ability

package.json

@@ -36,6 +36,7 @@
     "leaflet-openweathermap": "^1.0.0",
     "leaflet-polylinedecorator": "^1.6.0",
     "leaflet-rotatedmarker": "^0.2.0",
+    "ng-click-outside": "^5.0.0",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",
     "web-animations-js": "^2.3.2",

src/app/app.module.ts

@@ -18,6 +18,7 @@ import {ToolbarComponent} from "./components/toolbar/toolbar.component";
 import {PaletteComponent} from "./components/palette/palette.component";
 import {MarkerComponent} from "./components/marker/marker.component";
 import {AnimatedBackgroundComponent} from "./components/animatedBackground/animatedBackground.component";
+import {ClickOutsideModule} from "ng-click-outside";
 
 @NgModule({
     declarations: [
@@ -37,6 +38,7 @@ import {AnimatedBackgroundComponent} from "./components/animatedBackground/anima
         AppRouting,
         BrowserAnimationsModule,
         BrowserModule,
+        ClickOutsideModule,
         FormsModule,
         MaterialModule,
         ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),

src/app/app.routing.ts

@@ -4,7 +4,7 @@ import {MapComponent} from "./views/map/map.component";
 import {HomeComponent} from "./views/home/home.component";
 
 const routes: Routes = [
-    {path: ':id', component: MapComponent},
+    {path: ':code', component: MapComponent},
     {path: '**', pathMatch: 'full', component: HomeComponent},
 ];
 

src/app/utils.ts

@@ -1,3 +1,14 @@
+export function copyToClipboard(value: string) {
+    let el = document.createElement('textarea');
+    el.value = value;
+    el.setAttribute('readonly', '');
+    (el.style as any) = {position: 'absolute', left: '-9999px'};
+    document.body.appendChild(el);
+    el.select();
+    document.execCommand('copy');
+    document.body.removeChild(el);
+}
+
 export function deg2rad(deg) {
     return deg * (Math.PI/180);
 }

src/app/views/map/map.component.html

@@ -3,6 +3,14 @@
 <div *ngIf="showPalette" [@flyInRight] [@flyOutRight] class="palette">
     <palette [(selected)]="drawColor" (selectedChange)="map.drawingColor = $event"></palette>
 </div>
+<div *ngIf="shareDialog" class="share" [@flyInRight] [@flyOutRight]>
+    <div class="input-group">
+        <input type="text" class="form-control" [ngModel]="code" style="width: 120px" readonly>
+        <div class="input-group-append">
+            <button class="btn btn-danger" (click)="copyUrl()">Copy</button>
+        </div>
+    </div>
+</div>
 <div class="info p-2">
     <span *ngIf="!position" class="text-danger">No GPS</span>
     <div *ngIf="position" class="text-white">

src/app/views/map/map.component.scss

@@ -5,7 +5,14 @@
 .palette {
   position: fixed;
   z-index: 500;
-  top: 50px;
+  top: 60px;
+  right: 15px;
+}
+
+.share {
+  position: fixed;
+  z-index: 500;
+  top: 60px;
   right: 15px;
 }
 

src/app/views/map/map.component.ts

@@ -9,6 +9,8 @@ import {ARROW, MapLayers, MapService, MEASURE, WeatherLayers} from "../../servic
 import {Subscription} from "rxjs";
 import {MarkerComponent} from "../../components/marker/marker.component";
 import {MatBottomSheetRef} from "@angular/material/bottom-sheet";
+import {copyToClipboard} from "../../utils";
+import {ActivatedRoute} from "@angular/router";
 
 declare const L;
 
@@ -20,12 +22,14 @@ declare const L;
 })
 export class MapComponent implements OnInit {
     calibration: MatBottomSheetRef;
+    code: string;
     drawColor = '#ff4141';
     isNaN = isNaN;
     map: MapService;
     markers = [];
     position;
     positionMarker = {arrow: null, circle: null};
+    shareDialog = false;
     showPalette = false;
     lastMeasuringPoint;
     measuringSubscription: Subscription;
@@ -48,12 +52,17 @@ export class MapComponent implements OnInit {
                 {name: 'Clouds', toggle: true, click: () => this.map.setWeatherLayer(WeatherLayers.CLOUDS_NEW)},
         ]},
         {name: 'Calibrate', icon: 'explore', toggle: true, onEnabled: () => this.startCalibrating(), onDisabled: () => this.stopCalibrating()},
+        {name: 'Share', icon: 'share', toggle: true, onEnabled: () => this.share(), onDisabled: () => this.shareDialog = false},
         {name: 'Messages', icon: 'chat', hidden: true},
         {name: 'Identity', icon: 'perm_identity', hidden: true},
         {name: 'Settings', icon: 'settings', hidden: true}
     ];
 
-    constructor(public physicsService: PhysicsService, private snackBar: MatSnackBar, private bottomSheet: MatBottomSheet) { }
+    constructor(public physicsService: PhysicsService, private snackBar: MatSnackBar, private bottomSheet: MatBottomSheet, private route: ActivatedRoute) {
+        this.route.params.subscribe(params => {
+            this.code = params['code'];
+        })
+    }
 
     ngOnInit() {
         this.map = new MapService('map');
@@ -94,6 +103,22 @@ export class MapComponent implements OnInit {
         this.map.centerOn(pos);
     }
 
+    copyUrl() {
+        copyToClipboard(window.location.href);
+        this.snackBar.open('Copied to your clipboard! 📋', null, {duration: 3000})
+    }
+
+    share() {
+        this.shareDialog = true;
+        if(navigator['share']) {
+            navigator['share']({
+                title: 'Map Alliance',
+                text: 'A map alliance has been requested!',
+                url: window.location.href,
+            })
+        }
+    }
+
     startCalibrating() {
         this.menu[6].enabled = true;
         this.calibration = this.bottomSheet.open(CalibrateComponent, {