material-ui card with openlayers map inside? - reactjs

Question

I'm trying to place an openlayers map inside a material-ui card component. I've tried placing a div containing the map inside the card text and the card media sections.
Can anyone help me figure out the correct way to put a map inside the card?
import React, {PropTypes} from 'react'
import {connect} from 'react-redux'
import 'openlayers/dist/ol.css';
import ol from 'openlayers';
import {Card, CardActions, CardHeader, CardMedia} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';
import Paper from 'material-ui/Paper'
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import '../components/tap_events'
import styles from '../styles/ExportInfo.css'
import {updateExportInfo} from '../actions/exportsActions.js';
class ExportInfo extends React.Component {
constructor(props) {
super(props)
getChildContext() {
return {muiTheme: getMuiTheme(baseTheme)};
}
componentDidMount() {
this._initializeOpenLayers()
}
_initializeOpenLayers() {
const scaleStyle = {
background: 'white',
};
this._map = new ol.Map({
controls: [
new ol.control.ScaleLine(),
new ol.control.Attribution({
collapsible: false,
collapsed: false,
}),
new ol.control.Zoom({
className: styles.olZoom
})
],
interactions: ol.interaction.defaults({
keyboard: false,
altShiftDragRotate: false,
pinchRotate: false
}),
layers: [
// Order matters here
new ol.layer.Tile({
source: new ol.source.OSM()
}),
],
target: 'infoMap',
view: new ol.View({
projection: "EPSG:3857",
center: [110, 0],
zoom: 2.5,
minZoom: 2.5,
maxZoom: 22,
})
});
}
render() {
const providers = this.props.providers;
console.log("this is it"+providers[0])
return (
<div className={styles.wholeDiv}>
<div className={styles.root}>
<Paper className={styles.paper} zDepth={2} rounded>
<div className={styles.mapCard}>
<Card >
<CardHeader
title="Selected Area of Interest"
actAsExpander={true}
showExpandableButton={true}
/>
<CardMedia expandable={true}>
<div id="infoMap" className={styles.map} ref="olmap">
</div>
</CardMedia>
</Card>
</div>
</Paper>
</div>
</div>
)
}
}
ExportInfo.childContextTypes = {
muiTheme: React.PropTypes.object.isRequired,
}
export default (ExportInfo)

Answer 1

The id of your div (summaryMap) doesn't match target field in olmap configuration ('infoMap') both of them should be the same.
Additionally instead of calling _initializeOpenLayers in componentDidMount. I would recommend using ref callback and initialize target with actual control instead of string.
<div id="summaryMap" className={styles.map} ref={olmapDiv => this. _initializeOpenLayers(olmapDiv)}>
</div>