Closed thantez closed 3 years ago
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?
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.
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
Yes. It works. Thank you.
Hi. I wrote this code to show the location of some places on the map by a marker:
But it will work just when I resize window, for example when I decrease width of browser or by opening console of browser.
What should I do to fix this or it is a bug in
vuelayer
?PS: It works fine on mobile devices.