Vuelayer works if size of window change!

[thantez]

Hi. I wrote this code to show the location of some places on the map by a marker:

<vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
           data-projection="EPSG:4326" style="height: 400px">
        <vl-view :zoom.sync="zoom" :center.sync="coordinates" :rotation.sync="rotation"></vl-view>

        <vl-layer-tile id="osm">
          <vl-source-osm></vl-source-osm>
        </vl-layer-tile>

        <vl-layer-vector>
          <vl-feature id="point">
              <vl-geom-point :coordinates="staticCenter"></vl-geom-point>

              <vl-style-box>
                <vl-style-icon :src="require('@/assets/images/map_marker.png')" :scale="0.08"></vl-style-icon>
              </vl-style-box>
          </vl-feature>
        </vl-layer-vector>
      </vl-map>

But it will work just when I resize window, for example when I decrease width of browser or by opening console of browser.

• Default view
• When window size will change by opening console
• When window size will change directly

What should I do to fix this or it is a bug in vuelayer?

PS: It works fine on mobile devices.

[ghettovoice]

Hello @thantez , I don't see any problems with your code except that you should also wrap vl-feature inside vl-source-vector inside vl-layer-vector.

<vl-layer-vector>
    <vl-source-vector>
          <vl-feature id="point">
              <vl-geom-point :coordinates="staticCenter"></vl-geom-point>

              <vl-style-box>
                <vl-style-icon :src="require('@/assets/images/map_marker.png')" :scale="0.08"></vl-style-icon>
              </vl-style-box>
          </vl-feature>
     </vl-source-vector>
</vl-layer-vector>

without wrapping vl-source-vector , vl-feature components are adding to the default layer in the vl-map.

But actually this shouldn't be a reason to your issue. Usually such problems occurs when vl-map parent element was hidden at the render time, so underlying canvas had incorrect dimensions. For example when vl-map is used inside modal window, after the window opened and have final size, map size should be updated with this.$refs.mapRef.updateSize().

However I see zoom controls on the first screen. Can you make reproduce demo? And which vuelayers version do you use?

[thantez]

I made a repository as demo: https://github.com/thantez/vuelayer-demo.git Main problem is in Event.vue inside views, when I want to use b-tab (that it is for buefy) this issue will be happening! When I put vuelayer's map on first b-tab-item it will work well but when it is on second tab, issue will appear.

[ghettovoice]

Ok, now I see. This is exactly the case I described above, but instead of modal win you have tab. Second tab at the start is not displayed, so map canvas gets display: none at the start. To fix this you need to refresh map size after tab activation.

There is a patch file for your demo repo 0001-Update-map-size-on-tab-switch.patch.txt

[thantez]

Yes. It works. Thank you.