[英]How to customise popup from mapbox
I have angular 8 application and I can show a popup.我有 angular 8 应用程序,我可以显示一个弹出窗口。
But I want to style the popup.但我想设置弹出窗口的样式。 But how to do that?但是怎么做呢?
SO I have this template:所以我有这个模板:
<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>
and 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];
}
and css:和CSS:
.mapboxgl-popup-content-wrapper {
width: 89px;
}
but nothing change.但没有任何变化。 The popup stays white弹出窗口保持白色
see image.看图片。
So what I have to change?那我必须改变什么?
Thank you谢谢
So in css: toggle-layer.component.scss所以在 css 中:toggle-layer.component.scss
I have this:我有这个:
:host ::ng-deep .mapboxgl-popup-content-wrapper {
width: 89px;
}
Should work:应该管用:
: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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.