From 675b4e330c642c4f3f6e1d0eff3696dfc67baf45 Mon Sep 17 00:00:00 2001 From: Tim Head Date: Tue, 18 Nov 2014 07:22:28 +0100 Subject: [PATCH 1/3] Started a JSON API --- api.py | 26 ++++++++++++++++++++++++++ app.py | 1 + 2 files changed, 27 insertions(+) create mode 100644 api.py diff --git a/api.py b/api.py new file mode 100644 index 0000000..ad6a497 --- /dev/null +++ b/api.py @@ -0,0 +1,26 @@ +import bottle +from bottle import get, run, template + +import thesethreewords as these + + +@get("/v1/hash/,.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/.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)) diff --git a/app.py b/app.py index 7264406..5c3c5c9 100755 --- a/app.py +++ b/app.py @@ -8,6 +8,7 @@ from bottle import ( ) import thesethreewords as these +import api as json_api @get('/') From ce9cd36c9d05cbed942e414b2d42933cc58e12bc Mon Sep 17 00:00:00 2001 From: Kevin Dungs Date: Tue, 18 Nov 2014 10:10:18 +0100 Subject: [PATCH 2/3] 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 | 26 ---------------- app.py | 27 +++++++++++++++++ static/css/style.css | 11 +++++++ static/js/app.js | 72 ++++++++++++++++++++++++++++++++++++++++++++ views/index.html | 6 +--- views/map.html | 58 ++++++++++++++++++++--------------- 6 files changed, 144 insertions(+), 56 deletions(-) delete mode 100644 api.py create mode 100644 static/css/style.css create mode 100644 static/js/app.js diff --git a/api.py b/api.py deleted file mode 100644 index ad6a497..0000000 --- a/api.py +++ /dev/null @@ -1,26 +0,0 @@ -import bottle -from bottle import get, run, template - -import thesethreewords as these - - -@get("/v1/hash/,.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/.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)) diff --git a/app.py b/app.py index 5c3c5c9..3adfd30 100755 --- a/app.py +++ b/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/') +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/,') +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/') +def hashToLatLng(threewords): + try: + lat,lng = these.decode(threewords) + return {"lat": lat, "lng": lng} + except: + return {} + + + if __name__ == '__main__': run(host='localhost', port=8080) diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..09b1c55 --- /dev/null +++ b/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; +} diff --git a/static/js/app.js b/static/js/app.js new file mode 100644 index 0000000..81d027d --- /dev/null +++ b/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 + }; +}()); diff --git a/views/index.html b/views/index.html index 511c355..931c71a 100644 --- a/views/index.html +++ b/views/index.html @@ -7,11 +7,7 @@ These3Words Map - +
diff --git a/views/map.html b/views/map.html index ac78794..b014050 100644 --- a/views/map.html +++ b/views/map.html @@ -3,33 +3,41 @@ - - These3Words Map + These3Words + + + + + + + + + + + + - + + -
- - + + - + + From f1482dde0228656321a7e5d3dc31c0cae8cc8d4a Mon Sep 17 00:00:00 2001 From: Kevin Dungs Date: Tue, 18 Nov 2014 10:13:43 +0100 Subject: [PATCH 3/3] Remove import of old api. --- app.py | 1 - 1 file changed, 1 deletion(-) diff --git a/app.py b/app.py index 3adfd30..cab4b75 100755 --- a/app.py +++ b/app.py @@ -9,7 +9,6 @@ from bottle import ( ) import thesethreewords as these -import api as json_api @get('/static/')