Feature/#41 add map to map view

angular.json

@@ -24,12 +24,18 @@
             "tsConfig": "tsconfig.app.json",
             "aot": true,
             "assets": [
+              {
+                "glob": "**/*",
+                "input": "./node_modules/leaflet/dist/images",
+                "output": "leaflet/"
+              },
               "src/favicon.ico",
               "src/assets"
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.scss"
+              "src/styles.scss",
+              "./node_modules/leaflet/dist/leaflet.css"
             ],
             "scripts": []
           },
@@ -82,7 +88,17 @@
         },
         "test": {
           "builder": "@angular-builders/jest:run",
-          "options": {}
+          "options": {
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "./node_modules/leaflet/dist/images",
+                "output": "leaflet/"
+              },
+              "src/assets",
+              "src/favicon.ico"
+            ]
+          }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",

package.json

@@ -24,7 +24,10 @@
     "@angular/platform-browser": "~11.0.9",
     "@angular/platform-browser-dynamic": "~11.0.9",
     "@angular/router": "~11.0.9",
+    "@asymmetrik/ngx-leaflet": "7",
     "@ngxs/store": "^3.7.1",
+    "@types/leaflet": "1",
+    "leaflet": "1",
     "angular-auth-oidc-client": "^11.5.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",

src/app/app.component.html

@@ -1,3 +1,3 @@
 <app-header></app-header>
 <app-shell></app-shell>
-<app-footer></app-footer>
+<app-footer></app-footer>

src/app/app.component.spec.ts

@@ -41,4 +41,4 @@ class MockShellComponent{}
   selector: 'app-footer',
   template: ''
 })
-class MockFooterComponent{} 
+class MockFooterComponent{} 

src/app/shared/modals/registration/registration.component.html

@@ -9,4 +9,4 @@
 </iframe>
 <button (click)="login()">
   Зайти в акаунт
-</button>
+</button>

src/app/shell/main/filters-list/city-filter/city-filter.component.spec.ts

@@ -54,4 +54,4 @@
 // @Injectable({
 //   providedIn: 'root'
 // })
-// class MockStore{} 
+// class MockStore{} 

src/app/shell/main/filters-list/filters-list.component.spec.ts

@@ -29,4 +29,4 @@ describe('FiltersListComponent', () => {
   selector: 'app-city-filter',
   template: ''
 })
-class MockCityFilterComponent{}
+class MockCityFilterComponent{}

src/app/shell/main/result/map/map.component.html

@@ -1 +1,9 @@
-<p>map works!</p>
+<div class="mapContainer">
+  <div class="map"
+      leaflet
+      [leafletOptions]="options">
+  </div>
+  <div class = "hobbyGroup">
+    GROUP
+  </div>
+</div>

src/app/shell/main/result/map/map.component.scss

@@ -0,0 +1,18 @@
+.mapContainer {
+  position: relative;
+}
+
+.map {
+  height: 500px;
+}
+
+.hobbyGroup {
+  height: 45%;
+  width: 15%;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  bottom: 0;
+  background-color: white;
+  z-index: 1000;
+}

src/app/shell/main/result/map/map.component.ts

