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

src/app/pages/forms/form-inputs/form-inputs.component.html

@@ -82,7 +82,6 @@
           </div>
         </div>
       </nga-card-body>
-      <nga-card-footer></nga-card-footer>
     </nga-card>
   </div>
   <div class="col-md-6">
@@ -110,7 +109,6 @@
           </fieldset>
         </form>
       </nga-card-body>
-      <nga-card-footer></nga-card-footer>
     </nga-card>
     <nga-card>
       <nga-card-header>
@@ -136,7 +134,6 @@
           <small class="form-text text-muted">Example help text that remains unchanged.</small>
         </div>
       </nga-card-body>
-      <nga-card-footer></nga-card-footer>
     </nga-card>
   </div>
 </div>
@@ -216,7 +213,6 @@
           <button type="submit" class="btn btn-primary">Submit</button>
         </form>
       </nga-card-body>
-      <nga-card-footer></nga-card-footer>
     </nga-card>
   </div>
   <div class="col-md-6">
@@ -253,7 +249,6 @@
           <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
         </div>
       </nga-card-body>
-      <nga-card-footer></nga-card-footer>
     </nga-card>
     <nga-card>
       <nga-card-header>
@@ -279,7 +274,6 @@
           <span class="help-block">Rate: {{ rate2 }}</span>
         </div>
       </nga-card-body>
-      <nga-card-footer></nga-card-footer>
     </nga-card>
     <nga-card>
       <nga-card-header>
@@ -308,7 +302,6 @@
           </select>
         </div>
       </nga-card-body>
-      <nga-card-footer></nga-card-footer>
     </nga-card>
   </div>
 </div>

src/app/pages/forms/form-layouts/form-layouts.component.html

@@ -24,7 +24,6 @@
           <button type="submit" class="btn btn-primary">Submit</button>
         </form>
       </nga-card-body>
-      <nga-card-footer></nga-card-footer>
     </nga-card>
   </div>
 </div>
@@ -86,7 +85,6 @@
           </div>
         </form>
       </nga-card-body>
-      <nga-card-footer></nga-card-footer>
     </nga-card>
     <nga-card>
       <nga-card-header>
@@ -106,7 +104,6 @@
           <button type="submit" class="btn btn-success">Send</button>
         </form>
       </nga-card-body>
-      <nga-card-footer></nga-card-footer>
     </nga-card>
   </div>
   <div class="col-md-6">
@@ -133,7 +130,6 @@
           <button type="submit" class="btn btn-danger">Submit</button>
         </form>
       </nga-card-body>
-      <nga-card-footer></nga-card-footer>
     </nga-card>
     <nga-card>
       <nga-card-header>
@@ -170,7 +166,6 @@
         </div>
         <button type="submit" class="btn btn-primary">Submit</button>
       </nga-card-body>
-      <nga-card-footer></nga-card-footer>
     </nga-card>
   </div>
 </div>
@@ -211,7 +206,6 @@
           </div>
         </form>
       </nga-card-body>
-      <nga-card-footer></nga-card-footer>
     </nga-card>
   </div>
 </div>

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 { }

src/app/pages/pages-menu.ts

@@ -14,7 +14,7 @@ export const menuItems: List<NgaMenuItem> = List([{
   title: 'UI Features',
   icon: 'ion ion-ios-keypad-outline',
   link: '/pages/ui-features',
-  children: List([{
+  children: List<NgaMenuItem>([{
     title: 'Buttons',
     link: '/pages/ui-features/buttons',
   }, {
@@ -34,7 +34,13 @@ export const menuItems: List<NgaMenuItem> = List([{
 }, {
   title: 'Maps',
   icon: 'ion ion-ios-location-outline',
-  link: '/pages/maps',
+  children: List<NgaMenuItem>([{
+    title: 'Gmaps',
+    link: '/pages/maps/gmaps',
+  }, {
+    title: 'Leaflet',
+    link: '/pages/maps/leaflet',
+  }]),
 }, {
   title: 'Charts',
   icon: 'ion ion-arrow-graph-up-right',
@@ -42,7 +48,7 @@ export const menuItems: List<NgaMenuItem> = List([{
 }, {
   title: 'Editors',
   icon: 'ion ion-edit',
-  children: List([{
+  children: List<NgaMenuItem>([{
     title: 'TinyMCE',
     link: '/pages/editors/tinymce',
   }, {
@@ -52,7 +58,7 @@ export const menuItems: List<NgaMenuItem> = List([{
 }, {
   title: 'Forms',
   icon: 'ion-compose',
-  children: List([{
+  children: List<NgaMenuItem>([{
     title: 'Form Inputs',
     link: '/pages/forms/inputs',
   }, {

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

@@ -4,7 +4,6 @@ import { NgModule } from '@angular/core';
 import { PagesComponent } from './pages.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { ComponentsComponent } from './components/components.component';
-import { MapsComponent } from './maps/maps.component';
 import { ChartsComponent } from './charts/charts.component';
 
 const routes: Routes = [{
@@ -21,7 +20,7 @@ const routes: Routes = [{
     component: ComponentsComponent,
   }, {
     path: 'maps',
-    component: MapsComponent,
+    loadChildren: './maps/maps.module#MapsModule',
   }, {
     path: 'charts',
     component: ChartsComponent,

src/app/pages/pages.module.ts

@@ -8,14 +8,12 @@ import { PagesComponent } from './pages.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { PagesRoutingModule } from './pages-routing.module';
 import { ThemeModule } from '../@theme/theme.module';
-import { MapsComponent } from './maps/maps.component';
 import { ComponentsComponent } from './components/components.component';
 import { ChartsComponent } from './charts/charts.component';
 
 const PAGES_COMPONENTS = [
   PagesComponent,
   DashboardComponent,
-  MapsComponent,
   ComponentsComponent,
   ChartsComponent,
 ];

src/app/pages/ui-features/grid/grid.component.html

@@ -246,7 +246,6 @@
           </table>
         </div>
       </nga-card-body>
-      <nga-card-footer></nga-card-footer>
     </nga-card>
   </div>
 </div>