Map-tests

.prettierrc.json

@@ -7,5 +7,6 @@
   "quoteProps": "as-needed",
   "trailingComma": "none",
   "bracketSpacing": true,
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "editor.formatOnSave": true
 }

package.json

@@ -43,6 +43,7 @@
     "flag-icon-css": "^3.5.0",
     "i18n-iso-countries": "^6.4.0",
     "jsonwebtoken": "^8.5.1",
+    "leaflet": "^1.7.1",
     "libphonenumber-js": "^1.9.8",
     "mongoose": "~5.10.11",
     "mongoose-unique-validator": "^2.0.3",
@@ -69,6 +70,7 @@
     "@types/express": "^4.17.11",
     "@types/jasmine": "~3.6.0",
     "@types/jsonwebtoken": "^8.5.0",
+    "@types/leaflet": "^1.5.23",
     "@types/mongoose-unique-validator": "^1.0.4",
     "@types/morgan": "^1.9.2",
     "@types/node": "^12.19.13",
@@ -77,12 +79,12 @@
     "codelyzer": "^6.0.0",
     "eslint": "^7.6.0",
     "eslint-config-airbnb-typescript": "^12.0.0",
-    "eslint-config-prettier": "^7.1.0",
+    "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-html": "^6.1.1",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsdoc": "30.7.6",
     "eslint-plugin-prefer-arrow": "1.2.2",
-    "eslint-plugin-prettier": "^3.3.0",
+    "eslint-plugin-prettier": "^3.3.1",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~5.1.0",

src/app/app-routing.module.ts

@@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { MainPageComponent } from './base/pages/main-page/main-page.component';
 // import { NotFoundPageComponent } from './base/components/not-found-page/not-found-page.component';
