Integrate the API into the App.

Very simple proof of concept for the moment.
Also the map is now click-able and the marker updates its label via the
API.

api.py

@@ -1,26 +0,0 @@
-import bottle
-from bottle import get, run, template
-
-import thesethreewords as these
-
-
-@get("/v1/hash/<lat:float>,<lng:float>.json")
-def latlng_to_hash(lat, lng):
-    try:
-        three = these.three_words((lat,lng))
-        six = these.six_words((lat,lng))
-        return {"three": three, "six": six}
-
-    except:
-        return template('index',
-                        err="Could not find location {}".format(threewords))
-
-@get('/v1/hash/<threewords>.json')
-def hash_to_latlng(threewords):
-    try:
-        lat,lng = these.decode(threewords)
-        return {"lat": lat, "lng": lng}
-        
-    except:
-        return template('index',
-                        err="Could not find location {}".format(threewords))

app.py

@@ -4,6 +4,7 @@ import bottle
 from bottle import (
     get,
     run,
+    static_file,
     template
 )
 
@@ -11,6 +12,11 @@ import thesethreewords as these
 import api as json_api
 
 
+@get('/static/<filename:path>')
+def serve_static(filename):
+    return static_file(filename, root='static')
+
+
 @get('/')
 def index():
     return template('index', err=None)
@@ -26,6 +32,27 @@ def showMap(threewords):
                         err="Could not find location {}".format(threewords))
 
 
+# API
+@get('/api/<lat:float>,<lng:float>')
+def latLngToHash(lat, lng):
+    try:
+        three = these.three_words((lat,lng))
+        six = these.six_words((lat,lng))
+        return {'three': three, 'six': six}
+    except:
+        return {}
+
+
+@get('/api/<threewords>')
+def hashToLatLng(threewords):
+    try:
+        lat,lng = these.decode(threewords)
+        return {"lat": lat, "lng": lng}
+    except:
+        return {}
+
+
+
 if __name__ == '__main__':
     run(host='localhost', port=8080)
 

static/css/style.css

@@ -0,0 +1,11 @@
+/** CSS for These3Words
+ * Some more information here.
+ * Or remove comment anyway because it's obvious.
+ */
+html,
+body,
+#map-canvas {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}

static/js/app.js

@@ -0,0 +1,72 @@
+var These3Words = (function() {
+  'use strict';
+
+  var apiGet = function(latLng, callback, callbackError) {
+    var request = new XMLHttpRequest();
+    request.open('GET', '/api/' + latLng.lat() + ',' + latLng.lng(), true);
+    request.onload = function() {
+      callback(request.status, JSON.parse(request.responseText));
+    };
+    if (typeof callbackError !== "function") {
+      request.onerror = function() { /* Don't handle errors. */};
+    } else {
+      request.onerror = callbackError;
+    }
+    request.send();
+  };
+
+  var defaultLat = 46.2323355675;
+  var defaultLng = 6.05541944504;
+  var defaultLabel = 'spitting-ripple-fontanel';
+
+  var Map = function(lat_, lng_, label_) {
+    this.lat = lat_ || defaultLat;
+    this.lng = lng_ || defaultLng;
+    this.label = label_ || defaultLabel;
+
+    this.mapCanvas = null;
+    this.map = null;
+    this.marker = null;
+  };
+
+  Map.prototype.init = function() {
+    var that = this;
+    var initMap = function() {
+      that.map = new google.maps.Map(that.mapCanvas, {
+        center: {lat: that.lat, lng: that.lng},
+        zoom: 14
+      });
+      that.marker = new google.maps.Marker({
+        position: {lat: that.lat, lng: that.lng},
+        map: that.map,
+        title: that.label
+      });
+
+      google.maps.event.addListener(that.map, 'click', function(evt) {
+        that.moveTo(evt.latLng);
+      });
+    };
+    this.mapCanvas = document.body.appendChild(document.createElement('div'));
+    this.mapCanvas.id = 'map-canvas';
+    google.maps.event.addDomListener(window, 'load', initMap);
+  };
+
+  Map.prototype.moveTo = function(latLng) {
+    var that = this;
+    apiGet(latLng, function(status, data) {
+      console.log(data);
+      if (status >= 200 && status < 400) {
+        that.lat = latLng.lat;
+        that.lng = latLng.lng;
+        that.label = data.three;
+        that.marker.setPosition(latLng);
+        that.marker.setTitle(that.label);
+      }
+    });
+  };
+  
+  
+  return {
+    Map: Map
+  };
+}());

views/index.html

@@ -7,11 +7,7 @@
   <title>These3Words Map</title>
   <!-- Style -->
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
-  <style>
+  <link rel="stylesheet" href="/static/css/style.css">
-    body {
-      padding-top: 40px;
-    }
-  </style>
 </head>
 <body>
   <div class="container">

views/map.html

@@ -3,33 +3,41 @@
 <head>
   <!-- Meta -->
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>These3Words</title>
-  <title>These3Words Map</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+  <meta name="application-name" content="These3Words">  
+  <meta name="author" content="Tim Head">  
+  <meta name="author" content="Kevin Dungs">  
+  <meta name="description" content="Unique, easy-to-remember names for locations in the world.">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <!-- OpenGraph -->
+  <meta property="og:title" content="These3Words">
+  <meta property="og:type" content="app.map">
+  <meta property="og:description" content="Unique, easy-to-remember names for locations in the world.">
+  <meta property="og:image" content="">
   <!-- Style -->
-  <style type="text/css">
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
-    html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
+  <link rel="stylesheet" href="/static/css/style.css">
-  </style>
 </head>
 <body>
-  <div id="map-canvas"></div>
+  <script src="https://maps.googleapis.com/maps/api/js"></script>
-  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
+  <script src="/static/js/app.js"></script>
-  <script type="text/javascript">
+  <script>
-    function initialize() {
+    (function() {
-      var loc = {
+      'use strict';
-        lat: {{ lat }},
+      var map = new These3Words.Map({{lat}}, {{lng}}, '{{threewords}}');
-        lng: {{ lng }}
+      //google.maps.event.addDomListener(window, 'load', map.init);
-      };
+      map.init();
-      var map = new google.maps.Map(document.getElementById('map-canvas'), {
+     }());
-        center: loc,
-        zoom: 14
-      });
-      var marker = new google.maps.Marker({
-        position: loc,
-        map: map,
-        title: "{{ threewords }}"
-      });
-    }
-    google.maps.event.addDomListener(window, 'load', initialize);
   </script>
+  <noscript>
+    <div class="panel panel-danger">
+      <div class="panel-heading">Missing Javascript Support</div>
+      <div class="panel-body">
+        Your browser does not seem to support Javascript. Unfortunately this app relies heavily on said technology and can't be used without it. Please upgrade to a more modern browser or activate Javascript in case you disabled it.
+      </div>
+    </div>
+  </noscript>
   </body>
 </html>