diff --git a/app/app.css b/app/app.css
index cc8ebcc..2971316 100644
--- a/app/app.css
+++ b/app/app.css
@@ -28,6 +28,20 @@ html,body{
 	color: #fff;
 }
 
+#online-offline-pane {
+  position: absolute;
+  top: 25px;
+  height: 35px;
+  line-height: 35px;
+  width: 100%;
+	background-color: white;
+  text-align: center;
+  font-size: 17px;
+  color: white;
+  transition: all 0.5s ease-in-out;
+  z-index: 1;
+}
+
 .buttons {
     color: white;
     font-size: 35px;
diff --git a/app/app.js b/app/app.js
index d631b9b..2db1c6a 100644
--- a/app/app.js
+++ b/app/app.js
@@ -14,6 +14,7 @@ var way;
 var myLocationMarker = null;
 var myLocationCircle = null;
 var poiData = null;
+var wasOnline = false;
 
 function initMap(loc, zoom) {
 
@@ -47,6 +48,10 @@ function initMap(loc, zoom) {
 	var attribution = 'Map data ' + osmAttr + ', Imagery &copy; <a href="http://mapbox.com" target="_blank">Mapbox</a>';
 
 	tiles = new L.TileLayer(tileURL, {maxZoom: 18, attribution: attribution, detectRetina: true});
+
+	tiles.addEventListener('tileload', goOnline);
+	tiles.addEventListener('tileerror', goOffline);
+
 	map.addLayer(tiles);
 	map.addLayer(markerlayer);
         map.addLayer(waylayer);
@@ -110,6 +115,8 @@ function loadPOIs(manualRefresh) {
 	$.getJSON(URL)
 	.done( function(data) {
 
+		goOnline();
+
 
         //remove loading indicator
         $("#loading").css("visibility", "hidden");
@@ -199,6 +206,10 @@ function loadPOIs(manualRefresh) {
 	.fail( function(jqxhr, textStatus, error ) {
 		var err = textStatus + ', ' + error;
 		console.log( "Request Failed: " + err);
+
+		$('#loading').css("visibility", "hidden");
+
+    goOffline();
 	});
 }
 
@@ -380,9 +391,41 @@ $(function() {
       hideInfo();
     });
 
-
+	window.addEventListener('online', goOnline);
+	window.addEventListener('offline', goOffline);
 });
 
+function goOnline() {
+	if (wasOnline === false) {
+		$("#online-offline-pane").text("You are online.");
+		$("#online-offline-pane").css("background-color", "green");
+		animateOnlineOfflinePane();
+		wasOnline = true;
+	}
+}
+
+function goOffline(display, connectionError) {
+	wasOnline = false;
+	$("#online-offline-pane").text("You are having connection problems.");
+	$("#online-offline-pane").css("background-color", "red");
+	animateOnlineOfflinePane();
+}
+
+function animateOnlineOfflinePane() {
+	if (typeof timeout1 !== 'undefined' && typeof timeout2 !== 'undefined') {
+		//Clear previous pane animations to avoid conflicts for repeated animations
+		window.clearTimeout(timeout1);
+		window.clearTimeout(timeout2);
+	}
+	var timeout1 = window.setTimeout(function() {
+		$("#online-offline-pane").css("transform", "translateY(35px)");
+		//Pause of 500 seconds to allow time for background-color to be applied
+	}, 500);
+	var timeout2 = window.setTimeout(function() {
+		$("#online-offline-pane").css("transform", "translateY(3px)");
+	}, 2500);
+}
+
 function locateMe() {
 	map.locate({setView: true, maxZoom: 16});
     mapDragged = false;
diff --git a/index.html b/index.html
index 4b943bc..7d9cd59 100644
--- a/index.html
+++ b/index.html
@@ -42,7 +42,8 @@
 
   IS</span>
 </div>
-
+<div id="online-offline-pane">
+</div>
 <div id="loading"><i class="fa fa-spinner fa-spin fa-large"></i> searching for you...</div>
 <div id="info_overlay">
 	<h1>About this project</h1>
diff --git a/index_mobile.html b/index_mobile.html
index 4b943bc..7d9cd59 100644
--- a/index_mobile.html
+++ b/index_mobile.html
@@ -42,7 +42,8 @@
 
   IS</span>
 </div>
-
+<div id="online-offline-pane">
+</div>
 <div id="loading"><i class="fa fa-spinner fa-spin fa-large"></i> searching for you...</div>
 <div id="info_overlay">
 	<h1>About this project</h1>