From 58135d49bfd435ea08713adee5f8179913bbae10 Mon Sep 17 00:00:00 2001 From: Christian Franke Date: Thu, 12 Dec 2013 16:42:24 +0100 Subject: Add icons for search, loading screen --- web/css/eventmap.css | 24 ++++++++++++++++++++++++ web/css/leaflet.search.css | 8 ++++---- web/images/loader.gif | Bin 0 -> 1849 bytes web/images/search-icon-mobile.png | Bin 0 -> 3959 bytes web/images/search-icon.png | Bin 0 -> 3838 bytes web/index.html | 7 ++++--- web/js/eventmap.js | 18 ++++++++++++++++-- 7 files changed, 48 insertions(+), 9 deletions(-) create mode 100644 web/images/loader.gif create mode 100644 web/images/search-icon-mobile.png create mode 100644 web/images/search-icon.png (limited to 'web') diff --git a/web/css/eventmap.css b/web/css/eventmap.css index e2d1d24..603e90f 100644 --- a/web/css/eventmap.css +++ b/web/css/eventmap.css @@ -5,6 +5,30 @@ html, body { overflow: hidden; } +#overlay { + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + z-index: 1000000; + background-color: rgba(0,0,0,0.85); + text-align: center; + font-family: sans-serif; +} + +#overlay p { + color: #ffffee; +} + +p.huge { + font-size: 300%; +} + +#progress { + font-size: 120%; +} + #main, #map { height: 100%; z-index: 0; diff --git a/web/css/leaflet.search.css b/web/css/leaflet.search.css index 186e4cc..2ed417f 100644 --- a/web/css/leaflet.search.css +++ b/web/css/leaflet.search.css @@ -41,7 +41,7 @@ margin:3px 0 3px 3px; } .leaflet-control-search.search-load .search-input { - background: url('images/loader.gif') no-repeat center right #fff; + background: url('../images/loader.gif') no-repeat center right #fff; } .leaflet-control-search.search-load .search-cancel { visibility:hidden; @@ -53,7 +53,7 @@ position:absolute; right:22px; margin:3px 0; - background: url('images/search-icon.png') no-repeat 0 -46px; + background: url('../images/search-icon.png') no-repeat 0 -46px; text-decoration:none; filter: alpha(opacity=80); opacity: 0.8; @@ -77,11 +77,11 @@ float:left; width:26px; height:26px; - background: url('images/search-icon.png') no-repeat 2px 2px; + background: url('../images/search-icon.png') no-repeat 2px 2px; border-radius:4px; } .leaflet-control-search .search-button:hover { - background: url('images/search-icon.png') no-repeat 2px -22px; + background: url('../images/search-icon.png') no-repeat 2px -22px; } .leaflet-control-search .search-tooltip { position:absolute; diff --git a/web/images/loader.gif b/web/images/loader.gif new file mode 100644 index 0000000..d3ef195 Binary files /dev/null and b/web/images/loader.gif differ diff --git a/web/images/search-icon-mobile.png b/web/images/search-icon-mobile.png new file mode 100644 index 0000000..920fa27 Binary files /dev/null and b/web/images/search-icon-mobile.png differ diff --git a/web/images/search-icon.png b/web/images/search-icon.png new file mode 100644 index 0000000..231df74 Binary files /dev/null and b/web/images/search-icon.png differ diff --git a/web/index.html b/web/index.html index fbe52c0..56fa051 100644 --- a/web/index.html +++ b/web/index.html @@ -10,12 +10,13 @@ +

Loading, please wait...

If this message persists, you don't seem to have javascript active.

- diff --git a/web/js/eventmap.js b/web/js/eventmap.js index 376cba5..ac83f74 100644 --- a/web/js/eventmap.js +++ b/web/js/eventmap.js @@ -28,6 +28,8 @@ function eventmap_send_update() { data: JSON.stringify(update_doc), processData: false, dataType: 'json' + }).fail(function(){ + alert("Couldn't send update to server. It is not saved."); }); } @@ -235,6 +237,7 @@ function marker_labels_calc_nohide(e) { } $(function() { + $("#progress").html("Initializing map..."); map = L.map('map', { center: new L.LatLng(70,-50), contextmenu: true, @@ -318,7 +321,9 @@ $(function() { /* update will be sent by "rename_marker" */ }); + $("#progress").html("Retrieving layer info..."); $.getJSON('js/layers.json', function(data) { + $("#progress").html("Creating layers..."); var first_layer = true; $.each(data, function(layer_index, layer_info) { var layer_path; @@ -352,10 +357,19 @@ $(function() { }); layer_control.addTo(map); + $("#progress").html("Loading marker info..."); $.ajax({ url: 'api/markers/get' - }).done(eventmap_process_update).fail(function() { - alert("Couldn't load marker info from server!"); + }).done(function(data) { + $("#progress").html("Processing marker info..."); + eventmap_process_update(data); + $("#progress").html("Loading complete."); + setTimeout(function() { + $("#overlay").hide(); + }, 300); + }).fail(function() { + $("#progress").html("Error loading marker info," + + " please retry."); }); }); }); -- cgit v1.2.1