diff --git a/angular.json b/angular.json
index f372ad9f05..3185af530a 100644
--- a/angular.json
+++ b/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",
diff --git a/package.json b/package.json
index 8ca1e924b6..82d5dd1cfc 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 7ad1a636d9..1c1ab5c38a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,3 @@
-
\ No newline at end of file
+
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index f97eeb4886..35ef60fa33 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -41,4 +41,4 @@ class MockShellComponent{}
selector: 'app-footer',
template: ''
})
-class MockFooterComponent{}
\ No newline at end of file
+class MockFooterComponent{}
diff --git a/src/app/shared/modals/registration/registration.component.html b/src/app/shared/modals/registration/registration.component.html
index e18411ed91..faab91f64e 100644
--- a/src/app/shared/modals/registration/registration.component.html
+++ b/src/app/shared/modals/registration/registration.component.html
@@ -9,4 +9,4 @@
\ No newline at end of file
+
diff --git a/src/app/shell/main/filters-list/city-filter/city-filter.component.spec.ts b/src/app/shell/main/filters-list/city-filter/city-filter.component.spec.ts
index 5a804b3c88..f3cbca5346 100644
--- a/src/app/shell/main/filters-list/city-filter/city-filter.component.spec.ts
+++ b/src/app/shell/main/filters-list/city-filter/city-filter.component.spec.ts
@@ -54,4 +54,4 @@
// @Injectable({
// providedIn: 'root'
// })
-// class MockStore{}
\ No newline at end of file
+// class MockStore{}
diff --git a/src/app/shell/main/filters-list/filters-list.component.spec.ts b/src/app/shell/main/filters-list/filters-list.component.spec.ts
index d1d5dd22a4..f10056f4f2 100644
--- a/src/app/shell/main/filters-list/filters-list.component.spec.ts
+++ b/src/app/shell/main/filters-list/filters-list.component.spec.ts
@@ -29,4 +29,4 @@ describe('FiltersListComponent', () => {
selector: 'app-city-filter',
template: ''
})
-class MockCityFilterComponent{}
\ No newline at end of file
+class MockCityFilterComponent{}
diff --git a/src/app/shell/main/result/map/map.component.html b/src/app/shell/main/result/map/map.component.html
index 088f942e33..1e6dc36ad5 100644
--- a/src/app/shell/main/result/map/map.component.html
+++ b/src/app/shell/main/result/map/map.component.html
@@ -1 +1,9 @@
-map works!
+
diff --git a/src/app/shell/main/result/map/map.component.scss b/src/app/shell/main/result/map/map.component.scss
index e69de29bb2..d8f0a2f012 100644
--- a/src/app/shell/main/result/map/map.component.scss
+++ b/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;
+}
diff --git a/src/app/shell/main/result/map/map.component.ts b/src/app/shell/main/result/map/map.component.ts
index 4dc118f02b..f70cdb2256 100644
--- a/src/app/shell/main/result/map/map.component.ts
+++ b/src/app/shell/main/result/map/map.component.ts
@@ -1,6 +1,7 @@
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',
@@ -8,6 +9,55 @@ import { Store } from '@ngxs/store';
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: '© OpenStreetMap contributors'
+ });
+ wMaps = tileLayer('http://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
+ detectRetina: true,
+ attribution: '© OpenStreetMap 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;
public markers: Array