snazzy info added, logo added

.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": {

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",

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",

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,

src/app/dashboard/trail-map.component.html

@@ -25,13 +25,17 @@
               <agm-marker-cluster maxZoom="13" imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
                 <agm-marker
                     *ngFor="let m of markers"
+                    [iconUrl]="'/assets/img/map-pin-lis.png'"
                     [latitude]="m.latitude"
-                    [longitude]="m.longitude"
-                    [label]="m.name[0]">
-
-                  <agm-info-window>
-                    <strong>{{m.name}}</strong>
-                  </agm-info-window>
+                    [longitude]="m.longitude">
+                  <agm-snazzy-info-window
+                  [maxWidth]="500"
+                  [closeWhenOthersOpen]="true">
+                    <ng-template>
+                      <h4><strong>{{m.name}}</strong></h4>
+                      <img src="assets/img/avatars/default.png" class="img-avatar" alt="avatar-image">
+                    </ng-template>
+                  </agm-snazzy-info-window>
                 </agm-marker>
               </agm-marker-cluster>
             </agm-map>

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 {