From 3d60d752e18a536eb4c325249a83fc52ca4d12fd Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Fri, 30 Oct 2020 16:55:03 +0100
Subject: [PATCH] fix: small fix on structure-details and add offset on map for
structure zoom
---
src/app/home/home.component.ts | 1 -
src/app/map/components/map.component.ts | 25 +++----------
src/app/map/services/map.service.ts | 37 +++++++++++--------
.../structure-details.component.html | 12 ++++--
src/assets/scss/_icons.scss | 10 ++---
5 files changed, 42 insertions(+), 43 deletions(-)
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 015a4992a..6630be72c 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -94,7 +94,6 @@ export class HomeComponent implements OnInit {
}
public setSelectedMarkerId(id: number): void {
- console.log('setSelectedMarker', id);
this.selectedMarkerId = id;
}
}
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index adbca64a5..08bacc687 100644
--- a/src/app/map/components/map.component.ts
+++ b/src/app/map/components/map.component.ts
@@ -132,24 +132,10 @@ export class MapComponent implements OnChanges {
height: 256,
};
// Init WMS service with param from data.grandlyon.com
- const carteLayer = new TileLayer.WMS('https://openstreetmap.data.grandlyon.com/wms', {
- crs: CRS.EPSG3857,
- transparent: true,
- format: 'image/png',
- attribution: 'Map data © OpenStreetMap contributors',
- version: '1.3.0',
- maxZoom: 20,
+ const carteLayer = tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
+ attribution: '© <a href="https://carto.com/attributions">CARTO</a>',
+ maxZoom: 19,
});
- carteLayer.wmsParams = {
- format: 'image/png',
- transparent: true,
- version: '1.3.0',
- layers: 'osm_grandlyon',
- service: 'WMS',
- request: 'GetMap',
- width: 256,
- height: 256,
- };
// Center is set on townhall
// Zoom is blocked on 11 to prevent people to zoom out from metropole
this.mapOptions = {
@@ -170,10 +156,11 @@ export class MapComponent implements OnChanges {
});
}
- private centerLeafletMapOnMarker(markerId: number) {
+ private centerLeafletMapOnMarker(markerId: number): void {
const marker = this.mapService.getMarker(markerId);
const latLngs = [marker.getLatLng()];
const markerBounds = latLngBounds(latLngs);
- this.map.fitBounds(markerBounds);
+ // paddingTopLeft is used for centering marker because of structure details pane
+ this.map.fitBounds(markerBounds, { paddingTopLeft: [300, 0] });
}
}
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index 986022a9c..e12e52e7e 100644
--- a/src/app/map/services/map.service.ts
+++ b/src/app/map/services/map.service.ts
@@ -19,7 +19,10 @@ export class MapService {
const marker = new Marker([lat, lon], { icon: markerIcon });
if (tooltip) {
- marker.bindTooltip(tooltip);
+ marker.bindTooltip(tooltip, {
+ opacity: 1,
+ direction: 'top',
+ });
}
MapService.markersList[id] = marker;
return marker;
@@ -50,13 +53,15 @@ export class MapService {
* @param html html to display
*/
public setSelectedMarker(id: number): void {
- const markerIcon = divIcon({
- className: null,
- html: "<div class='ico-marker-pin selected'></div>",
- iconSize: [35, 41],
- iconAnchor: [13, 41],
- });
- this.getMarker(id).setIcon(markerIcon);
+ if (id) {
+ const markerIcon = divIcon({
+ className: null,
+ html: "<div class='ico-marker-pin selected'></div>",
+ iconSize: [35, 41],
+ iconAnchor: [13, 41],
+ });
+ this.getMarker(id).setIcon(markerIcon);
+ }
}
/**
@@ -65,13 +70,15 @@ export class MapService {
* @param html html to display
*/
public setDefaultMarker(id: number): void {
- const markerIcon = divIcon({
- className: null,
- html: "<div class='ico-marker-pin'></div>",
- iconSize: [35, 41],
- iconAnchor: [13, 41],
- });
- this.getMarker(id).setIcon(markerIcon);
+ if (id) {
+ const markerIcon = divIcon({
+ className: null,
+ html: "<div class='ico-marker-pin'></div>",
+ iconSize: [35, 41],
+ iconAnchor: [13, 41],
+ });
+ this.getMarker(id).setIcon(markerIcon);
+ }
}
/**
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html
index c2185f875..03cbfe870 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.html
+++ b/src/app/structure-list/components/structure-details/structure-details.component.html
@@ -131,14 +131,20 @@
</div>
</div>
<!-- Labels -->
- <div fxLayout="column" class="structrue-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="20px">
+ <div
+ *ngIf="structure.labelsEtQualifications"
+ fxLayout="column"
+ class="structrue-details-block"
+ fxLayoutAlign="baseline baseline"
+ fxLayoutGap="20px"
+ >
<div fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="20px">
<em class="ic-toolbox"></em>
<h2>Labelisation</h2>
</div>
<div fxLayout="row wrap" fxLayoutGap="24px">
- <div *ngFor="let accompagnement of structure.labelsEtQualifications">
- <app-logo-card [name]="accompagnement"></app-logo-card>
+ <div *ngFor="let labels of structure.labelsEtQualifications">
+ <app-logo-card [name]="labels"></app-logo-card>
</div>
</div>
</div>
diff --git a/src/assets/scss/_icons.scss b/src/assets/scss/_icons.scss
index 98209578e..ea957e5c9 100644
--- a/src/assets/scss/_icons.scss
+++ b/src/assets/scss/_icons.scss
@@ -94,8 +94,8 @@
}
.ico-marker-pin-sm {
- width: 14px;
- height: 14px;
+ width: 18px;
+ height: 18px;
border-radius: 50% 50% 50% 0;
background: $grey-3;
transform: rotate(-45deg);
@@ -108,9 +108,9 @@
.ico-marker-pin-sm::after {
content: '';
- width: 6px;
- height: 6px;
- margin: 4px 0 0 4px;
+ width: 7px;
+ height: 7px;
+ margin: 6px 0 0 5px;
background: $app-background;
position: absolute;
border-radius: 50%;
--
GitLab