diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/css/eventmap.css | 24 | ||||
| -rw-r--r-- | web/css/leaflet.search.css | 8 | ||||
| -rw-r--r-- | web/images/loader.gif | bin | 0 -> 1849 bytes | |||
| -rw-r--r-- | web/images/search-icon-mobile.png | bin | 0 -> 3959 bytes | |||
| -rw-r--r-- | web/images/search-icon.png | bin | 0 -> 3838 bytes | |||
| -rw-r--r-- | web/index.html | 7 | ||||
| -rw-r--r-- | web/js/eventmap.js | 18 |
7 files changed, 48 insertions, 9 deletions
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 Binary files differnew file mode 100644 index 0000000..d3ef195 --- /dev/null +++ b/web/images/loader.gif diff --git a/web/images/search-icon-mobile.png b/web/images/search-icon-mobile.png Binary files differnew file mode 100644 index 0000000..920fa27 --- /dev/null +++ b/web/images/search-icon-mobile.png diff --git a/web/images/search-icon.png b/web/images/search-icon.png Binary files differnew file mode 100644 index 0000000..231df74 --- /dev/null +++ b/web/images/search-icon.png 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 @@ <link rel="stylesheet" href="css/eventmap.css" /> </head> <body> + <div id="overlay"> + <p class="huge">Loading, please wait...</p> + <p id="progress">If this message persists, you don't seem to have javascript active.</p> + </div> <div id="main"> <div id="map"></div> </div> - <div id="sidebar"> - <p>Sidebar</p> - </div> <script src="js/jquery.min.js"></script> <script src="js/leaflet.js"></script> <script src="js/leaflet.contextmenu.js"></script> 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."); }); }); }); |
