diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 015a4992a90476c5fd0cc71bbeed20ad4d60a7c6..6630be72c3c16ae587037871d72f3f2672128e8e 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 adbca64a595500f5ecc4cb4053f079da817d125f..08bacc687b6001449ab5f358b0261e3258461952 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 986022a9cb6deee01728bce30a3a10596f227287..e12e52e7ee34d83dea22179637a178fd930fe381 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 c2185f875e20c848b75741ce19078b09e4094ebc..03cbfe8704900a3316bba2195f2312e9c939e520 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 98209578e17e40ec42df0134f29e8b396a80ff71..ea957e5c90e0d9a36db6ab1f04ffe53750dded52 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%;