From 5aa1038800f5b2eaa021040e0b5e3e33e124b4ae Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Tue, 13 Oct 2020 17:21:37 +0200
Subject: [PATCH] feat(map): clean code and remove ign map because of heavy
loading
---
src/app/home/home.component.html | 7 +-
src/app/map/components/map.component.html | 14 +---
src/app/map/components/map.component.scss | 4 +-
src/app/map/components/map.component.ts | 94 +++++++++--------------
src/app/map/services/map.service.ts | 29 +++++++
tsconfig.app.json | 2 -
6 files changed, 72 insertions(+), 78 deletions(-)
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 56147e48a..ca9398f41 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,5 +1,4 @@
-<div class="content-container">
- <div class="section-container">
- <app-map></app-map>
- </div>
+<div fxLayout="row">
+ <p fxFlex="30%">temp</p>
+ <app-map fxFlex="70%" [toogleToolTipIds]="[1, 2]"></app-map>
</div>
diff --git a/src/app/map/components/map.component.html b/src/app/map/components/map.component.html
index 7fa9fe594..4ed0d90d5 100644
--- a/src/app/map/components/map.component.html
+++ b/src/app/map/components/map.component.html
@@ -1,12 +1,2 @@
-<div
- id="map"
- leaflet
- [leafletOptions]="mapOptions"
- [leafletLayersControl]="layersControl"
- (leafletMapReady)="onMapReady($event)"
-></div>
-<leaflet-locate-control
- [map]="map"
- [options]="locateOptions"
- (location$)="onNewLocation($event)"
-></leaflet-locate-control>
+<div id="map" leaflet [leafletOptions]="mapOptions" (leafletMapReady)="onMapReady($event)"></div>
+<leaflet-locate-control [map]="map" [options]="locateOptions"></leaflet-locate-control>
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index 67c8eb237..e11a4d0aa 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -1,7 +1,9 @@
@import '../../../assets/scss/color';
+@import '../../../assets/scss/layout';
#map {
- height: 600px;
+ height: calc(100vh - #{$header-height} - #{$footer-height});
+ width: 100%;
}
::ng-deep .fa-map-marker {
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index 473f9d8fb..6121644a2 100644
--- a/src/app/map/components/map.component.ts
+++ b/src/app/map/components/map.component.ts
@@ -1,16 +1,17 @@
-import { Component, OnInit } from '@angular/core';
-import { latLng, MapOptions, tileLayer, Map, Marker, icon, CRS, TileLayer, LatLngBounds } from 'leaflet';
+import { Component, Input, OnInit } from '@angular/core';
+import { latLng, MapOptions, tileLayer, Map, CRS, TileLayer, LatLngBounds } from 'leaflet';
+import { MapService } from '../services/map.service';
-declare const L: any; // Leaflet
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss'],
})
export class MapComponent implements OnInit {
+ @Input() public toogleToolTipIds: Array<number> = [];
public map: Map;
public mapOptions: MapOptions;
- public layersControl = {};
+ // Init locate options
public locateOptions = {
flyTo: false,
keepCurrentZoomLevel: true,
@@ -21,22 +22,29 @@ export class MapComponent implements OnInit {
clickBehavior: { inView: 'stop', outOfView: 'setView', inViewNotFollowing: 'setView' },
};
- constructor() {}
+ constructor(private mapService: MapService) {}
ngOnInit(): void {
this.initializeMapOptions();
}
+ /**
+ * Add marker when map is ready to be showned
+ * @param map
+ */
public onMapReady(map: Map): void {
this.map = map;
- this.addSampleMarker();
- }
-
- public onNewLocation(e: Location): void {
- console.log(e);
+ this.addMarker();
+ this.toggleToolTip(this.toogleToolTipIds);
}
+ /**
+ * Init map options :
+ * - Metropole bounds based on a WMS service hosted by data.grandlyon.com
+ * - Map Layer based on open street maps
+ */
private initializeMapOptions(): void {
+ // Init WMS service with param from data.grandlyon.com
const metroMaps = new TileLayer.WMS('https://download.data.grandlyon.com/wms/grandlyon', {
crs: CRS.EPSG4326,
transparent: true,
@@ -55,64 +63,32 @@ export class MapComponent implements OnInit {
width: 256,
height: 256,
};
-
- const ignMaps = new TileLayer.WMS('https://data.grandlyon.com/api/query/map/ign', {
- crs: CRS.EPSG4326,
- transparent: true,
- format: 'image/png',
- attribution: 'Map data © OpenStreetMap contributors',
- version: '1.1.1',
- });
- ignMaps.wmsParams = {
- format: 'image/png',
- styles: 'normal',
- transparent: true,
- version: '1.1.1',
- layers: 'ORTHOIMAGERY.ORTHOPHOTOS.BDORTHO',
- service: 'WMS',
- request: 'GetMap',
- width: 512,
- height: 512,
- };
-
const carteLayer = tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors',
});
-
- this.layersControl = {
- baseLayers: {
- Carte: carteLayer,
- Satellite: ignMaps,
- },
- overlays: {
- 'Contours métropole': metroMaps,
- },
- };
+ // Center is set on townhall
+ // Zoom is blocked on 11 to prevent people to zoom out from metropole
this.mapOptions = {
center: latLng(45.764043, 4.835659),
- zoom: 12,
+ zoom: 11,
+ minZoom: 11,
layers: [carteLayer, metroMaps],
};
}
- private addSampleMarker(): void {
- const marker = new Marker([45.764043, 4.835659]).setIcon(
- icon({
- iconSize: [35, 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: [35, 41],
- iconAnchor: [13, 41],
- iconUrl: '../../../assets/img/ic_marker.png',
- })
- );
- marker2.addTo(this.map);
- marker.bindTooltip('<p>Hello <br/>World !</p>');
+ /**
+ * Toogle all tooltips given in parameters
+ */
+ public toggleToolTip(ids: Array<number>): void {
+ ids.forEach((id) => {
+ this.mapService.toogleToolTip(id);
+ });
+ }
+
+ private addMarker(): void {
+ //TODO: Replace with real data
+ this.map = this.mapService.addMarker(this.map, 45.764043, 4.835659, 1);
+ this.map = this.mapService.addMarker(this.map, 45.764043, 4.935659, 2);
}
}
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index 81ce8c87d..30aaad690 100644
--- a/src/app/map/services/map.service.ts
+++ b/src/app/map/services/map.service.ts
@@ -1,8 +1,37 @@
import { Injectable } from '@angular/core';
+import { icon, Marker, Map } from 'leaflet';
@Injectable({
providedIn: 'root',
})
export class MapService {
+ private markersList = {};
constructor() {}
+
+ public addMarker(map: Map, lat: number, lon: number, id: number): Map {
+ const marker = new Marker([lat, lon]).setIcon(
+ icon({
+ iconSize: [35, 41],
+ iconAnchor: [13, 41],
+ iconUrl: '../../../assets/img/ic_marker.png',
+ })
+ );
+
+ marker.bindTooltip('<p>Hello <br/>World !</p>'); //TODO: replace with real data
+ marker.addTo(map);
+ this.markersList[id] = marker;
+ return map;
+ }
+
+ public toogleToolTip(id: number): void {
+ this.getMarker(id).toggleTooltip();
+ }
+
+ public setToolTip(id: number): void {
+ this.getMarker(id).bindTooltip('<p>Hello <br/>World 2!</p>');
+ }
+
+ public getMarker(id: number): Marker {
+ return this.markersList[id];
+ }
}
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 789f1f58b..6bb6c9dac 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -3,8 +3,6 @@
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
- "fullTemplateTypeCheck": true,
- "strictInjectionParameters": true,
"types": ["node"]
},
"files": ["src/main.ts", "src/polyfills.ts"],
--
GitLab