Map CSS resize

[julienromey]

Hi, When my map container is resized by css (I have a switch who increase the width of my map container), then the map still occupy the same size than before increasing the width, though if after increasing the width I resize manually my browser window size (by dragging the edge of the browser screen) then the map width is redraw to occupy the whole width as expected.

I'm looking how to trigger a resize method after changing the css width ?

[aarepuu]

Hi,

Had the same issue. I call a dedicated function in my Vue component to force resize of map. Like for example route change:

<template lang="pug">
.continer.map-wrapper
  mgl-map.map-container(
    :accessToken="ACCESS_TOKEN"
    :mapStyle.sync="MAP_STYLE"
    @load="mapLoaded"
   )

........

created() {
    this.map = null;
},

........

  methods: {
     mapLoaded(e) {
      // in component
      this.map = e.map;
      // or just to store if you want have access from other components
      this.$store.map = e.map;
    },
    changeRoute() {
      if (this.$route.name !== SEARCH_ROUTE) {
        this.$router.push({ name: SEARCH_ROUTE });
        // nextTick is used for waiting for DOM updates
        this.$nextTick().then(() => this.map.resize()); // or this.$store.map.resize();
      }
    },
......
}
......

Hope it helps. Cheers

[julienromey]

Hi @aarepuu, Thanks I'll try it ! :D

[mfreeman451]

Having the same issue..

[cberthiaume]

Same issue. The base map from the instructions isn't occupying the full size of it's container until I manually resize the browser window.

[cberthiaume]

I think this is issue is the same as what is described in https://github.com/mapbox/mapbox-gl-js/issues/3265. I ended up doing something similar to what @aarepuu described. I'm using vue-resize to watch when the map's container resizes and resize the map then. It's not idea as the map has an initial snap to the right size but it's good enough for the moment. I think this is really a mapbox issue as described in this comment https://github.com/mapbox/mapbox-gl-js/issues/3265#issuecomment-390820784 rather than a vue-mapbox issue.