From 6d8d55c8ccae00cb071c12f11549eaade856f1ec Mon Sep 17 00:00:00 2001 From: Alexander Zhukov Date: Sat, 6 May 2017 20:02:26 +0300 Subject: [PATCH] feat(maps): add the gmaps and the leaflet component pages --- .angular-cli.json | 10 +++++-- package.json | 4 +++ .../form-inputs/form-inputs.component.html | 7 ----- .../form-layouts/form-layouts.component.html | 6 ---- src/app/pages/maps/gmaps/gmaps.component.html | 12 ++++++++ src/app/pages/maps/gmaps/gmaps.component.scss | 15 ++++++++++ src/app/pages/maps/gmaps/gmaps.component.ts | 13 ++++++++ .../pages/maps/leaflet/leaflet.component.html | 11 +++++++ .../pages/maps/leaflet/leaflet.component.scss | 13 ++++++++ .../pages/maps/leaflet/leaflet.component.ts | 19 ++++++++++++ src/app/pages/maps/maps-routing.module.ts | 30 +++++++++++++++++++ src/app/pages/maps/maps.component.ts | 4 +-- src/app/pages/maps/maps.module.ts | 21 +++++++++++++ src/app/pages/pages-menu.ts | 14 ++++++--- src/app/pages/pages-routing.module.ts | 3 +- src/app/pages/pages.module.ts | 2 -- .../ui-features/grid/grid.component.html | 1 - yarn.lock | 22 ++++++++++++++ 18 files changed, 180 insertions(+), 27 deletions(-) create mode 100644 src/app/pages/maps/gmaps/gmaps.component.html create mode 100644 src/app/pages/maps/gmaps/gmaps.component.scss create mode 100644 src/app/pages/maps/gmaps/gmaps.component.ts create mode 100644 src/app/pages/maps/leaflet/leaflet.component.html create mode 100644 src/app/pages/maps/leaflet/leaflet.component.scss create mode 100644 src/app/pages/maps/leaflet/leaflet.component.ts create mode 100644 src/app/pages/maps/maps-routing.module.ts create mode 100644 src/app/pages/maps/maps.module.ts diff --git a/.angular-cli.json b/.angular-cli.json index a706d6fd..e088ff27 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -9,7 +9,12 @@ "outDir": "dist", "assets": [ "assets", - "favicon.ico" + "favicon.ico", + { + "glob": "**/*", + "input": "../node_modules/leaflet/dist/images", + "output": "./assets/img/markers" + } ], "index": "index.html", "main": "main.ts", @@ -19,7 +24,8 @@ "testTsconfig": "tsconfig.spec.json", "styles": [ "../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss", - "../node_modules/normalize.css/normalize.css" + "../node_modules/normalize.css/normalize.css", + "../node_modules/leaflet/dist/leaflet.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", diff --git a/package.json b/package.json index df95dabb..57cf4bc2 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ }, "private": true, "dependencies": { + "@agm/core": "1.0.0-beta.0", "@angular/animations": "4.1.0", "@angular/common": "4.1.0", "@angular/compiler": "4.1.0", @@ -33,6 +34,7 @@ "@angular/platform-browser-dynamic": "4.1.0", "@angular/platform-server": "4.1.0", "@angular/router": "4.1.0", + "@asymmetrik/angular2-leaflet": "2.1.4", "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.25", "bootstrap": "4.0.0-alpha.6", "ckeditor": "4.6.2", @@ -42,6 +44,7 @@ "immutable": "3.8.1", "intl": "1.2.5", "ionicons": "2.0.1", + "leaflet": "1.0.3", "ng2-ckeditor": "1.1.6", "normalize.css": "6.0.0", "roboto-fontface": "0.7.0", @@ -55,6 +58,7 @@ "@angular/cli": "1.0.1", "@angular/compiler-cli": "4.1.0", "@types/jasmine": "2.5.38", + "@types/leaflet": "1.0.60", "@types/node": "6.0.69", "angular-cli-ghpages": "0.5.0", "codelyzer": "2.0.1", diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.html b/src/app/pages/forms/form-inputs/form-inputs.component.html index f947fa5e..a4744030 100644 --- a/src/app/pages/forms/form-inputs/form-inputs.component.html +++ b/src/app/pages/forms/form-inputs/form-inputs.component.html @@ -82,7 +82,6 @@ -
@@ -110,7 +109,6 @@ - @@ -136,7 +134,6 @@ Example help text that remains unchanged.
- @@ -216,7 +213,6 @@ -
@@ -253,7 +249,6 @@
- @@ -279,7 +274,6 @@ Rate: {{ rate2 }} - @@ -308,7 +302,6 @@ - diff --git a/src/app/pages/forms/form-layouts/form-layouts.component.html b/src/app/pages/forms/form-layouts/form-layouts.component.html index 652772da..0e71dab6 100644 --- a/src/app/pages/forms/form-layouts/form-layouts.component.html +++ b/src/app/pages/forms/form-layouts/form-layouts.component.html @@ -24,7 +24,6 @@ - @@ -86,7 +85,6 @@ - @@ -106,7 +104,6 @@ -
@@ -133,7 +130,6 @@ - @@ -170,7 +166,6 @@
- @@ -211,7 +206,6 @@ - diff --git a/src/app/pages/maps/gmaps/gmaps.component.html b/src/app/pages/maps/gmaps/gmaps.component.html new file mode 100644 index 00000000..cfe5f4ec --- /dev/null +++ b/src/app/pages/maps/gmaps/gmaps.component.html @@ -0,0 +1,12 @@ +
+
+ + Gmaps + + + + + + +
+
diff --git a/src/app/pages/maps/gmaps/gmaps.component.scss b/src/app/pages/maps/gmaps/gmaps.component.scss new file mode 100644 index 00000000..d1ca6b0b --- /dev/null +++ b/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); + } + } + } + } +} diff --git a/src/app/pages/maps/gmaps/gmaps.component.ts b/src/app/pages/maps/gmaps/gmaps.component.ts new file mode 100644 index 00000000..e1020761 --- /dev/null +++ b/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; + +} diff --git a/src/app/pages/maps/leaflet/leaflet.component.html b/src/app/pages/maps/leaflet/leaflet.component.html new file mode 100644 index 00000000..0d97ce64 --- /dev/null +++ b/src/app/pages/maps/leaflet/leaflet.component.html @@ -0,0 +1,11 @@ +
+
+ + Leaflet + +
+
+ + +
+
diff --git a/src/app/pages/maps/leaflet/leaflet.component.scss b/src/app/pages/maps/leaflet/leaflet.component.scss new file mode 100644 index 00000000..2c2afaf4 --- /dev/null +++ b/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); + } + } + } +} diff --git a/src/app/pages/maps/leaflet/leaflet.component.ts b/src/app/pages/maps/leaflet/leaflet.component.ts new file mode 100644 index 00000000..42b79f6a --- /dev/null +++ b/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 }), + }; + +} diff --git a/src/app/pages/maps/maps-routing.module.ts b/src/app/pages/maps/maps-routing.module.ts new file mode 100644 index 00000000..fe98c5db --- /dev/null +++ b/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, +]; diff --git a/src/app/pages/maps/maps.component.ts b/src/app/pages/maps/maps.component.ts index e6c56dd9..52f5ea71 100644 --- a/src/app/pages/maps/maps.component.ts +++ b/src/app/pages/maps/maps.component.ts @@ -3,9 +3,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'ngx-maps', template: ` -

- maps works! -

+ `, }) export class MapsComponent { diff --git a/src/app/pages/maps/maps.module.ts b/src/app/pages/maps/maps.module.ts new file mode 100644 index 00000000..344cd96a --- /dev/null +++ b/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 { } diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts index 0a514020..98e134ff 100644 --- a/src/app/pages/pages-menu.ts +++ b/src/app/pages/pages-menu.ts @@ -14,7 +14,7 @@ export const menuItems: List = List([{ title: 'UI Features', icon: 'ion ion-ios-keypad-outline', link: '/pages/ui-features', - children: List([{ + children: List([{ title: 'Buttons', link: '/pages/ui-features/buttons', }, { @@ -34,7 +34,13 @@ export const menuItems: List = List([{ }, { title: 'Maps', icon: 'ion ion-ios-location-outline', - link: '/pages/maps', + children: List([{ + 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 = List([{ }, { title: 'Editors', icon: 'ion ion-edit', - children: List([{ + children: List([{ title: 'TinyMCE', link: '/pages/editors/tinymce', }, { @@ -52,7 +58,7 @@ export const menuItems: List = List([{ }, { title: 'Forms', icon: 'ion-compose', - children: List([{ + children: List([{ title: 'Form Inputs', link: '/pages/forms/inputs', }, { diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index e3a34b9a..54b2d934 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/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, diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index 7486d228..71863ff8 100644 --- a/src/app/pages/pages.module.ts +++ b/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, ]; diff --git a/src/app/pages/ui-features/grid/grid.component.html b/src/app/pages/ui-features/grid/grid.component.html index 5aa7c855..5b6147d2 100644 --- a/src/app/pages/ui-features/grid/grid.component.html +++ b/src/app/pages/ui-features/grid/grid.component.html @@ -246,7 +246,6 @@ - diff --git a/yarn.lock b/yarn.lock index 9dd13012..7cd0959b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,10 @@ # yarn lockfile v1 +"@agm/core@1.0.0-beta.0": + version "1.0.0-beta.0" + resolved "https://registry.yarnpkg.com/@agm/core/-/core-1.0.0-beta.0.tgz#5ca53f0efa321e1e24c7ba3a6be72f96bccf82a4" + "@angular/animations@4.1.0": version "4.1.0" resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-4.1.0.tgz#97b642aee01b5406e03ec65e499342ba91e2dd38" @@ -123,6 +127,10 @@ dependencies: tsickle "^0.21.0" +"@asymmetrik/angular2-leaflet@2.1.4": + version "2.1.4" + resolved "https://registry.yarnpkg.com/@asymmetrik/angular2-leaflet/-/angular2-leaflet-2.1.4.tgz#3d55155f77008753bce40f0af53aa2a7ec23916b" + "@ng-bootstrap/ng-bootstrap@1.0.0-alpha.25": version "1.0.0-alpha.25" resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.0.0-alpha.25.tgz#68cc2afa17fb5bdd2d775b7f82cffa86ef21b0ed" @@ -140,10 +148,20 @@ magic-string "^0.19.0" source-map "^0.5.6" +"@types/geojson@*": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-1.0.2.tgz#b02d10ab028e2928ac592a051aaa4981a1941d03" + "@types/jasmine@2.5.38": version "2.5.38" resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.38.tgz#a4379124c4921d4e21de54ec74669c9e9b356717" +"@types/leaflet@1.0.60": + version "1.0.60" + resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.0.60.tgz#48b9ca197a78fa5e1bb3aeac614f286c08951834" + dependencies: + "@types/geojson" "*" + "@types/node@6.0.69", "@types/node@^6.0.46": version "6.0.69" resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.69.tgz#82d955985fcad2b95a72fcf5f8ea630d772535a7" @@ -3106,6 +3124,10 @@ ldjson-stream@^1.2.1: split2 "^0.2.1" through2 "^0.6.1" +leaflet@1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.0.3.tgz#1f401b98b45c8192134c6c8d69686253805007c8" + less-loader@^4.0.2: version "4.0.3" resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-4.0.3.tgz#d1e6462ca2f090c11248455e14b8dda4616d0521"