maps are overlapping in view? - css

Question

I have 2 components in my angular application each one having map to show from mapbox, one of the component is as shown below
Component
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]
});
}
}
component 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>
and i have another component with similar code
global 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;
}
these maps are creating the canvas and if i make display:none of 1st canvas in chrome dev tools am able to see the hidden map.
how can i separately display 2 maps?

Answer 1

I believe you need to use different id:
<div class="col-md-12 contentDiv">
<div class="row">
<h4 class="center subHeader">ACS</h4>
</div>
<div class="row">
<div class="mapArea">
<div [id]="randomId"></div>
</div>
</div>
</div>
Generate random ID:
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 {
public randomId: string;
constructor() { }
ngOnInit() {
mapboxgl.accessToken = 'api-key';
this.randomId = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
setTimeout(() => {
let mapbx = new mapboxgl.Map({
container: this.randomId,
style: 'styles',
zoom: 5,
center: [-80.118, 25.897]
});
}, 0);
}
}
Hope this will help you.

Answer 2

Try to give different ids for you selectors
component 1
<div class="col-md-12 contentDiv">
....
<div id='mapa'></div>
....
</div>
component 2
<div class="col-md-12 contentDiv">
....
<div id='mapb'></div>
....
</div>
as well in global css
#mapa {
width: auto;
height: inherit;
position: relative;
}
#mapb {
width: auto;
height: inherit;
position: relative;
}
Hope it helps