Map

Yarik
1 parent 4cfbf7ca
Showing 8 changed files with 109 additions and 16 deletions Show diff stats
angular-cli.json
src/app/app.module.ts
src/app/app.routes.ts
src/app/data/map/map.component.html
src/app/data/map/map.component.ts
src/app/data/map/map.scss
src/assets/icons/marker-icon.png
src/index.html
@@ -23,7 +23,8 @@
             "../node_modules/@covalent/core/common/platform.css",
             "../node_modules/@swimlane/ngx-charts/release/ngx-charts.css",
             "../node_modules/ag-grid/dist/styles/ag-grid.css",
-            "../node_modules/ag-grid/dist/styles/theme-blue.css"
+            "../node_modules/ag-grid/dist/styles/theme-blue.css",
+            "../node_modules/leaflet/dist/leaflet.css"
         ],
         "scripts": [
             "../node_modules/hammerjs/hammer.min.js",
@@ -11,10 +11,12 @@ import { AppComponent } from &#39;./app.component&#39;;
 import { MainComponent } from './main/main.component';
 import { LoginComponent } from './login/login.component';
 import { DataComponent } from './data/data.component';
-import { TemplatesComponent } from './templates/templates.component';;
+import { TemplatesComponent } from './templates/templates.component';
 import { appRoutes, appRoutingProviders } from './app.routes';
 import { AgGridModule } from 'ag-grid-ng2/main';
 import { ChartComponent } from '../components/chart/chart.component';
+import { CandTLeafletComponent } from 'angular2.leaflet.components';
+import { CandTLeafletService } from 'angular2.leaflet.components';
  
 import { RequestInterceptor } from '../config/interceptors/request.interceptor';
  
@@ -32,6 +34,7 @@ import { FlowIntensityComponent } from &#39;./data/flow-intensity/flow-intensity.com
 import { RoadComponent } from './data/road/road.component';
 import { RoadServiceComponent } from './data/road-service/road-service.component';
 import { SettlementAddressLinkComponent } from './data/settlement-address-link/settlement-address-link.component';
+import { MapComponent } from './data/map/map.component';
  
 // Services
 import { BusStopCreateService } from '../services/bus-stop-create.service';
@@ -80,6 +83,8 @@ const httpInterceptorProviders: Type&lt;any&gt;[] = [
     CrossSectionComponent,
     RoadServiceComponent,
     SettlementAddressLinkComponent,
+    MapComponent,
+    CandTLeafletComponent
   ], // directives, components, and pipes owned by this NgModule
   imports: [
     BrowserModule,
@@ -135,6 +140,7 @@ const httpInterceptorProviders: Type&lt;any&gt;[] = [
     RoadServiceCreateService,
     SettlementAddressLinkService,
     SettlementAddressLinkCreateService,
+    CandTLeafletService,
   ], // additional providers needed for this module
   entryComponents: [ ],
   bootstrap: [ AppComponent ],
@@ -14,6 +14,7 @@ import { FlowIntensityComponent } from &#39;./data/flow-intensity/flow-intensity.com
 import { RoadComponent } from './data/road/road.component';
 import { RoadServiceComponent } from './data/road-service/road-service.component';
 import { SettlementAddressLinkComponent } from './data/settlement-address-link/settlement-address-link.component';
+import { MapComponent } from './data/map/map.component';
  
 const routes: Routes = [
   {path: 'login', component: LoginComponent},
@@ -30,6 +31,7 @@ const routes: Routes = [
         {path: 'road-service', component: RoadServiceComponent},
         {path: 'road-to-category', component: RoadToCategoryComponent},
         {path: 'settlement-address-link', component: SettlementAddressLinkComponent},
+        {path: 'map', component: MapComponent},
       ]},
   ]},
 ];
+<div id="mapId">
+
+</div>
 \ No newline at end of file
+import { Component, ViewEncapsulation, OnInit } from '@angular/core';
+import * as L from 'leaflet';
+
+@Component({
+    // tslint:disable-next-line:component-selector
+    selector: 'map-grid',
+    templateUrl: 'map.component.html',
+    styleUrls: ['map.scss'],
+    encapsulation: ViewEncapsulation.None,
+})
+export class MapComponent implements OnInit {
+    public map: L.Map;
+    public icon: L.Icon;
+    public markers: L.Marker[] = [];
+    public circles: L.Circle[] = [];
+    public polygon: L.Polygon[] = [];
+    ngOnInit(): void {
+        this.icon = L.icon({
+            iconUrl: '/assets/icons/marker-icon.png',
+            iconSize:     [25, 41], // size of the icon
+            popupAnchor:  [-3, -76], // point from which the popup should open relative to the iconAnchor
+        });
+        this.map = L.map('mapId').setView([51.505, -0.09], 13);
+        L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 18,
+        }).addTo(this.map);
+        let x: number = 51.5;
+        let y: number = -0.09;
+        for (let i: number = 0; i < 10; i++) {
+            this.markers.push(L.marker([x + i, y + i], {
+                icon: this.icon,
+            }).addTo(this.map));
+        }
+        this.markers.forEach(function(i: L.Marker, y: number, z: L.Marker[]): void {
+            i.bindPopup('Popup from element #' + y);
+            i.bindTooltip('Popup from element #' + y);
+        });
+        this.markers.push(L.marker([51.5, -0.09], {
+            icon: this.icon,
+        }).addTo(this.map));
+        this.circles.push(L.circle([51.508, -0.11], {
+            color: 'red',
+            fillColor: '#f03',
+            fillOpacity: 0.5,
+            radius: 500,
+        }).addTo(this.map));
+        this.polygon.push(L.polygon([
+            [51.509, -0.08],
+            [51.503, -0.06],
+            [51.51, -0.047],
+        ]).addTo(this.map));
+    };
+}
+.toolbar button {
+    margin: 2px;
+    padding: 0;
+}
+
+#mapId {
+    height: 100%;
+}
+
+.leaflet-container {
+    width: 100%;
+    height: 100%;
+}
+
+.map-container {
+    height: 100%;
+}
+
+leaf-element {
+    width: 100%;
+}
+
+.leaflet-pane {
+    z-index: 0 !important;
+}
 \ No newline at end of file
 <!doctype html>
 <html>
+
 <head>
-  <meta charset="utf-8">
-  <title>Covalent Quickstart</title>
-  <base href="/">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="icon" type="image/png" href="favicon.png" sizes="32x32">
-  <meta name="theme-color" content="#000000">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8">
+    <title>Covalent Quickstart</title>
+    <base href="/">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="icon" type="image/png" href="favicon.png" sizes="32x32">
+    <meta name="theme-color" content="#000000">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
+
 <body>
-  <qs-app>
-    <div style="padding: 20%;text-align:center;">
-      <img src="assets/icons/covalent.svg" width="200">
-      <div>Quickstart Loading...</div>
-    </div>
-  </qs-app>
+    <qs-app>
+        <div style="padding: 20%;text-align:center;">
+            <img src="assets/icons/covalent.svg" width="200">
+            <div>Quickstart Loading...</div>
+        </div>
+    </qs-app>
 </body>
-</html>
+
+</html>
 \ No newline at end of file