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 = (