1

I have a vue.js app.

I have vuetify tabs. 4 of them.

I have one component which has those 4 tabs in it. and each of those tabs contain the same component called leafletmap and each of 4 tabs pass different information to that leafletmap component. so leafletmap component is written 4 times in that one component.

leafletmap component's mounted() hook initializes the map and also uses prop data to show those points on map. I also use fitbounds.

What happens: When loading the page, the first tab shows everything correctly. fitBounds work perfectly, but if I change the tab, fitBounds don't seem to work and map is shown as fitBounds() shows whole earth (if map is first hidden and then shown) something like this. I don't know why this happens.

let bounds = new L.LatLngBounds();
var loc = new L.LatLng(parseFloat(newVal[key][i].latitude), parseFloat(newVal[key][i].longitude));
              var marker = new L.Marker(loc, {
                icon:motionIcon,
                zIndexOffset: runningIndex,
              });

              bounds.extend(loc);
              this.map.fitBounds(bounds, {

            });
Nika Kurashvili
  • 6,006
  • 8
  • 57
  • 123
  • 2
    99% chance you are in that case: https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map/36257493#36257493 – ghybs Jun 04 '19 at 01:51
  • I am using this. but my situation is different. on another tab map is showing but zoom is so small like 2-3. the first tab's zoom is 11 and fitbounds make it to 15, but on other tabs it gets 2-3 and fitbounds don't make it work. if I delete fitbounds at all, it works fine on all tabs. window resizing has no effect in this situation. – Nika Kurashvili Jun 04 '19 at 01:55
  • 1
    Then please provide more details in your question, in particular an [MRE](https://stackoverflow.com/help/minimal-reproducible-example). Otherwise it is almost impossible to tell what is happening from the little code shown. – ghybs Jun 04 '19 at 02:26

0 Answers0