diff --git a/app.py b/app.py index 7264406..cab4b75 100755 --- a/app.py +++ b/app.py @@ -4,12 +4,18 @@ import bottle from bottle import ( get, run, + static_file, template ) import thesethreewords as these +@get('/static/') +def serve_static(filename): + return static_file(filename, root='static') + + @get('/') def index(): return template('index', err=None) @@ -25,6 +31,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 + + + + + + + + + + + + - + + -
- - + + - + +