diff --git a/.angular-cli.json b/.angular-cli.json index f7b4f9c..6c77403 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -20,7 +20,8 @@ "../node_modules/moment/min/moment.min.js" ], "styles": [ - "scss/style.scss" + "scss/style.scss", + "../node_modules/snazzy-info-window/dist/snazzy-info-window.css" ], "environmentSource": "environments/environment.ts", "environments": { diff --git a/package-lock.json b/package-lock.json index b05c84c..23e529c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,11 @@ "resolved": "https://registry.npmjs.org/@agm/js-marker-clusterer/-/js-marker-clusterer-1.0.0-beta.2.tgz", "integrity": "sha512-sQzNo+2NwjgVAiy/AU3deYvemoH3CHtYvh+aH/3jq9yIK+2ZiuwhZ2oKmoBsVPEMzLjOqF07FhDLowrAAZfVRw==" }, + "@agm/snazzy-info-window": { + "version": "1.0.0-beta.2", + "resolved": "https://registry.npmjs.org/@agm/snazzy-info-window/-/snazzy-info-window-1.0.0-beta.2.tgz", + "integrity": "sha512-YboKYJ2IzxY27XzGun4rHDw7I8BcHqfEgmzMR7bqSo1UH+JlgSNbuWfEQ2UvKqPlmW0bNm0o6xK8SfbE531QZA==" + }, "@angular-devkit/build-optimizer": { "version": "0.0.13", "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.0.13.tgz", @@ -7744,6 +7749,11 @@ "debug": "2.6.8" } }, + "snazzy-info-window": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/snazzy-info-window/-/snazzy-info-window-1.1.0.tgz", + "integrity": "sha1-ux4ws3r4/aj/kAZHQIWtVIbwbw8=" + }, "sntp": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz", @@ -7989,14 +7999,6 @@ "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", "dev": true }, - "string_decoder": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", - "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", - "requires": { - "safe-buffer": "5.1.1" - } - }, "string-width": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", @@ -8007,6 +8009,14 @@ "strip-ansi": "3.0.1" } }, + "string_decoder": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", + "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", + "requires": { + "safe-buffer": "5.1.1" + } + }, "stringstream": { "version": "0.0.5", "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz", diff --git a/package.json b/package.json index 2a5c6eb..87c4fc1 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "dependencies": { "@agm/core": "^1.0.0-beta.1", "@agm/js-marker-clusterer": "^1.0.0-beta.2", + "@agm/snazzy-info-window": "^1.0.0-beta.2", "@angular/common": "4.0.3", "@angular/compiler": "4.0.3", "@angular/core": "4.0.3", @@ -40,6 +41,7 @@ "ngx-bootstrap": "1.6.6", "ngx-pagination": "^3.0.1", "rxjs": "5.4.2", + "snazzy-info-window": "^1.1.0", "ts-helpers": "1.1.2", "webpack": "3.5.4", "webpack-dev-server": "2.7.1", diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index 62efd93..b7ff4c3 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/src/app/dashboard/dashboard.module.ts @@ -6,6 +6,7 @@ import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; import { NgxPaginationModule } from 'ngx-pagination'; import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core'; import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer'; +import { AgmSnazzyInfoWindowModule } from '@agm/snazzy-info-window'; import { CurrencyPipe } from '@angular/common'; @@ -45,6 +46,7 @@ import { environment } from '../../environments/environment'; apiKey: environment.mapApiKey }), AgmJsMarkerClustererModule, + AgmSnazzyInfoWindowModule, BsDropdownModule, NgxPaginationModule, DashboardRoutingModule, diff --git a/src/app/dashboard/trail-map.component.html b/src/app/dashboard/trail-map.component.html index bcff523..590a6ef 100644 --- a/src/app/dashboard/trail-map.component.html +++ b/src/app/dashboard/trail-map.component.html @@ -25,13 +25,17 @@ - - - {{m.name}} - + [longitude]="m.longitude"> + + +

{{m.name}}

+ avatar-image +
+
diff --git a/src/app/dashboard/trail-map.component.ts b/src/app/dashboard/trail-map.component.ts index 2b6df1f..eaa409a 100644 --- a/src/app/dashboard/trail-map.component.ts +++ b/src/app/dashboard/trail-map.component.ts @@ -5,7 +5,7 @@ import { AgmCoreModule } from '@agm/core'; import 'rxjs/add/operator/map'; @Component({ - templateUrl: 'map.component.html', + templateUrl: 'trail-map.component.html', }) export class TrailMapComponent implements OnInit { diff --git a/src/assets/img/map-pin-lis.png b/src/assets/img/map-pin-lis.png new file mode 100644 index 0000000..cd48a4a Binary files /dev/null and b/src/assets/img/map-pin-lis.png differ