CODEWITHSUNDEEP
cssangularmapboxmapbox-gl
VIK6Galado
VIK6Galado

Reputation: 680

maps are overlapping in view?

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.

enter image description here

how can i separately display 2 maps?

Upvotes: 2

Views: 359

Answers (2)

Raghav
Raghav

Reputation: 1229

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

Upvotes: 1

Ivan Bisultanov
Ivan Bisultanov

Reputation: 438

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.

Upvotes: 2

Related Questions