Блог

У меня есть приложение angular 8, и я могу показать всплывающее окно.

Но я хочу оформить всплывающее окно. Но как это сделать?

ИТАК, у меня есть этот шаблон:

   <mgl-layer
    *ngIf="imageLoaded"
    id="camera"
    type="symbol"
    [source]="{
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
       
      }
    }"
    (click)= "onClick($event)"
    [layout]="{'icon-image': 'camera', 'icon-size': 0.25}"
  >
  </mgl-layer>
  <mgl-popup *ngIf="selectedPoint" [feature]="selectedPoint">
    <span [innerHTML]="selectedPoint.properties?.description"></span>
  </mgl-popup>

  

и ts:

  allWifiPoints = this.wifiPoints.map((wifi) => ({
    type: 'Feature',
    properties: {
      description:
      // eslint-disable-next-line max-len   
    },
    geometry: {
      type: 'Point',
      coordinates: wifi,
    },
  }));


  onClick(evt: MapLayerMouseEvent) {
    this.selectedPoint = evt.features![0];
  }

  

и css:

   .mapboxgl-popup-content-wrapper {
    width: 89px;
   
  }
  

но ничего не меняется. Всплывающее окно остается белым

смотрите изображение.

Итак, что я должен изменить?

Спасибо

Итак, в css: toggle-layer.component.scss

У меня есть это:

 :host ::ng-deep .mapboxgl-popup-content-wrapper {
  width: 89px;
 
}
  

Должно работать:

 :host ::ng-deep .mapboxgl-popup-content-wrapper {
    width: 89px;
    height: max-content;
    border: 2px solid #BF0404;
    background-color: rgba(243, 207, 207, 0.7);
    border-radius: 18px;
    margin-bottom: 3px;
  }