terriajs
Version:
Geospatial data visualization platform.
222 lines (214 loc) • 8.1 kB
JSX
import classNames from "classnames";
import createReactClass from "create-react-class";
import { observer } from "mobx-react";
import PropTypes from "prop-types";
import React from "react";
import { withTranslation } from "react-i18next";
import FeatureDetection from "terriajs-cesium/Source/Core/FeatureDetection";
import ActionBarPortal from "../ActionBar/ActionBarPortal";
import BottomDock from "../BottomDock/BottomDock";
import { MapCredits } from "../Credits";
import Loader from "../Loader";
import BottomLeftBar from "../Map/BottomLeftBar/BottomLeftBar";
import DistanceLegend from "../Map/Legend/DistanceLegend";
import LocationBar from "../Map/Legend/LocationBar";
import MenuBar from "../Map/MenuBar";
import MapNavigation from "../Map/Navigation/MapNavigation";
import TerriaViewerWrapper from "../Map/TerriaViewerWrapper";
import SlideUpFadeIn from "../Transitions/SlideUpFadeIn/SlideUpFadeIn";
import Styles from "./map-column.scss";
import Toast from "./Toast";
import { withViewState } from "./ViewStateContext";
const chromeVersion = FeatureDetection.chromeVersion();
/**
* Right-hand column that contains the map, controls that sit over the map and sometimes the bottom dock containing
* the timeline and charts.
*/
const MapColumn = observer(
createReactClass({
displayName: "MapColumn",
propTypes: {
viewState: PropTypes.object.isRequired,
customFeedbacks: PropTypes.array.isRequired,
allBaseMaps: PropTypes.array.isRequired,
animationDuration: PropTypes.number.isRequired,
customElements: PropTypes.object.isRequired,
t: PropTypes.func.isRequired
},
getInitialState() {
return {};
},
render() {
const { customElements } = this.props;
const { t } = this.props;
// TODO: remove? see: https://bugs.chromium.org/p/chromium/issues/detail?id=1001663
const isAboveChrome75 =
chromeVersion && chromeVersion[0] && Number(chromeVersion[0]) > 75;
const mapCellClass = classNames(Styles.mapCell, {
[Styles.mapCellChrome]: isAboveChrome75
});
return (
<div
className={classNames(Styles.mapInner, {
[Styles.mapInnerChrome]: isAboveChrome75
})}
>
<div className={Styles.mapRow}>
<div
className={classNames(mapCellClass, Styles.mapCellMap)}
ref={this.newMapCell}
>
<If condition={!this.props.viewState.hideMapUi}>
<div
css={`
${this.props.viewState.explorerPanelIsVisible &&
"opacity: 0.3;"}
`}
>
<MenuBar
allBaseMaps={this.props.allBaseMaps}
menuItems={customElements.menu}
menuLeftItems={customElements.menuLeft}
animationDuration={this.props.animationDuration}
elementConfig={this.props.viewState.terria.elements.get(
"menu-bar"
)}
/>
<MapNavigation
terria={this.props.viewState.terria}
viewState={this.props.viewState}
navItems={customElements.nav}
elementConfig={this.props.viewState.terria.elements.get(
"map-navigation"
)}
/>
</div>
</If>
<div
className={Styles.mapWrapper}
style={{
height: this.state.height || "100%"
}}
>
<TerriaViewerWrapper
terria={this.props.viewState.terria}
viewState={this.props.viewState}
/>
</div>
<If condition={!this.props.viewState.hideMapUi}>
<BottomLeftBar
terria={this.props.viewState.terria}
viewState={this.props.viewState}
/>
<ActionBarPortal
show={this.props.viewState.isActionBarVisible}
/>
<SlideUpFadeIn isVisible={this.props.viewState.isMapZooming}>
<Toast>
<Loader
message={t("toast.mapIsZooming")}
textProps={{
style: {
padding: "0 5px"
}
}}
/>
</Toast>
</SlideUpFadeIn>
<MapCredits
hideTerriaLogo={
!!this.props.viewState.terria.configParameters
.hideTerriaLogo
}
credits={this.props.viewState.terria.configParameters.extraCreditLinks?.slice()}
currentViewer={
this.props.viewState.terria.mainViewer.currentViewer
}
/>
<div className={Styles.locationDistance}>
<LocationBar
terria={this.props.viewState.terria}
mouseCoords={
this.props.viewState.terria.currentViewer.mouseCoords
}
/>
<DistanceLegend terria={this.props.viewState.terria} />
</div>
</If>
{/* TODO: re-implement/support custom feedbacks */}
{/* <If
condition={
!this.props.customFeedbacks.length &&
this.props.viewState.terria.configParameters.feedbackUrl &&
!this.props.viewState.hideMapUi
}
>
<div
className={classNames(Styles.feedbackButtonWrapper, {
[Styles.withTimeSeriesControls]: defined(
this.props.viewState.terria.timelineStack.top
)
})}
>
<FeedbackButton
viewState={this.props.viewState}
btnText={t("feedback.feedbackBtnText")}
/>
</div>
</If> */}
<If
condition={
this.props.customFeedbacks.length &&
this.props.viewState.terria.configParameters.feedbackUrl &&
!this.props.viewState.hideMapUi
}
>
<For
each="feedbackItem"
of={this.props.customFeedbacks}
index="i"
>
<div key={i}>{feedbackItem}</div>
</For>
</If>
</div>
<If
condition={
this.props.viewState.terria.configParameters.printDisclaimer
}
>
<div className={classNames(Styles.mapCell, "print")}>
<a
className={Styles.printDisclaimer}
href={
this.props.viewState.terria.configParameters.printDisclaimer
.url
}
>
{
this.props.viewState.terria.configParameters.printDisclaimer
.text
}
</a>
</div>
</If>
</div>
<If condition={!this.props.viewState.hideMapUi}>
<div className={Styles.mapRow}>
<div className={mapCellClass}>
<BottomDock
terria={this.props.viewState.terria}
viewState={this.props.viewState}
elementConfig={this.props.viewState.terria.elements.get(
"bottom-dock"
)}
/>
</div>
</div>
</If>
</div>
);
}
})
);
export default withTranslation()(withViewState(MapColumn));