diff --git a/app/component/map/tile-layer/TileLayerContainer.js b/app/component/map/tile-layer/TileLayerContainer.js index a623b86e58..bb4f835c61 100644 --- a/app/component/map/tile-layer/TileLayerContainer.js +++ b/app/component/map/tile-layer/TileLayerContainer.js @@ -86,14 +86,10 @@ const LocationPopupWithContext = provideContext(LocationPopup, { config: PropTypes.object.isRequired, }); -const PopupOptions = { - offset: [110, 16], - closeButton: false, - minWidth: 260, - maxWidth: 260, - autoPanPaddingTopLeft: [5, 125], - className: 'popup', - ref: 'popup', +const initialState = { + selectableTargets: undefined, + coords: undefined, + showSpinner: true, }; // TODO eslint doesn't know that TileLayerContainer is a react component, @@ -118,8 +114,8 @@ class TileLayerContainer extends GridLayer { }; state = { - stops: undefined, - coords: undefined, + ...initialState, + currentTime: this.context.getStore('TimeStore').getCurrentTime().unix(), }; componentWillMount() { @@ -142,6 +138,8 @@ class TileLayerContainer extends GridLayer { let activeTiles; if (e.currentTime) { + this.setState({ currentTime: e.currentTime.unix(), showSpinner: false }); + /* eslint-disable no-underscore-dangle */ activeTiles = lodashFilter( this.leafletElement._tiles, @@ -177,6 +175,19 @@ class TileLayerContainer extends GridLayer { /* eslint-enable no-underscore-dangle */ }; + onPopupclose = () => this.setState(initialState); + + PopupOptions = { + offset: [110, 16], + closeButton: false, + minWidth: 260, + maxWidth: 260, + autoPanPaddingTopLeft: [5, 125], + className: 'popup', + ref: 'popup', + onClose: this.onPopupclose, + }; + createLeafletElement(props) { const Layer = L.GridLayer.extend({ createTile: this.createTile }); const leafletElement = new Layer(this.getOptions(props)); @@ -207,13 +218,15 @@ class TileLayerContainer extends GridLayer { this.setState({ selectableTargets, coords, + showSpinner: true, }); }; return tile.el; }; - selectRow = option => this.setState({ selectableTargets: [option] }); + selectRow = option => + this.setState({ selectableTargets: [option], showSpinner: true }); render() { let popup = null; @@ -236,20 +249,14 @@ class TileLayerContainer extends GridLayer { this.state.selectableTargets[0].feature.properties.stops ? new TerminalRoute({ terminalId: id, - currentTime: this.context - .getStore('TimeStore') - .getCurrentTime() - .unix(), + currentTime: this.state.currentTime, }) : new StopRoute({ stopId: id, - currentTime: this.context - .getStore('TimeStore') - .getCurrentTime() - .unix(), + currentTime: this.state.currentTime, }) } - renderLoading={loadingPopup} + renderLoading={this.state.showSpinner ? loadingPopup : undefined} renderFetched={data => } /> @@ -327,7 +334,7 @@ class TileLayerContainer extends GridLayer { ); } popup = ( - + {contents} ); @@ -335,7 +342,7 @@ class TileLayerContainer extends GridLayer { popup = ( @@ -350,7 +357,7 @@ class TileLayerContainer extends GridLayer { popup = (