summaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
authorChristian Franke <nobody@nowhere.ws>2013-12-12 16:42:24 +0100
committerChristian Franke <nobody@nowhere.ws>2013-12-12 16:42:24 +0100
commit58135d49bfd435ea08713adee5f8179913bbae10 (patch)
tree2c0eeb6f1bc1bb596e9cf2204a15fbb804b50b79 /web
parentfb2bde41ac04ee93c4dd238dcb3e812ac2d15356 (diff)
Add icons for search, loading screen
Diffstat (limited to 'web')
-rw-r--r--web/css/eventmap.css24
-rw-r--r--web/css/leaflet.search.css8
-rw-r--r--web/images/loader.gifbin0 -> 1849 bytes
-rw-r--r--web/images/search-icon-mobile.pngbin0 -> 3959 bytes
-rw-r--r--web/images/search-icon.pngbin0 -> 3838 bytes
-rw-r--r--web/index.html7
-rw-r--r--web/js/eventmap.js18
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
new file mode 100644
index 0000000..d3ef195
--- /dev/null
+++ b/web/images/loader.gif
Binary files differ
diff --git a/web/images/search-icon-mobile.png b/web/images/search-icon-mobile.png
new file mode 100644
index 0000000..920fa27
--- /dev/null
+++ b/web/images/search-icon-mobile.png
Binary files differ
diff --git a/web/images/search-icon.png b/web/images/search-icon.png
new file mode 100644
index 0000000..231df74
--- /dev/null
+++ b/web/images/search-icon.png
Binary files 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 @@
<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.");
});
});
});