fix: small fix on structure-details and add offset on map for structure zoom

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;
   }
 }

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: '&copy; <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] });
   }
 }

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);
+    }
   }
 
   /**

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>

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%;