Base Map sizing

[anandbhaskaran]

I just followed the instructions and the good thing is, the library worked with ease!

However, firstly, for some reason I could not see the map due to the overflow. I resolve this by having:

.mapboxgl-map{
  overflow: visible;
}

Secondly, the height of the map (canvas) seem to be fixed to 375px. I again tried to have the customized height like below:

.mapboxgl-canvas {
  height: calc(100vh - 215px)!Important;
  width: 100%;
}

But the output looks like this:

Can you please help me fixing this issue.?

[khawarizmus]

I am facing the exact same problem and I had to add overflow: visible; by default as well but the height problem remains. so I thought that I need to resize the canvas.

I noticed that in the docs you have something about the Canvaslayer which is nowhere in the TOC I only got access to it by using the search feature in the docs

then I tried to use that component like so:

<map-box
        :accessToken="token"
        :mapStyle.sync="mapStyle"
        :RTLTextPluginUrl="mapRTL()"
        @load="onMapLoaded"
      >
        <map-canvas :coordinates="coordinates"/>
      </map-box>

import { MglMap, MglCanvasLayer } from 'vue-mapbox'

@Component({
  components: {
    'map-box': MglMap,
    'map-canvas': MglCanvasLayer,
  },
})
export default class Map extends Vue {
// the rest of the code....
}

But I am receiving a few errors:
Missing required prop: "sourceId" and Missing required prop: "layerId" which I don't know how to solve

also, I am not sure if I am on something here or my approach is completely wrong

@soal

[khawarizmus]

@anandbaskaran i have solved this issue by doing the following workaround

.mgl-map-wrapper {
  height: 100% !important;
}
.mapboxgl-map {
  overflow: visible;
  height: 100% !important;
}
.mapboxgl-canvas {
  height: 100% !important;
}

then to fix the stretching of the map i resize the window programmatically (i am using electron)

import { remote } from 'electron'


// somewhere in your vue component...
private onMapLoaded() {
    // resizing the window to help the map resize
    remote
      .getCurrentWindow()
      .setSize(
        remote.getCurrentWindow().getSize()[0] + 1,
        remote.getCurrentWindow().getSize()[1] + 1
      )
  }

hope it helps

[soal]

I tried to add sane default sizing in version 0.1.4.
Feel free to reopen this issue if you continue experiencing problems.