0

I am desperately trying to solve this problem. I hope you can shed some light on it.

I have these components(Parent1, Paren2, LeafletMap).

Parent1 includes Parent2 4 times. Parent2 includes leafletMap. So this means leafletmap component is rendered 4 times.

Parent1 passes some data to Parent2 and Parent2 does some modifications and passes different kind of data for leafletMap.

Now, In Parent1 component, where I include Parent2, I have 4 tabs. IN each tab, I include the Parent2 component.

Now, Parent2 gets data as markers and I pass those markers to Parent2's included component - leafletmap. LeafletMap component does this as soon as it gets the data.

let points, bounds;
      points = bounds = [];
      for(let i=0; i < this.markers.length; i++){
        if(!this.map.hasLayer(this.markers[i])){
          this.map.addLayer(this.markers[i]);
          let p = new L.latLng(this.markers[i].getLatLng().lat, this.markers[i].getLatLng().lng);
          points.push(p);
          this.oms.addMarker(this.markers[i])
        };
      }
      this.map.fitBounds([points]);

Error-Question: The thing is this fitbound works perfectly for the first tab and shows the map correctly with the correct zoom. but as soon as I change the tab, the map looks like the blue thing. I tried to console log map's zoom property after I made fitbounds, and for the first tab, it prints 10, and for all other tabs, it prints 0. Why is that?

I am using vue.js, vuetify for tabs and leaflet for maps.

Nika Kurashvili
  • 6,006
  • 8
  • 57
  • 123
  • 1
    Most probably https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map – ghybs Jun 23 '19 at 19:51
  • Difficult to answer without having the code. We could help you more if you post your code in a jsfiddle or similar. – Istopopoki Jun 24 '19 at 08:43

0 Answers0