diff --git a/.gitignore b/.gitignore
index 86d943a9b2e8f3bb69fbe37fd8363962646b1d92..dd7eaed5168b1bcc2166f2b02e38305075a0a17b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -44,3 +44,6 @@ testem.log
# System Files
.DS_Store
Thumbs.db
+
+#config
+.env
diff --git a/angular.json b/angular.json
index 79beada281cd779b5e2ec1bba168cb45e75b80cd..ed866799935e7c21f8aa578dcd29dafa6b3a9fe1 100644
--- a/angular.json
+++ b/angular.json
@@ -30,8 +30,16 @@
"tsConfig": "tsconfig.app.json",
"localize": true,
"aot": true,
- "assets": ["src/favicon.ico", "src/assets"],
- "styles": ["src/styles.scss"],
+ "assets": [
+ "src/favicon.ico",
+ "src/assets",
+ {
+ "glob": "**/*",
+ "input": "./node_modules/leaflet/dist/images",
+ "output": "assets/"
+ }
+ ],
+ "styles": ["src/styles.scss", "./node_modules/leaflet/dist/leaflet.css"],
"scripts": []
},
"configurations": {
diff --git a/package-lock.json b/package-lock.json
index 3cc3d68528600087c196662feb8ae7926aaf69a3..50b7ced9f1f5c153a1945d1bf7ead1f0604e63dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -773,6 +773,11 @@
"tslib": "^2.0.0"
}
},
+ "@asymmetrik/ngx-leaflet": {
+ "version": "8.1.0",
+ "resolved": "https://registry.npmjs.org/@asymmetrik/ngx-leaflet/-/ngx-leaflet-8.1.0.tgz",
+ "integrity": "sha512-lq7LduBP/vXcaSEmKnx7mzCR8WsoYqh9pB6BNnq53yeCwsqRbG3GdKye1/i8VvoRzjDsmQBPQsIFZ9uclXrtgg=="
+ },
"@babel/code-frame": {
"version": "7.10.4",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
@@ -1973,6 +1978,12 @@
"integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
"dev": true
},
+ "@types/geojson": {
+ "version": "7946.0.7",
+ "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
+ "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==",
+ "dev": true
+ },
"@types/glob": {
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -2004,6 +2015,15 @@
"integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
"dev": true
},
+ "@types/leaflet": {
+ "version": "1.5.17",
+ "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.5.17.tgz",
+ "integrity": "sha512-2XYq9k6kNjhNI7PaTz8Rdxcc8Vzwu97OaS9CtcrTxnTSxFUGwjlGjTDvhTLJU+JRSfZ4lBwGcl0SjZHALdVr6g==",
+ "dev": true,
+ "requires": {
+ "@types/geojson": "*"
+ }
+ },
"@types/minimatch": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -8058,6 +8078,11 @@
"integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
"dev": true
},
+ "leaflet": {
+ "version": "1.7.1",
+ "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
+ "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
+ },
"less": {
"version": "3.12.2",
"resolved": "https://registry.npmjs.org/less/-/less-3.12.2.tgz",
diff --git a/package.json b/package.json
index 5a8956c0f4d5d75b2dd23ac104a517e7ffe915ea..90b8efc6002cff16b6ef7514b9ae0321a9fd75c1 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,8 @@
"@angular/platform-browser": "~10.1.3",
"@angular/platform-browser-dynamic": "~10.1.3",
"@angular/router": "~10.1.3",
+ "@asymmetrik/ngx-leaflet": "^8.1.0",
+ "leaflet": "^1.7.1",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
@@ -35,6 +37,7 @@
"@angular/localize": "^10.1.3",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
+ "@types/leaflet": "^1.5.17",
"@types/node": "^12.12.62",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4ad3e88617de7993fb074fa3ac938dcd0aadc4e7..00278763f45edfc091c58d809f67df124d97e91e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -11,10 +11,11 @@ import { StructureListComponent } from './structure-list/structure-list.componen
import { FooterComponent } from './footer/footer.component';
import { HeaderComponent } from './header/header.component';
import { SharedModule } from './shared/shared.module';
+import { MapModule } from './map/map.module';
@NgModule({
declarations: [AppComponent, HeaderComponent, FooterComponent, HomeComponent, StructureListComponent],
- imports: [BrowserModule, AppRoutingModule, FlexLayoutModule, SharedModule],
+ imports: [BrowserModule, AppRoutingModule, FlexLayoutModule, SharedModule, MapModule],
providers: [{ provide: LOCALE_ID, useValue: 'fr' }, CustomBreakPointsProvider],
bootstrap: [AppComponent],
})
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 4f2ba48bcf5fce48d7690c8b79df492311eb776a..56147e48af280ef1073db24d6a53683949731e9b 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,5 +1,5 @@
<div class="content-container">
<div class="section-container">
- <p>Home works!</p>
+ <app-map></app-map>
</div>
</div>
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 73acf06f0d3597e3f5aeaa830d8568769a446cb5..98af519054c2bf3c068b8ea9faaa77b0581e60f7 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -3,13 +3,10 @@ import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
- styleUrls: ['./home.component.scss']
+ styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
+ constructor() {}
- constructor() { }
-
- ngOnInit(): void {
- }
-
+ ngOnInit(): void {}
}
diff --git a/src/app/map/components/index.ts b/src/app/map/components/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..45941a73cbaa1d10fc7670c9d256c3b051669356
--- /dev/null
+++ b/src/app/map/components/index.ts
@@ -0,0 +1,6 @@
+import { MapComponent } from './map.component';
+
+export { MapComponent };
+
+// tslint:disable-next-line:variable-name
+export const MapComponents = [MapComponent];
diff --git a/src/app/map/components/map.component.html b/src/app/map/components/map.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..de076413c91ebb0b5907c8a08d1ed763ec026d6e
--- /dev/null
+++ b/src/app/map/components/map.component.html
@@ -0,0 +1 @@
+<div id="map" leaflet [leafletOptions]="mapOptions" (leafletMapReady)="onMapReady($event)"></div>
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4bbcec0300fb5e23193f617165f61ec567147397
--- /dev/null
+++ b/src/app/map/components/map.component.scss
@@ -0,0 +1,3 @@
+#map {
+ height: 600px;
+}
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..704918cd7c0802bca96d1ed26c6c77f7f245782e
--- /dev/null
+++ b/src/app/map/components/map.component.ts
@@ -0,0 +1,56 @@
+import { Component, OnInit } from '@angular/core';
+import { latLng, MapOptions, tileLayer, Map, Marker, icon } from 'leaflet';
+
+declare var ol: any;
+@Component({
+ selector: 'app-map',
+ templateUrl: './map.component.html',
+ styleUrls: ['./map.component.scss'],
+})
+export class MapComponent implements OnInit {
+ public map: Map;
+ public mapOptions: MapOptions;
+
+ constructor() {}
+
+ ngOnInit(): void {
+ this.initializeMapOptions();
+ }
+
+ public onMapReady(map: Map): void {
+ this.map = map;
+ this.addSampleMarker();
+ }
+
+ private initializeMapOptions(): void {
+ this.mapOptions = {
+ center: latLng(45.764043, 4.835659),
+ zoom: 12,
+ layers: [
+ tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ maxZoom: 18,
+ attribution: 'Map data © OpenStreetMap contributors',
+ }),
+ ],
+ };
+ }
+
+ private addSampleMarker(): void {
+ const marker = new Marker([45.764043, 4.835659]).setIcon(
+ icon({
+ iconSize: [25, 41],
+ iconAnchor: [13, 41],
+ iconUrl: '../../../assets/img/ic_marker.png',
+ })
+ );
+ marker.addTo(this.map);
+ const marker2 = new Marker([45.764043, 4.935659]).setIcon(
+ icon({
+ iconSize: [25, 41],
+ iconAnchor: [13, 41],
+ iconUrl: '../../../assets/img/ic_marker.png',
+ })
+ );
+ marker2.addTo(this.map);
+ }
+}
diff --git a/src/app/map/map.module.ts b/src/app/map/map.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d52d49db8dc190c19e3f19bd7286f7e9922bb210
--- /dev/null
+++ b/src/app/map/map.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+import { SharedModule } from '../shared/shared.module';
+import { MapComponents } from './components';
+import { LeafletModule } from '@asymmetrik/ngx-leaflet';
+@NgModule({
+ imports: [CommonModule, SharedModule, LeafletModule],
+ declarations: [MapComponents],
+ providers: [DatePipe],
+ exports: [MapComponents],
+})
+export class MapModule {}
diff --git a/src/app/map/models/map-options.ts b/src/app/map/models/map-options.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/map/services/map.service.spec.ts b/src/app/map/services/map.service.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9a1a1ec530fc98ebe34196bc0dc31edb3fe3a7f7
--- /dev/null
+++ b/src/app/map/services/map.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MapService } from './map.service';
+
+describe('MapService', () => {
+ let service: MapService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(MapService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..81ce8c87d00c323a4139aeb8f22086a907f0d79f
--- /dev/null
+++ b/src/app/map/services/map.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class MapService {
+ constructor() {}
+}
diff --git a/src/assets/img/ic_marker.png b/src/assets/img/ic_marker.png
new file mode 100644
index 0000000000000000000000000000000000000000..0cee292f0cfac7648bf62b1d257936ffb4986ffc
Binary files /dev/null and b/src/assets/img/ic_marker.png differ
diff --git a/src/index.html b/src/index.html
index 761c288f29ddf7adb06477a7511fe0ee4a0ee9a9..3469415cc217ac09ee63762e0d5c8d133621ee57 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,13 +1,15 @@
-<!doctype html>
+<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>Pamn</title>
- <base href="/">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
- <app-root></app-root>
-</body>
+ <head>
+ <meta charset="utf-8" />
+ <title>Pamn</title>
+ <base href="/" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link rel="icon" type="image/x-icon" href="favicon.ico" />
+ <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css" />
+ <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <app-root></app-root>
+ </body>
</html>
diff --git a/src/main.ts b/src/main.ts
index c7b673cf44b388e9989fe908b78d7d73cd2e1409..d9a2e7e4a582e265db779363bd8b2492c43c141b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,5 +8,6 @@ if (environment.production) {
enableProdMode();
}
-platformBrowserDynamic().bootstrapModule(AppModule)
- .catch(err => console.error(err));
+platformBrowserDynamic()
+ .bootstrapModule(AppModule)
+ .catch((err) => console.error(err));