From 97b6dd6dbb6f55fb35877e9ee229866678fcce55 Mon Sep 17 00:00:00 2001
From: Kevin Dungs <kevin@dun.gs>
Date: Mon, 17 Nov 2014 19:33:38 +0100
Subject: [PATCH] Add overlay for information.

---
 views/map.html | 35 ++++++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)
diff --git a/views/map.html b/views/map.html
index ac78794..11a76fc 100644
--- a/views/map.html
+++ b/views/map.html
@@ -6,12 +6,45 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>These3Words Map</title>
   <!-- Style -->
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
   <style type="text/css">
-    html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
+    html, body, #map-canvas {
+      height: 100%;
+      margin: 0;
+      padding: 0;
+    }
+
+    #overlay {
+      background: rgba(255, 255, 255, .5);
+      border-radius: 10px;
+      padding: 0;
+      position: absolute;
+      left: 10px;
+      bottom: 30px;
+      max-width: 300px;
+    }
+
+    #overlay h4 {
+      background: rgba(255, 255, 255, .75);
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+      padding: 10px;
+      margin: 0;
+    }
+
+    #overlay p {
+      padding: 10px;
+      margin: 0;
+    }
   </style>
 </head>
 <body>
   <div id="map-canvas"></div>
+  <div id="overlay">
+    <h4>{{ threewords }}</h4>
+    <p><strong>Lat:</strong> {{ lat }}</p>
+    <p><strong>Long:</strong> {{ lng }}</p>
+  </div>
   <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
   <script type="text/javascript">
     function initialize() {