@@ -1,13 +1,63 @@
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Store } from '@ngxs/store';
+import { latLng, tileLayer, icon, marker, polyline } from 'leaflet';
 
 @Component({
   selector: 'app-map',
   templateUrl: './map.component.html',
   styleUrls: ['./map.component.scss']
 })
 export class MapComponent implements OnInit {
+  // Define our base layers so we can reference them multiple times
+  streetMaps = tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    detectRetina: true,
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+  });
+  wMaps = tileLayer('http://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
+    detectRetina: true,
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+  });
+
+  testMarker1 = marker([ 50.408333, 30.556072 ], {
+    icon: icon({
+      iconSize: [ 25, 41 ],
+      iconAnchor: [ 13, 41 ],
+      iconUrl: 'leaflet/marker-icon.png',
+      shadowUrl: 'leaflet/marker-shadow.png'
+    })
+  });
+
+  testMarker2 = marker([ 50.484972, 30.586922 ], {
+    icon: icon({
+      iconSize: [ 25, 41 ],
+      iconAnchor: [ 13, 41 ],
+      iconUrl: 'leaflet/marker-icon.png',
+      iconRetinaUrl: 'leaflet/marker-icon-2x.png',
+      shadowUrl: 'leaflet/marker-shadow.png'
+    })
+  });
+
+  // You can make path from testMarker2 to testMarker1
+  route = polyline([]);
+
+  // Layers control object with our two base layers and the three overlay layers
+  layersControl = {
+    baseLayers: {
+      'Street Maps': this.streetMaps,
+      'Wikimedia Maps': this.wMaps
+    },
+    overlays: {
+      'Mt. Rainier testMarker1': this.testMarker1,
+      'Mt. Rainier testMarker2 Start': this.testMarker2,
+      'Mt. Rainier Climb Route': this.route
+    }
+  };
+  options = {
+    layers: [ this.streetMaps, this.route, this.testMarker1, this.testMarker2 ],
+    zoom: 11,
+    center: latLng([ 50.462235, 30.545131 ])
+  };
   stateMarkers: Observable<Object[]>;
   public markers: Array<Object> = [];
 

src/app/shell/shell.module.ts

@@ -10,6 +10,7 @@ import { ResultComponent } from './main/result/result.component';
 import { HobbyGroupsListComponent } from './main/result/hobby-groups-list/hobby-groups-list.component';
 import { MapComponent } from './main/result/map/map.component';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { LeafletModule } from '@asymmetrik/ngx-leaflet';
 
 import { MainComponent } from './main/main.component';
 import { FiltersListComponent } from './main/filters-list/filters-list.component';
@@ -54,7 +55,8 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
     MatIconModule,
     MatAutocompleteModule,
     HttpClientModule,
-    MatButtonToggleModule
+    MatButtonToggleModule,
+    LeafletModule
   ]
 })
 export class ShellModule { }

src/styles.scss

@@ -1,4 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
 
 html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

yarn.lock

@@ -310,6 +310,11 @@
   dependencies:
     tslib "^2.0.0"
 
+"@asymmetrik/ngx-leaflet@7":
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/@asymmetrik/ngx-leaflet/-/ngx-leaflet-7.0.1.tgz#8b1550d4927b9c6f8101dcd3bb0906782dfc6104"
+  integrity sha512-foFC3utA0kk+Ki0HcD7FL3XDNmXes/LWyWp3hr6wDNBUbMLsLHLKkvXY1HsfZDRLIw/+ha1BJIh5agLjLFqrQQ==
+
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.11":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
@@ -1590,6 +1595,11 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/geojson@*":
+  version "7946.0.7"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.7.tgz#c8fa532b60a0042219cdf173ca21a975ef0666ad"
+  integrity sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==
+
 "@types/glob@^7.1.1":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
@@ -1642,6 +1652,13 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
   integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
 
+"@types/leaflet@1":
+  version "1.5.21"
+  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.5.21.tgz#994c44f2bfc45744120f01924c8973c5e960e051"
+  integrity sha512-b+BOkwJDq6DK4m+jFUOHNCFinIkO4CF1MjnOwYgZFX+oElpYpXCCIsxZ3+zQWIRSLVUbRXvaQq2K935jGIyp7A==
+  dependencies:
+    "@types/geojson" "*"
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -6188,6 +6205,11 @@ klona@^2.0.4:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"
   integrity sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==
 
+leaflet@1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.7.1.tgz#10d684916edfe1bf41d688a3b97127c0322a2a19"
+  integrity sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==
+
 less-loader@7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-7.0.2.tgz#0d73a49ec32a9d3ff12614598e6e2b47fb2a35c4"