React.js and Mapbox: mapbox map not rendering properly when using react.js

Question

I'm learning to use both react and mapbox,but am struggling with why my mapbox map is not rendering properly when loaded through React. When I load it normally (without React.js), there is no problem, as this following code works and the map appears normally:

<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css"/>

<div> id="map"></div>

    <script>                
    var map = L.mapbox.map('map', 'blabla.blabla').setView([lat, long], 9);
    </script>

But when I do it the following way, the map often doesn't appear at all, or when it does, I see just a portion of it in the top left of the div.

<script src="path/to/react.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css"/>

<div id="react-content">
    <script src="path/to/react/content.js'></script>
</div>

//now inside react/content.js, there is a mapbox component inside an outer component. I'm leaving out the rest of the code to save space, and I believe that I am rendering the OuterComponent and the MapBoxMap component correctly inside that.

var MapBoxMap = React.createClass({
    componentDidMount: function() {
        L.mapbox.accessToken = this.props.accessToken;
        var map = L.mapbox.map(this.getDOMNode(), this.props.mapId)
            .setView([15, -105], 9);            
    },
    render: function() {
        return (
                <div id="map"></div>
        );
    }
});

Doing things like zooming, or opening the chrome developer tools seems to make the map appear sometimes. I don't know what is going on. Is the component not mounted properly when I attempt to render the map? I thought that is what componentDidMount was supposed to take care of? I would really appreciate any insight! Alos, this map is being rendered inside some Zurb Foundation elements, so I don't know if that makes a difference?

Those 'zurb foundation elements' probably have a zero-height until after our MapBoxMap is rendered. When you open the developer tools, you're resizing your window, which triggers the map to re-render properly. You're using your componentDidMount() properly, but you may want to either set the #react-content height explicitly, or refresh your map once the other components load. — Josh from Qaribou
side note: JSX is XML, not HTML, so you don't need a separate end tag. <div id="map" /> will suffice. — Josh from Qaribou

iH8 iH8 · Accepted Answer · 2015-03-08T20:57:17

You're missing the related CSS? You always need to set the height of the element:

html, body, #map {
    height: 100%;
}

I am unable to test because of React but it sounds like the map is unable to get the correct dimensions from the element. That usually happens if you don't set the correct CSS or the element has display: none; If setting the correct CSS doesn't work for you can try invalidating the size so the map will reset itself. L.mapbox.Map has a invalidateSize method you can call, see:

http://leafletjs.com/reference.html#map-invalidatesize

React.js and Mapbox: mapbox map not rendering properly when using react.js

1 Answers