From bfa04629b1e560cced68ee254f2bea002eed9eea Mon Sep 17 00:00:00 2001 From: KQuiskamp Date: Thu, 8 Jun 2023 20:49:31 +0200 Subject: [PATCH 1/2] fix stopover marker bug --- angular.json | 23 +- package.json | 7 +- packages/direction/README.md | 24 ++ packages/direction/ng-package.json | 7 + packages/direction/package-lock.json | 104 +++++ packages/direction/package.json | 36 ++ .../src/lib/agm-direction.directive.ts | 388 ++++++++++++++++++ .../direction/src/lib/agm-direction.module.ts | 24 ++ packages/direction/src/public-api.ts | 5 + packages/direction/src/test.ts | 27 ++ packages/direction/tsconfig.lib.json | 16 + packages/direction/tsconfig.lib.prod.json | 10 + packages/direction/tsconfig.spec.json | 14 + tsconfig.json | 4 + yarn.lock | 5 + 15 files changed, 690 insertions(+), 4 deletions(-) create mode 100644 packages/direction/README.md create mode 100644 packages/direction/ng-package.json create mode 100644 packages/direction/package-lock.json create mode 100644 packages/direction/package.json create mode 100644 packages/direction/src/lib/agm-direction.directive.ts create mode 100644 packages/direction/src/lib/agm-direction.module.ts create mode 100644 packages/direction/src/public-api.ts create mode 100644 packages/direction/src/test.ts create mode 100644 packages/direction/tsconfig.lib.json create mode 100644 packages/direction/tsconfig.lib.prod.json create mode 100644 packages/direction/tsconfig.spec.json diff --git a/angular.json b/angular.json index 28d918c9..5a8acf6d 100644 --- a/angular.json +++ b/angular.json @@ -85,5 +85,26 @@ } } } - }}, + }, + "direction": { + "projectType": "library", + "root": "packages/direction", + "sourceRoot": "packages/direction/src", + "prefix": "agm", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:ng-packagr", + "options": { + "tsConfig": "packages/direction/tsconfig.lib.json", + "project": "packages/direction/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "packages/direction/tsconfig.lib.prod.json" + } + } + } + } + } + } } diff --git a/package.json b/package.json index 89f87fdb..951ed9a7 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,9 @@ "scripts": { "clean": "rimraf dist node_modules/@agm", "prebuild": "yarn clean", - "build": "ng build core && ng build markerclusterer && ng build snazzy-info-window && ng build drawing", - "build:prod": "ng build core --configuration production && ng build markerclusterer --configuration production && ng build snazzy-info-window --configuration production && ng build drawing --configuration production", + "build": "ng build core && ng build markerclusterer && ng build snazzy-info-window && ng build drawing && ng build direction", + "build-direction": "ng build direction", + "build:prod": "ng build core --configuration production && ng build markerclusterer --configuration production && ng build snazzy-info-window --configuration production && ng build drawing --configuration production && ng build direction --configuration production", "lint": "ng lint", "test": "jest", "test:watch": "jest --watchAll", @@ -73,4 +74,4 @@ "typescript": "~4.6.4", "yarn": "^1.22.4" } -} \ No newline at end of file +} diff --git a/packages/direction/README.md b/packages/direction/README.md new file mode 100644 index 00000000..01741f15 --- /dev/null +++ b/packages/direction/README.md @@ -0,0 +1,24 @@ +# AgmDirection + +This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.0. + +## Code scaffolding + +Run `ng generate component component-name --project agm-direction` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project agm-direction`. +> Note: Don't forget to add `--project agm-direction` or else it will be added to the default project in your `angular.json` file. + +## Build + +Run `ng build agm-direction` to build the project. The build artifacts will be stored in the `dist/` directory. + +## Publishing + +After building your library with `ng build agm-direction`, go to the dist folder `cd dist/agm-direction` and run `npm publish`. + +## Running unit tests + +Run `ng test agm-direction` to execute the unit tests via [Karma](https://karma-runner.github.io). + +## Further help + +To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. diff --git a/packages/direction/ng-package.json b/packages/direction/ng-package.json new file mode 100644 index 00000000..15847214 --- /dev/null +++ b/packages/direction/ng-package.json @@ -0,0 +1,7 @@ +{ + "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../dist/agm-direction", + "lib": { + "entryFile": "src/public-api.ts" + } +} \ No newline at end of file diff --git a/packages/direction/package-lock.json b/packages/direction/package-lock.json new file mode 100644 index 00000000..0a1717e2 --- /dev/null +++ b/packages/direction/package-lock.json @@ -0,0 +1,104 @@ +{ + "name": "agm-direction", + "version": "0.8.11", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "agm-direction", + "version": "0.8.11", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "devDependencies": { + "@types/googlemaps": "^3.39.12" + }, + "peerDependencies": { + "@agm/core": "^1.1.0", + "@angular/common": "^15.0.0", + "@angular/core": "^15.0.0" + } + }, + "node_modules/@agm/core": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@agm/core/-/core-1.1.0.tgz", + "integrity": "sha512-cMvmm3+3/uuVFurLv1FKhE0/6ssIlDvYBjQFCi8ELg7h0OY2MkIU1MXWr7z+f/xZ08E936I4eeddni6k4yUTIA==", + "peer": true, + "dependencies": { + "tslib": "^1.9.0" + }, + "peerDependencies": { + "@angular/common": "^6.0.0 || ^7.0.0 || ^8.0.0", + "@angular/core": "^6.0.0 || ^7.0.0 || ^8.0.0" + } + }, + "node_modules/@agm/core/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "peer": true + }, + "node_modules/@angular/common": { + "version": "15.2.9", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-15.2.9.tgz", + "integrity": "sha512-LM9/UHG2dRrOzlu2KovrFwWIziFMjRxHzSP3Igw6Symw/wIl0kXGq8Fn6RpFP78zmLqnv+IQOoRiby9MCXsI4g==", + "peer": true, + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^14.20.0 || ^16.13.0 || >=18.10.0" + }, + "peerDependencies": { + "@angular/core": "15.2.9", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, + "node_modules/@angular/core": { + "version": "15.2.9", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-15.2.9.tgz", + "integrity": "sha512-w46Z1yUXCQfKV7XfnamOoLA2VD0MVUUYVrUjO73mHSskDXSXxfZAEHO9kfUS71Cj35PvhP3mbkqWscpea2WeYg==", + "peer": true, + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^14.20.0 || ^16.13.0 || >=18.10.0" + }, + "peerDependencies": { + "rxjs": "^6.5.3 || ^7.4.0", + "zone.js": "~0.11.4 || ~0.12.0 || ~0.13.0" + } + }, + "node_modules/@types/googlemaps": { + "version": "3.39.12", + "resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.39.12.tgz", + "integrity": "sha512-z1RMvlQfmsLbg5kc0dGjSHK7DL64mOCbbtqp/Le2M3ov7xPB1d+stia38hqmOXw5dPO1dL/5fscn73d0uomkbw==", + "deprecated": "Types for the Google Maps browser API have moved to @types/google.maps. Note: these types are not for the googlemaps npm package, which is a Node API.", + "dev": true + }, + "node_modules/rxjs": { + "version": "7.8.1", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz", + "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==", + "peer": true, + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/tslib": { + "version": "2.5.3", + "license": "0BSD" + }, + "node_modules/zone.js": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.13.0.tgz", + "integrity": "sha512-7m3hNNyswsdoDobCkYNAy5WiUulkMd3+fWaGT9ij6iq3Zr/IwJo4RMCYPSDjT+r7tnPErmY9sZpKhWQ8S5k6XQ==", + "peer": true, + "dependencies": { + "tslib": "^2.3.0" + } + } + } +} diff --git a/packages/direction/package.json b/packages/direction/package.json new file mode 100644 index 00000000..b03adaaa --- /dev/null +++ b/packages/direction/package.json @@ -0,0 +1,36 @@ +{ + "name": "@agm/direction", + "version": "0.8.11", + "description": "Angular Google Maps direction", + "license": "MIT", + "author": { + "name": "Robby", + "email": "ta7382@gmail.com" + }, + "repository": { + "type": "git", + "url": "https://github.com/explooosion/agm-direction.git" + }, + "bugs": { + "url": "https://github.com/explooosion/agm-direction/issues" + }, + "homepage": "https://github.com/explooosion/agm-direction", + "keywords": [ + "angular-google-maps", + "angular", + "google-maps-direction", + "agm-direction", + "direction", + "angular-14.2" + ], + "peerDependencies": { + "@angular/common": "^15.0.0", + "@angular/core": "^15.0.0" + }, + "dependencies": { + + }, + "devDependencies": { + "@types/googlemaps": "^3.39.8" + } +} diff --git a/packages/direction/src/lib/agm-direction.directive.ts b/packages/direction/src/lib/agm-direction.directive.ts new file mode 100644 index 00000000..193d3d8c --- /dev/null +++ b/packages/direction/src/lib/agm-direction.directive.ts @@ -0,0 +1,388 @@ +import { GoogleMapsAPIWrapper } from '@agm/core'; +import { Directive, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output } from '@angular/core'; + +@Directive({ + selector: 'agm-direction', +}) +export class AgmDirection implements OnChanges, OnInit, OnDestroy { + + @Input() origin?: string | google.maps.Place | google.maps.LatLng | google.maps.LatLngLiteral; + + @Input() destination?: string | google.maps.Place | google.maps.LatLng | google.maps.LatLngLiteral; + + @Input() travelMode?: google.maps.TravelMode; + + @Input() transitOptions?: google.maps.TransitOptions; + + @Input() drivingOptions?: google.maps.DrivingOptions; + + @Input() waypoints: google.maps.DirectionsWaypoint[] = []; + + @Input() optimizeWaypoints = true; + + @Input() provideRouteAlternatives = false; + + @Input() avoidHighways = false; + + @Input() avoidTolls = false; + + @Input() avoidFerries = false; + + @Input() unitSystem?: google.maps.UnitSystem; + + @Input() renderOptions?: google.maps.DirectionsRendererOptions; + + @Input() panel?: Element; + + @Input() markerOptions?: { + origin: { infoWindow?: string | Node } & google.maps.MarkerOptions, + destination: { infoWindow?: string | Node } & google.maps.MarkerOptions, + waypoints?: { infoWindow?: string | Node } & google.maps.MarkerOptions | ({ infoWindow?: string | Node } & google.maps.MarkerOptions)[], + }; + + @Input() infoWindow?: google.maps.InfoWindow; + + // Remove or draw direction + @Input() visible = true; + + // Render exist direction + @Input() renderRoute?: google.maps.DirectionsResult | null; + + // Direction change event handler + @Output() onChange: EventEmitter = new EventEmitter(); + + // Direction response for the new request + @Output() onResponse: EventEmitter = new EventEmitter(); + + // Send a custom infowindow + @Output() sendInfoWindow: EventEmitter = new EventEmitter(); + + // Status of Directions Query (google.maps.DirectionsStatus.OVER_QUERY_LIMIT) + @Output() status: EventEmitter = new EventEmitter(); + + // Marker drag event handler + @Output() originDrag: EventEmitter = new EventEmitter(); + @Output() destinationDrag: EventEmitter = new EventEmitter(); + + public directionsService!: google.maps.DirectionsService; + public directionsRenderer!: google.maps.DirectionsRenderer; + + // Use for custom marker + private originMarker?: any; + private destinationMarker?: any; + private waypointsMarker: Array = []; + + // Use for visible flag + private isFirstChange = true; + + constructor( + private gmapsApi: GoogleMapsAPIWrapper, + ) { } + + ngOnInit() { + if (this.visible) { + this.directionDraw(); + } + } + + ngOnChanges(obj: any) { + /** + * When visible is false then remove the direction layer + */ + if (!this.visible) { + try { + this.removeMarkers(); + this.removeDirections(); + } catch (e) { } + } else { + if (this.isFirstChange) { + /** + * When visible is false at the first time + */ + if (typeof this.directionsRenderer === 'undefined') { + this.directionDraw(); + } + this.isFirstChange = false; + return; + } + + /** + * When renderOptions are not first change then reset the display + */ + if (typeof obj.renderOptions !== 'undefined') { + if (obj.renderOptions.firstChange === false) { + this.removeMarkers(); + this.removeDirections(); + } + } + this.directionDraw(); + } + } + + ngOnDestroy() { + this.destroyMarkers(); + this.removeDirections(); + } + + /** + * This event is fired when the user creating or updating this direction + */ + private directionDraw() { + this.gmapsApi.getNativeMap().then(_map => { + + // const map = _map as unknown | google.maps.Map; + const map = _map; + + if (typeof this.directionsRenderer === 'undefined') { + this.directionsRenderer = new google.maps.DirectionsRenderer(this.renderOptions); + // @ts-ignore + this.directionsRenderer.setMap(map); + this.directionsRenderer.addListener('directions_changed', () => { + this.onChange.emit(this.directionsRenderer.getDirections()); + }); + } + + if (typeof this.directionsService === 'undefined') { + this.directionsService = new google.maps.DirectionsService(); + } + + if (typeof this.panel === 'undefined') { + // @ts-ignore + this.directionsRenderer.setPanel(null); + } else { + this.directionsRenderer.setPanel(this.panel as any); + } + + // Render exist direction + if (this.renderRoute) { + this.directionsRenderer.setDirections(this.renderRoute); + this.renderRoute = undefined; + } else { + + // Request new direction + this.directionsService.route({ + origin: this.origin, + destination: this.destination, + travelMode: this.travelMode || google.maps.TravelMode.DRIVING, + transitOptions: this.transitOptions, + drivingOptions: this.drivingOptions, + waypoints: this.waypoints, + optimizeWaypoints: this.optimizeWaypoints, + provideRouteAlternatives: this.provideRouteAlternatives, + avoidHighways: this.avoidHighways, + avoidTolls: this.avoidTolls, + avoidFerries: this.avoidFerries, + unitSystem: this.unitSystem, + }, (response: any, status) => { + + this.onResponse.emit(response); + + // Emit Query Status + this.status.emit(status); + + /** + * DirectionsStatus + * https://developers.google.com/maps/documentation/javascript/directions#DirectionsStatus + */ + switch (status) { + case google.maps.DirectionsStatus.OK: + + this.directionsRenderer.setDirections(response); + + /** + * Emit The DirectionsResult Object + * https://developers.google.com/maps/documentation/javascript/directions?hl=en#DirectionsResults + */ + // Custom Markers + if (typeof this.markerOptions !== 'undefined') { + + this.destroyMarkers(); + + // Set custom markers + const _route = response.routes[0]; + + try { + if (_route.legs.length === 0) { + console.warn('The webpage has sent too many requests within the allowed time period.'); + return; + } + + // Origin Marker + if (typeof this.markerOptions.origin !== 'undefined') { + this.markerOptions.origin.map = map; + this.markerOptions.origin.position = _route.legs[0].start_location; + this.originMarker = this.setMarker( + map, + this.originMarker, + this.markerOptions.origin, + _route.legs[0].start_address, + ); + + if (this.markerOptions.origin.draggable) { + this.originMarker.addListener('dragend', () => { + this.origin = this.originMarker.position; + this.directionDraw(); + this.originDrag.emit(this.origin); + }); + } + } + + for (let i = 0; i < _route.legs.length; i++) { + const leg = _route.legs[i]; + + if (i === (_route.legs.length - 1)) { + // Destination Marker + if (typeof this.markerOptions.destination !== 'undefined') { + this.markerOptions.destination.map = map; + this.markerOptions.destination.position = leg.end_location; + this.destinationMarker = this.setMarker( + map, + this.destinationMarker, + this.markerOptions.destination, + leg.end_address, + ); + if (this.markerOptions.destination.draggable) { + this.destinationMarker.addListener('dragend', () => { + this.destination = this.destinationMarker.position; + this.directionDraw(); + this.destinationDrag.emit(this.destination); + }); + } + } + }else { + // Waypoints Marker equals leg[i].end_location (skip last leg, last leg = destination marker) + if (typeof this.markerOptions !== 'undefined' && typeof this.markerOptions.waypoints !== 'undefined') { + // If waypoints are not array then set all the same + if (!Array.isArray(this.markerOptions.waypoints)) { + this.markerOptions.waypoints.map = map; + this.markerOptions.waypoints.position = leg.end_location; + this.waypointsMarker[i] = this.setMarker( + map, + this.waypoints[i], + this.markerOptions.waypoints, + leg.start_address, + ); + } else { + this.markerOptions.waypoints[i].map = map; + this.markerOptions.waypoints[i].position = leg.end_location; + this.waypointsMarker[i] = this.setMarker( + map, + this.waypoints[i], + this.markerOptions.waypoints[i], + leg.start_address, + ); + } + } + } + } + } catch (err) { + console.error('MarkerOptions error.', err); + } + } + + break; + + case google.maps.DirectionsStatus.OVER_QUERY_LIMIT: + console.warn('The webpage has sent too many requests within the allowed time period.'); + break; + default: + // console.warn(status); + break; + } // End switch + }); + } + }); + } + + /** + * Custom Origin and Destination Icon + * @param map map + * @param marker marker + * @param markerOpts properties + * @param content marker's infowindow content + * @returns new marker + */ + private setMarker( + map: google.maps.Map, + marker: google.maps.Marker | google.maps.DirectionsWaypoint, + markerOpts: any, + content: google.maps.LatLng | string + ): google.maps.Marker { + + if (typeof this.infoWindow === 'undefined') { + this.infoWindow = new google.maps.InfoWindow(); + this.sendInfoWindow.emit(this.infoWindow); + } + + marker = new google.maps.Marker(markerOpts); + // https://developers.google.com/maps/documentation/javascript/reference/marker?hl=zh-tw#MarkerOptions.clickable + if (marker.getClickable()) { + marker.addListener('click', () => { + const infoWindowContent: string = typeof markerOpts.infoWindow === 'undefined' ? content : markerOpts.infoWindow; + this.infoWindow!.setContent(infoWindowContent); + this.infoWindow!.open(map, marker as google.maps.MVCObject); + }); + } + return marker; + } + + /** + * This event is fired when remove markers + */ + private removeMarkers(): void { + if (typeof this.originMarker !== 'undefined') { + this.originMarker.setMap(null); + } + if (typeof this.destinationMarker !== 'undefined') { + this.destinationMarker.setMap(null); + } + this.waypointsMarker.forEach((w: any) => { + if (typeof w !== 'undefined') { + w.setMap(null); + } + }); + } + + /** + * This event is fired when remove directions + */ + private removeDirections(): void { + if (this.directionsRenderer !== undefined) { + // @ts-ignore + this.directionsRenderer.setPanel(null); + this.directionsRenderer.setMap(null); + // @ts-ignore + this.directionsRenderer = undefined; + } + } + + /** + * This event is fired when destroy markers + */ + private destroyMarkers(): void { + // Remove origin markers + try { + if (typeof this.markerOptions !== 'undefined' && typeof this.originMarker !== 'undefined') { + google.maps.event.clearListeners(this.originMarker, 'click'); + if (this.markerOptions.origin.draggable) { + google.maps.event.clearListeners(this.originMarker, 'dragend'); + } + } + if (typeof this.markerOptions !== 'undefined' && typeof this.destinationMarker !== 'undefined') { + google.maps.event.clearListeners(this.destinationMarker, 'click'); + if (this.markerOptions.origin.draggable) { + google.maps.event.clearListeners(this.destinationMarker, 'dragend'); + } + } + this.waypointsMarker.forEach((w: any) => { + if (typeof w !== 'undefined') { + google.maps.event.clearListeners(w, 'click'); + } + }); + this.removeMarkers(); + + } catch (err) { + console.error('Can not reset custom marker.', err); + } + } +} diff --git a/packages/direction/src/lib/agm-direction.module.ts b/packages/direction/src/lib/agm-direction.module.ts new file mode 100644 index 00000000..b9287ffd --- /dev/null +++ b/packages/direction/src/lib/agm-direction.module.ts @@ -0,0 +1,24 @@ +import { NgModule, ModuleWithProviders } from '@angular/core'; +import { AgmDirection } from './agm-direction.directive'; + +@NgModule({ + declarations: [ + AgmDirection, + ], + exports: [ + AgmDirection, + ] +}) +export class AgmDirectionModule { + public static forRoot(): ModuleWithProviders { + return { + ngModule: AgmDirectionModule, + }; + } + + public static forChild(): ModuleWithProviders { + return { + ngModule: AgmDirectionModule, + }; + } +} diff --git a/packages/direction/src/public-api.ts b/packages/direction/src/public-api.ts new file mode 100644 index 00000000..72e9bf56 --- /dev/null +++ b/packages/direction/src/public-api.ts @@ -0,0 +1,5 @@ +/* + * Public API Surface of agm-direction + */ +export { AgmDirection } from './lib/agm-direction.directive'; +export { AgmDirectionModule } from './lib/agm-direction.module'; diff --git a/packages/direction/src/test.ts b/packages/direction/src/test.ts new file mode 100644 index 00000000..5775317a --- /dev/null +++ b/packages/direction/src/test.ts @@ -0,0 +1,27 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import 'zone.js'; +import 'zone.js/testing'; +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +declare const require: { + context(path: string, deep?: boolean, filter?: RegExp): { + (id: string): T; + keys(): string[]; + }; +}; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting(), +); + +// Then we find all the tests. +const context = require.context('./', true, /\.spec\.ts$/); +// And load the modules. +context.keys().forEach(context); diff --git a/packages/direction/tsconfig.lib.json b/packages/direction/tsconfig.lib.json new file mode 100644 index 00000000..67b9e791 --- /dev/null +++ b/packages/direction/tsconfig.lib.json @@ -0,0 +1,16 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/lib", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "typeRoots": [ + "node_modules/@types/" + ] + }, + "exclude": [ + "**/*.spec.ts" + ] +} diff --git a/packages/direction/tsconfig.lib.prod.json b/packages/direction/tsconfig.lib.prod.json new file mode 100644 index 00000000..06de549e --- /dev/null +++ b/packages/direction/tsconfig.lib.prod.json @@ -0,0 +1,10 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } +} diff --git a/packages/direction/tsconfig.spec.json b/packages/direction/tsconfig.spec.json new file mode 100644 index 00000000..ce7048bc --- /dev/null +++ b/packages/direction/tsconfig.spec.json @@ -0,0 +1,14 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/spec", + "types": [ + "jasmine" + ] + }, + "include": [ + "**/*.spec.ts", + "**/*.d.ts" + ] +} diff --git a/tsconfig.json b/tsconfig.json index 9737e249..3091a04d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -33,6 +33,10 @@ "@agm/drawing": [ "dist/drawing/drawing", "dist/drawing" + ], + "@agm/direction": [ + "dist/direction/agm-directive", + "dist/direction" ] }, "types": [ diff --git a/yarn.lock b/yarn.lock index 9abfa4ca..d16e48b0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2139,6 +2139,11 @@ "@types/qs" "*" "@types/serve-static" "*" +"@types/googlemaps@^3.39.12": + version "3.43.3" + resolved "https://registry.yarnpkg.com/@types/googlemaps/-/googlemaps-3.43.3.tgz#70cf962154a160fe78bcd69d6ccc296dd9175b1f" + integrity sha512-ZWNoz/O8MPEpiajvj7QiqCY8tTLFNqNZ/a+s+zTV58wFVNAvvqV4bdGfnsjTb5Cs4V6wEsLrX8XRhmnyYJ2Tdg== + "@types/googlemaps@^3.39.8": version "3.39.9" resolved "https://registry.yarnpkg.com/@types/googlemaps/-/googlemaps-3.39.9.tgz#641f5285527d2e2a36b042ac2b0d75b7563cec64" From 1749530ec28c4fe3cfcff800d5573d8e7c53d96d Mon Sep 17 00:00:00 2001 From: KQuiskamp Date: Thu, 8 Jun 2023 20:55:25 +0200 Subject: [PATCH 2/2] readme + angular v 15.0.0 --- packages/direction/README.md | 129 ++++++++++++++++++++++++++++++++++- 1 file changed, 128 insertions(+), 1 deletion(-) diff --git a/packages/direction/README.md b/packages/direction/README.md index 01741f15..8a2fbf69 100644 --- a/packages/direction/README.md +++ b/packages/direction/README.md @@ -1,5 +1,127 @@ -# AgmDirection +# Agm-Direction +[![npm version](https://badge.fury.io/js/agm-direction.svg)](https://badge.fury.io/js/agm-direction) +[![npm](https://img.shields.io/npm/dm/localeval.svg)](https://github.com/explooosion/Agm-Direction) +[![Build Status](https://travis-ci.org/explooosion/Agm-Direction.svg?branch=master)](https://travis-ci.org/explooosion/Agm-Direction) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com) + + +[Agm-Direction](https://github.com/explooosion/Agm-Direction) is the directive for [@agm/core](https://github.com/SebastianM/angular-google-maps) (not official) + +- Angular +- Google Map API + +How to use? +👉 [Start Reading](https://robby570.tw/Agm-Direction-Docs/) +👉 [Build With Ionic](https://github.com/explooosion/ionic-agm-direction-example) + + +![Agm-Direction](https://i.imgur.com/DCIoXqS.jpg) + +## Credit + +#### [SebastianM/angular-google-maps](https://github.com/SebastianM/angular-google-maps) - [Directions service #495](https://github.com/SebastianM/angular-google-maps/issues/495) + +## Installation + +Installation is done using the +[`npm install` command](https://docs.npmjs.com/getting-started/installing-npm-packages-locally): + +- Use npm + ```bash + npm install --save @agm/core agm-direction + ``` + +- Use yarn + ```bash + yarn add @agm/core agm-direction + ``` + +## Importing Modules + +```typescript +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; +import { AppComponent } from './app.component'; + +import { AgmCoreModule } from '@agm/core'; // @agm/core +import { AgmDirectionModule } from 'agm-direction'; // agm-direction + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + AgmCoreModule.forRoot({ // @agm/core + apiKey: 'your key', + }), + AgmDirectionModule, // agm-direction + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { } +``` + +## Usage + +HTML + +```html + + + + +``` + +CSS + +```css +agm-map { + height: 400px; +} +``` + +TS + +```typescript +public lat = 24.799448; +public lng = 120.979021; + +public origin: any; +public destination: any; + +ngOnInit() { + this.getDirection(); +} + +getDirection() { + this.origin = { lat: 24.799448, lng: 120.979021 }; + this.destination = { lat: 24.799524, lng: 120.975017 }; + + // Location within a string + // this.origin = 'Taipei Main Station'; + // this.destination = 'Taiwan Presidential Office'; +} +``` + +## Document +- Document [Agm-Direction-Docs](https://robby570.tw/Agm-Direction-Docs/) +- Less useful [AgmDirectionModule](https://robby570.tw/Agm-Direction/) + +## Development + +👉 [Playground Project](https://github.com/explooosion/Agm-Direction/tree/master/playground) + +```bash +git clone https://github.com/explooosion/Agm-Direction.git +``` + +## Generator This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.0. ## Code scaffolding @@ -22,3 +144,8 @@ Run `ng test agm-direction` to execute the unit tests via [Karma](https://karma- ## Further help To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. + + +## License + +[MIT](http://opensource.org/licenses/MIT)