Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import PropTypes from 'prop-types';
import React from 'react';
import Load from 'external-load';
import Loadable from 'react-loadable';
import CircularProgress from '@material-ui/core/CircularProgress';
// Children
import Map from './map';
// Utilities
import getWindowIsDefined from '../../../utilities/get-window-is-defined';
const Loading = () => (<div><CircularProgress /></div>);
const LoadableComponent = Loadable({
loader: () => import('./map'),
loading: Loading,
render(loaded, props) {
let Component = loaded.default;
return <Component {...props}/>
}
});
class MapBoxWrapper extends React.Component {
constructor(props) {
super(props);
this.state = {
mounted: false,
};
}
componentDidMount() {
Load.css('https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css')
.then(() => {
this.setState((prevState) => (
{
...prevState,
css: {
...prevState.css,
map: true,
},
}
));
})
.then(() => {
this.setState((prevState) => (
{
...prevState,
mounted: true,
}
));
})
.catch((error) => {
console.log(error);
});
}
render() {
const { businessName, latitude, longitude, zoom } = this.props;
const { mounted } = this.state;
const isWindowDefined = getWindowIsDefined();
if (latitude === -200 || longitude === -200) {
return null;
}
if (!mounted) {
return null;
}
if (isWindowDefined) {
return (
<LoadableComponent
businessName={businessName}
latitude={latitude}
longitude={longitude}
zoom={zoom}
/>
)
}
return null;
}
}
MapBoxWrapper.defaultProps = {
businessName: '',
latitude: -200,
longitude: -200,
zoom: 6,
};
MapBoxWrapper.propTypes = {
businessName: PropTypes.string,
latitude: PropTypes.number,
longitude: PropTypes.number,
zoom: PropTypes.number,
};
export default MapBoxWrapper;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.