diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/cobrands/fixmystreet/assets.js | 7 | ||||
| -rw-r--r-- | web/js/map-OpenLayers.js | 34 |
2 files changed, 35 insertions, 6 deletions
diff --git a/web/cobrands/fixmystreet/assets.js b/web/cobrands/fixmystreet/assets.js index dd76a8e8f..e24e76495 100644 --- a/web/cobrands/fixmystreet/assets.js +++ b/web/cobrands/fixmystreet/assets.js @@ -306,6 +306,8 @@ fixmystreet.add_assets = function(options) { }; OpenLayers.Util.applyDefaults(lo, layer_options); asset_fault_layer = new OpenLayers.Layer.Vector("WFS", lo); + asset_fault_layer.events.register( 'loadstart', null, fixmystreet.maps.loading_spinner.show); + asset_fault_layer.events.register( 'loadend', null, fixmystreet.maps.loading_spinner.hide); asset_layer.fixmystreet.fault_layer = asset_fault_layer; } @@ -316,6 +318,11 @@ fixmystreet.add_assets = function(options) { asset_layer.events.register( 'loadend', asset_layer, layer_loadend); asset_layer.events.register( 'visibilitychanged', asset_layer, layer_visibilitychanged); fixmystreet.map.events.register( 'zoomend', asset_layer, check_zoom_message_visibility); + + // Make sure the user knows something is happening (some asset layers can be sllooowwww) + asset_layer.events.register( 'loadstart', null, fixmystreet.maps.loading_spinner.show); + asset_layer.events.register( 'loadend', null, fixmystreet.maps.loading_spinner.hide); + // Set up handlers for simply hovering over a street light marker var hover_feature_control = new OpenLayers.Control.SelectFeature( asset_layer, diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index 7f8ec1755..0f6cca2b5 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -229,6 +229,32 @@ $.extend(fixmystreet.utils, { } } fixmystreet.markers.redraw(); + }, + + /* Keep track of how many things are loading simultaneously, and only hide + * the loading spinner when everything has finished. + * This allows multiple layers to be loading at once without each layer + * having to keep track of the others or be responsible for manipulating + * the spinner in the DOM. + */ + loading_spinner: { + count: 0, + show: function() { + fixmystreet.maps.loading_spinner.count++; + if (fixmystreet.maps.loading_spinner.count > 0) { + // Show the loading indicator over the map + $('#loading-indicator').removeClass('hidden'); + $('#loading-indicator').attr('aria-hidden', false); + } + }, + hide: function() { + fixmystreet.maps.loading_spinner.count--; + if (fixmystreet.maps.loading_spinner.count <= 0) { + // Remove loading indicator + $('#loading-indicator').addClass('hidden'); + $('#loading-indicator').attr('aria-hidden', true); + } + } } }); @@ -542,6 +568,8 @@ $.extend(fixmystreet.utils, { fixmystreet.map.removePopup(fixmystreet.map.popups[0]); } }); + fixmystreet.markers.events.register( 'loadstart', null, fixmystreet.maps.loading_spinner.show); + fixmystreet.markers.events.register( 'loadend', null, fixmystreet.maps.loading_spinner.hide); var markers = fixmystreet.maps.markers_list( fixmystreet.pins, true ); fixmystreet.markers.addFeatures( markers ); @@ -851,9 +879,6 @@ OpenLayers.Protocol.FixMyStreet = OpenLayers.Class(OpenLayers.Protocol.HTTP, { use_page: false, read: function(options) { - // Show the loading indicator over the map - $('#loading-indicator').removeClass('hidden'); - $('#loading-indicator').attr('aria-hidden', false); // Pass the values of the category, status, and sort fields as query params options.params = options.params || {}; $.each({ filter_category: 'filter_categories', status: 'statuses', sort: 'sort' }, function(key, id) { @@ -881,9 +906,6 @@ OpenLayers.Protocol.FixMyStreet = OpenLayers.Class(OpenLayers.Protocol.HTTP, { /* Pan data handler */ OpenLayers.Format.FixMyStreet = OpenLayers.Class(OpenLayers.Format.JSON, { read: function(json, filter) { - // Remove loading indicator - $('#loading-indicator').addClass('hidden'); - $('#loading-indicator').attr('aria-hidden', true); var obj; if (typeof json == 'string') { obj = OpenLayers.Format.JSON.prototype.read.apply(this, [json, filter]); |