feat(maps): add the gmaps and the leaflet component pages

src/app/pages/maps/gmaps/gmaps.component.html

@@ -0,0 +1,12 @@
+<div class="row">
+  <div class="col-md-12">
+    <nga-card size="xmedium">
+      <nga-card-header>Gmaps</nga-card-header>
+      <nga-card-body>
+        <agm-map [latitude]="lat" [longitude]="lng">
+          <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
+        </agm-map>
+      </nga-card-body>
+    </nga-card>
+  </div>
+</div>

src/app/pages/maps/gmaps/gmaps.component.scss

@@ -0,0 +1,15 @@
+@import '~@nga/theme/overrides/bootstrap/styles/themes/nga.theme.default';
+
+:host {
+  display: block;
+
+  nga-card {
+    nga-card-body {
+      /deep/ agm-map {
+        .agm-map-container-inner {
+          height: calc(#{$nga-card-height-xmedium} - 50px);
+        }
+      }
+    }
+  }
+}

src/app/pages/maps/gmaps/gmaps.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-gmaps',
+  styleUrls: ['./gmaps.component.scss'],
+  templateUrl: './gmaps.component.html',
+})
+export class GmapsComponent {
+
+  lat: number = 51.678418;
+  lng: number = 7.809007;
+
+}

src/app/pages/maps/leaflet/leaflet.component.html

@@ -0,0 +1,11 @@
+<div class="row">
+  <div class="col-md-12">
+    <nga-card size="xmedium">
+      <nga-card-header>Leaflet</nga-card-header>
+      <nga-card-body>
+        <div leaflet [leafletOptions]="options">
+        </div>
+      </nga-card-body>
+    </nga-card>
+  </div>
+</div>

src/app/pages/maps/leaflet/leaflet.component.scss

@@ -0,0 +1,13 @@
+@import '~@nga/theme/overrides/bootstrap/styles/themes/nga.theme.default';
+
+:host {
+  display: block;
+
+  nga-card {
+    nga-card-body {
+      .leaflet-container {
+        height: calc(#{$nga-card-height-xmedium} - 50px);
+      }
+    }
+  }
+}

src/app/pages/maps/leaflet/leaflet.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import * as L from 'leaflet';
+
+@Component({
+  selector: 'ngx-leaflet',
+  styleUrls: ['./leaflet.component.scss'],
+  templateUrl: './leaflet.component.html',
+})
+export class LeafletComponent {
+
+  options = {
+    layers: [
+      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
+    ],
+    zoom: 5,
+    center: L.latLng({ lat: 38.991709, lng: -76.886109 }),
+  };
+
+}

src/app/pages/maps/maps-routing.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { MapsComponent } from './maps.component';
+import { GmapsComponent } from './gmaps/gmaps.component';
+import { LeafletComponent } from './leaflet/leaflet.component';
+
+const routes: Routes = [{
+  path: '',
+  component: MapsComponent,
+  children: [{
+    path: 'gmaps',
+    component: GmapsComponent,
+  }, {
+    path: 'leaflet',
+    component: LeafletComponent,
+  }],
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MapsRoutingModule { }
+
+export const routedComponents = [
+  MapsComponent,
+  GmapsComponent,
+  LeafletComponent,
+];

src/app/pages/maps/maps.component.ts

@@ -3,9 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'ngx-maps',
   template: `
-    <p>
-      maps works!
-    </p>
+    <router-outlet></router-outlet>
   `,
 })
 export class MapsComponent {

src/app/pages/maps/maps.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { AgmCoreModule } from '@agm/core';
+import { LeafletModule } from '@asymmetrik/angular2-leaflet';
+
+import { SharedModule } from '../../shared.module';
+
+import { MapsRoutingModule, routedComponents } from './maps-routing.module';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    AgmCoreModule.forRoot(),
+    LeafletModule.forRoot(),
+    MapsRoutingModule,
+  ],
+  exports: [],
+  declarations: [
+    ...routedComponents,
+  ],
+})
+export class MapsModule { }