diff --git a/web/client/actions/layers.js b/web/client/actions/layers.js index 5086a7125a..d55d4ae998 100644 --- a/web/client/actions/layers.js +++ b/web/client/actions/layers.js @@ -110,10 +110,11 @@ function layerLoading(layerId) { }; } -function layerLoad(layerId) { +function layerLoad(layerId, error) { return { type: LAYER_LOAD, - layerId: layerId + layerId, + error }; } diff --git a/web/client/components/map/leaflet/Map.jsx b/web/client/components/map/leaflet/Map.jsx index 2d0f591c45..44528debe2 100644 --- a/web/client/components/map/leaflet/Map.jsx +++ b/web/client/components/map/leaflet/Map.jsx @@ -130,12 +130,16 @@ let LeafletMap = React.createClass({ if (event && event.layer && event.layer.on ) { // TODO check event.layer.on is a function // Needed to fix GeoJSON Layer neverending loading + let hadError = false; if (!(event.layer.options && event.layer.options.hideLoading)) { this.props.onLayerLoading(event.layer.layerId); } - event.layer.on('loading', (loadingEvent) => { this.props.onLayerLoading(loadingEvent.target.layerId); }); - event.layer.on('load', (loadEvent) => { this.props.onLayerLoad(loadEvent.target.layerId); }); - event.layer.on('tileerror', (errorEvent) => { this.props.onLayerError(errorEvent.target.layerId); }); + event.layer.on('loading', (loadingEvent) => { + hadError = false; + this.props.onLayerLoading(loadingEvent.target.layerId); + }); + event.layer.on('load', (loadEvent) => { this.props.onLayerLoad(loadEvent.target.layerId, hadError); }); + event.layer.on('tileerror', (errorEvent) => { hadError = true; this.props.onLayerError(errorEvent.target.layerId); }); } }); diff --git a/web/client/components/map/openlayers/Layer.jsx b/web/client/components/map/openlayers/Layer.jsx index 0e79c8210f..2d7a5154c7 100644 --- a/web/client/components/map/openlayers/Layer.jsx +++ b/web/client/components/map/openlayers/Layer.jsx @@ -19,6 +19,7 @@ const OpenlayersLayer = React.createClass({ type: React.PropTypes.string, options: React.PropTypes.object, onLayerLoading: React.PropTypes.func, + onLayerError: React.PropTypes.func, onLayerLoad: React.PropTypes.func, position: React.PropTypes.number, observables: React.PropTypes.array, @@ -135,10 +136,11 @@ const OpenlayersLayer = React.createClass({ this.props.onLayerLoad(options.id); } }); - this.layer.getSource().on('tileloaderror', () => { + this.layer.getSource().on('tileloaderror', (event) => { this.tilestoload--; + this.props.onLayerError(options.id); if (this.tilestoload === 0) { - this.props.onLayerLoad(options.id); + this.props.onLayerLoad(options.id, {error: event}); } }); } diff --git a/web/client/components/map/openlayers/Map.jsx b/web/client/components/map/openlayers/Map.jsx index bd72629ccc..73e7c13801 100644 --- a/web/client/components/map/openlayers/Map.jsx +++ b/web/client/components/map/openlayers/Map.jsx @@ -31,6 +31,7 @@ var OpenlayersMap = React.createClass({ onMouseMove: React.PropTypes.func, onLayerLoading: React.PropTypes.func, onLayerLoad: React.PropTypes.func, + onLayerError: React.PropTypes.func, resize: React.PropTypes.number, measurement: React.PropTypes.object, changeMeasurementState: React.PropTypes.func, @@ -49,6 +50,7 @@ var OpenlayersMap = React.createClass({ projection: 'EPSG:3857', onLayerLoading: () => {}, onLayerLoad: () => {}, + onLayerError: () => {}, resize: 0, registerHooks: true, interactive: true @@ -269,6 +271,7 @@ var OpenlayersMap = React.createClass({ map: map, mapId: this.props.id, onLayerLoading: this.props.onLayerLoading, + onLayerError: this.props.onLayerError, onLayerLoad: this.props.onLayerLoad, projection: this.props.projection, onInvalid: this.props.onInvalidLayer diff --git a/web/client/reducers/layers.js b/web/client/reducers/layers.js index 5326c798f0..371b8e910a 100644 --- a/web/client/reducers/layers.js +++ b/web/client/reducers/layers.js @@ -126,7 +126,7 @@ function layers(state = [], action) { } case LAYER_LOAD: { const newLayers = (state.flat || []).map((layer) => { - return layer.id === action.layerId ? assign({}, layer, {loading: false, loadingError: false}) : layer; + return layer.id === action.layerId ? assign({}, layer, {loading: false, loadingError: action.error}) : layer; }); return assign({}, state, {flat: newLayers}); }