0

I am building an application using Semantic UI and ReactJS. I am using a tab module to contain my map, which uses the Leaflet Javascript library to render the map.

The problem is that the tiles do not display correctly until the page is resized.

The is what I have tried:

MapComponent = React.createClass({
  componentDidMount() {
    let map = L.map('map')
    L.tileLayer.provider('Thunderforest.Outdoors').addTo(map)
    map.setView([lat, long], zoom)
    map.invalidateSize(false)
  }
}

Which did not seem to fix the problem.

I tried setting a timeout, like so:

MapComponent = React.createClass({
  componentDidMount() {
    let map = L.map('map')
    L.tileLayer.provider('Thunderforest.Outdoors').addTo(map)
    Meteor.setTimeout(() => {
      map.invalidateSize(false)
    }, 2000)
    map.setView([lat, long], zoom)
  }
})

Which sometimes worked by setting the timer to 2000, but sometimes it needed to be set to 5000, which is a bit crazy in my opinion.

From what I have read, calling the invalidateSize() function should fix the problem. Any help solving this problem would be greatly appreciated. Thank you.

user2840647
  • 1,236
  • 1
  • 13
  • 32

1 Answers1

2

Call invalidateSize once the tab containing your map becomes visible. In Semantic UI's tab module you can do that by using the onVisible callback:

Called after a tab becomes visible

http://semantic-ui.com/modules/tab.html#/settings

<div class="ui menu top">
    <a class="item" data-tab="map">Map</a>
</div>

$('.top.menu .item').tab({
    'onVisible': function () {
        // Do stuff
    }
});
iH8
  • 27,722
  • 4
  • 67
  • 76
  • Lets say that each tab is its own React component. Is there a way that I can call that jquery function if my menu is in one component, and my map view is in another component? – user2840647 Jan 01 '16 at 20:53
  • You can share the map instance via component state, see this question and answer: http://stackoverflow.com/questions/34337330/access-object-from-multiple-react-components – iH8 Jan 01 '16 at 20:57