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

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 }),
+  };
+
+}