ztimson/map-alliance
ztimson/map-alliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Activity

Added drawing

Browse Source
This commit is contained in:
ztimson 2019-07-09 14:10:34 -04:00
parent f14d6b1268
commit 6c8a387e99
2 changed files with 36 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/map/map.component.html
View File

@ -4,11 +4,12 @@
</button> </button>
<small class="ml-1 text-muted">{{version}}</small> <small class="ml-1 text-muted">{{version}}</small>
<div class="ml-auto"> <div class="ml-auto">
<button mat-icon-button (click)="mode = 'marker'"><mat-icon>room</mat-icon></button> <!-- Add Marker --> <button mat-icon-button (click)="mode = 'marker'" [ngClass]="{'selected': mode == 'marker'}"><mat-icon>room</mat-icon></button>
<button mat-icon-button><mat-icon>create</mat-icon></button> <!-- Create shape --> <button mat-icon-button (click)="draw()" [ngClass]="{'selected': !!drawListener}"><mat-icon>create</mat-icon></button>
<button mat-icon-button><mat-icon>straighten</mat-icon></button> <!-- Measure distance --> <button mat-icon-button><mat-icon>straighten</mat-icon></button>
<button mat-icon-button [matMenuTriggerFor]="mapStyle"><mat-icon>layers</mat-icon></button> <button mat-icon-button (click)="remove = !remove" [ngClass]="{'selected': remove}"><mat-icon>delete</mat-icon></button>
<mat-menu #mapStyle="matMenu"> <button mat-icon-button [matMenuTriggerFor]="styleMenu"><mat-icon>layers</mat-icon></button>
<mat-menu #styleMenu="matMenu">
<button mat-menu-item (click)="style = 'satellite'" [ngClass]="{'selected': style == 'satellite'}">Satellite</button> <button mat-menu-item (click)="style = 'satellite'" [ngClass]="{'selected': style == 'satellite'}">Satellite</button>
<button mat-menu-item (click)="style = 'terrain'" [ngClass]="{'selected': style == 'terrain'}">Terrain</button> <button mat-menu-item (click)="style = 'terrain'" [ngClass]="{'selected': style == 'terrain'}">Terrain</button>
<button mat-menu-item (click)="style = 'roadmap'" [ngClass]="{'selected': style == 'roadmap'}">Road</button> <button mat-menu-item (click)="style = 'roadmap'" [ngClass]="{'selected': style == 'roadmap'}">Road</button>
@ -18,7 +19,7 @@
<button mat-icon-button><mat-icon>perm_identity</mat-icon></button> <button mat-icon-button><mat-icon>perm_identity</mat-icon></button>
</div> </div>
</mat-toolbar> </mat-toolbar>
<agm-map class="map" [mapTypeId]="style" [zoomControl]="false" [streetViewControl]="false" (mapReady)="mapReady($event)" gestureHandling="greedy" (mapClick)="clicked('single', $event)"> <agm-map class="map" [mapTypeId]="style" [zoomControl]="false" [streetViewControl]="false" [disableDoubleClickZoom]="true" (mapReady)="mapReady($event)" gestureHandling="greedy" (mapClick)="clicked('single', $event)">
<ng-container *ngIf="position"> <ng-container *ngIf="position">
<agm-marker *ngIf="!position.heading" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/images/dot.png', anchor: {x: 11, y: 10}}"></agm-marker> <agm-marker *ngIf="!position.heading" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/images/dot.png', anchor: {x: 11, y: 10}}"></agm-marker>
<agm-marker *ngIf="position.heading" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/images/arrow.png', anchor: {x: 11, y: 13}, rotation: position.heading}"></agm-marker> <agm-marker *ngIf="position.heading" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/images/arrow.png', anchor: {x: 11, y: 13}, rotation: position.heading}"></agm-marker>

30
src/app/map/map.component.ts
View File

@ -3,16 +3,20 @@ import {GeolocationService} from "../geolocation/geolocation.service";
import {filter} from "rxjs/operators"; import {filter} from "rxjs/operators";
import {version} from "../../../package.json"; import {version} from "../../../package.json";
declare const google;
@Component({ @Component({
selector: 'map', selector: 'map',
templateUrl: 'map.component.html', templateUrl: 'map.component.html',
styleUrls: ['map.component.scss'] styleUrls: ['map.component.scss']
}) })
export class MapComponent { export class MapComponent {
drawListener;
mapApi: any; mapApi: any;
markers = []; markers = [];
mode: 'marker'; mode: 'marker' | 'circle' | 'square' | 'draw';
position: any; position: any;
remove = false;
style: 'satellite' | 'terrain' | 'roadmap' | 'hybrid' = 'terrain'; style: 'satellite' | 'terrain' | 'roadmap' | 'hybrid' = 'terrain';
version = version; version = version;
@ -41,4 +45,28 @@ export class MapComponent {
this.mode = null; this.mode = null;
} }
} }
draw() {
if(!this.drawListener) {
this.drawListener = google.maps.event.addDomListener(this.mapApi.getDiv(), 'mousedown', () => {
let poly = new google.maps.Polyline({map: this.mapApi, clickable: true});
google.maps.event.addListener(poly, 'click', () => {
if(this.remove) poly.setMap(null);
});
let moveListener = google.maps.event.addListener(this.mapApi, 'mousemove', e => poly.getPath().push(e.latLng));
google.maps.event.addListener(this.mapApi, 'mouseup', () => google.maps.event.removeListener(moveListener));
google.maps.event.addListener(poly, 'mouseup', () => google.maps.event.removeListener(moveListener));
});
this.mapApi.setOptions({
draggable: false
});
} else {
google.maps.event.removeListener(this.drawListener);
this.drawListener = null;
this.mapApi.setOptions({
draggable: true
});
}
}
} }