В моем угловом приложении есть 2 компонента, каждый из которых имеет карту для отображения из mapbox , один из компонентов, как показано ниже
Компонент
import { Component, OnInit } from '@angular/core';
import * as mapboxgl from 'mapbox-gl';
@Component({
selector: 'app-acs',
templateUrl: './acs.component.html',
styleUrls: ['./acs.component.css']
})
export class AcsComponent implements OnInit {
constructor() { }
ngOnInit() {
mapboxgl.accessToken = 'api-key';
let mapbx = new mapboxgl.Map({
container: 'mapbx',
style: 'styles',
zoom: 5,
center: [-80.118, 25.897]
});
}
}
компонент html
<div class="col-md-12 contentDiv">
<div class="row">
<h4 class="center subHeader">ACS</h4>
</div>
<div class="row">
<div class="mapArea">
<div id='map'></div>
</div>
</div>
</div>
и у меня есть другой компонент с похожим кодом
глобальный CSS
.contentDiv{
border: 1px solid #b1b0b0;
margin: 3px;
height: auto;
}
.subHeader{
border-bottom: 1px solid #b1b0b0;
margin: 2px 0px;
padding: 5px;
}
.region{
font-size: 16px;
}
.regionDropDown{
display: inline-block;
width: auto;
margin: 0px 10px;
}
.mapArea{
background: #e8e5e5;
margin: 10px;
height: 80vh;
}
#map {
width: auto;
height: inherit;
position: relative;
}
эти карты создают холст, и если я сделаю display:none
из 1-го холста в инструментах разработчика Chrome, я смогу увидеть скрытую карту.
как мне отдельно отобразить 2 карты?