+import { MapPageComponent } from './map/pages/map-page/map-page.component';
 
 const routes: Routes = [
   { path: 'home', component: MainPageComponent },
@@ -12,6 +13,7 @@ const routes: Routes = [
   },
   { path: '', redirectTo: '/home', pathMatch: 'full' },
   // { path: '**', component: NotFoundPageComponent } // TODO Wildcard route for a 404 page
+  { path: 'map', component: MapPageComponent },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -14,6 +14,7 @@ import { SettingsModule } from './settings/settings.module';
 import { AuthInterceptor } from './core/interceptors/auth.interceptor';
 import { ErrorComponent } from './shared/components/error/error.component';
 import { WarningComponent } from './shared/components/warning/warning.component';
+import { MapModule } from './map/map.module';
 
 // this function for load any static json file from ./assets/i18n
 export function HttpLoaderFactory(http: HttpClient): TranslateLoader {
@@ -34,6 +35,7 @@ export function initializeApp1(appInitService: AppInitService) {
     HttpClientModule,
     BaseModule,
     SettingsModule,
+    MapModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,

src/app/base/components/project-list/project-list.component.ts

@@ -7,7 +7,7 @@ import { MatDialog } from '@angular/material/dialog';
 
 import { WarningComponent } from '../../../shared/components/warning/warning.component';
 import {
- IProjectWithFavourite, IQueryOptions, ISearchResults
+ IProjectWithFavourite, IQueryOptions, ISearchResults, IProject
 } from '../../../core/models/projects.model';
 import { GlobalGivingApiService } from '../../../core/service/global-giving-api.service';
 import { DataService } from '../../../core/service/data.service';
@@ -16,6 +16,29 @@ import { AuthService } from '../../../core/service/auth.service';
 import { SettingsService } from '../../../settings/servise/settings.service';
 import { IFavourite } from '../../../settings/models/favourite.model';
 
+interface IGeometry {
+  type: string;
+  coordinates: number[];
+}
+
+interface PropertiesGeoJSON {
+  projectId: number;
+  title: string;
+  contactCity: string;
+  contactCountry: string;
+}
+
+interface IGeoJson {
+  type: string;
+  geometry: IGeometry;
+  properties: PropertiesGeoJSON;
+}
+
+interface ICollectionsGeoJSON {
+  type: string;
+  features: IGeoJson[];
+}
+
 @Component({
   selector: 'app-project-list',
   templateUrl: './project-list.component.html',
@@ -63,6 +86,8 @@ export class ProjectListComponent implements OnInit, OnDestroy {
     direction: ''
   };
 
+  dataForMap!: ICollectionsGeoJSON;
+
   constructor(
     private globalGivingApiService: GlobalGivingApiService,
     private settingsService: SettingsService,
@@ -125,6 +150,9 @@ export class ProjectListComponent implements OnInit, OnDestroy {
           fundingIndicator: (Math.floor(100 * (obj.funding / obj.goal)) > 100) ? '100%'
           : `${Math.floor(100 * (obj.funding / obj.goal))}%`
         }));
+        this.dataForMap = this.createGeoJson(this.dataProjects);
+        localStorage.setItem('rs_geoJson', JSON.stringify(this.dataForMap));
+        console.log(this.dataForMap);
         this.error = false;
         this.errorMessage = '';
         this.preloader.hide();
@@ -187,6 +215,28 @@ export class ProjectListComponent implements OnInit, OnDestroy {
     }
   }
 
+  createGeoJson(data: IProject[]): ICollectionsGeoJSON {
+    const geoJson: ICollectionsGeoJSON = { type: 'FeatureCollection', features: [] };
+    // eslint-disable-next-line array-callback-return
+    data.map((dataItem): void => {
+      const newFeature = {
+        type: "Feature",
+        geometry: {
+          type: "Point",
+          coordinates: [dataItem.longitude, dataItem.latitude]
+        },
+        properties: {
+          projectId: dataItem.id,
+          title: dataItem.title,
+          contactCountry: dataItem.contactCountry,
+          contactCity: dataItem.contactCity
+        }
+      }
+      geoJson.features.push(newFeature);
+    });
+    return geoJson;
+  }
+
   ngOnDestroy(): void {
     this.subscriptions.forEach((sb) => sb.unsubscribe())
   }

src/app/map/components/map/map.component.html

@@ -0,0 +1,5 @@
+<div class="map-container">
+  <div class="map-frame">
+    <div id="map"></div>
+  </div>
+</div>

src/app/map/components/map/map.component.scss

@@ -0,0 +1,17 @@
+.map-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 30px;
+}
+
+.map-frame {
+  border: 2px solid wheat;
+  height: 100%;
+}
+
+#map {
+  height: 100%;
+}

src/app/map/components/map/map.component.ts

@@ -0,0 +1,35 @@
+import { AfterViewInit, Component } from '@angular/core';
+import * as L from 'leaflet';
+import { MarkerService } from '../../services/marker.service';
+
+@Component({
+  selector: 'app-map',
+  templateUrl: './map.component.html',
+  styleUrls: ['./map.component.scss']
+})
+export class MapComponent implements AfterViewInit {
+  private map!: L.Map;
+
+  constructor(private markerService: MarkerService) { }
+
+  ngAfterViewInit(): void {
+    this.initMap();
+    // this.markerService.makeCapitalMarkers(this.map);
+    // this.markerService.makeCapitalCircleMarkers(this.map);
+    this.markerService.makeProjectsMarkers(this.map);
+  }
+
+  private initMap(): void {
+    this.map = L.map('map', {
+      // center: [50.45466, 30.5238], // Kyiv
+      center: [39.8282, -98.5795], // USA
+      zoom: 2
+    });
+
+    const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+  });
+    tiles.addTo(this.map);
+  }
+}

src/app/map/map.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MapPageComponent } from './pages/map-page/map-page.component';
+import { MapComponent } from './components/map/map.component';
+import { SharedModule } from '../shared/shared.module';
+import { MarkerService } from './services/marker.service';
+
+@NgModule({
+  declarations: [
+    MapPageComponent,
+    MapComponent
+  ],
+  imports: [
+    CommonModule,
+    SharedModule
+  ],
+  exports: [
+    MapPageComponent
+  ],
+  providers: [
+    MarkerService
+  ],
+})
+export class MapModule { }

src/app/map/pages/map-page/map-page.component.html

@@ -0,0 +1 @@
+<app-map></app-map>

src/app/map/pages/map-page/map-page.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { MapPageComponent } from './map-page.component';
+
+describe('MapPageComponent', () => {
+  let component: MapPageComponent;
+  let fixture: ComponentFixture<MapPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MapPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MapPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/map/pages/map-page/map-page.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-map-page',
+  templateUrl: './map-page.component.html',
+  styleUrls: ['./map-page.component.scss']
+})
+export class MapPageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/map/services/marker.service.spec.ts

@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { MarkerService } from './marker.service';
+
+describe('Service: Marker', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MarkerService]
+    });
+  });
+
+  it('should ...', inject([MarkerService], (service: MarkerService) => {
+    expect(service).toBeTruthy();
+  }));
+});