mattmcw
/
these-3-words
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #5 from betatim/json-api 

Started a JSON API
This commit is contained in:
Tim Head 2014-11-18 10:19:03 +01:00
parent ff5d158a4e f1482dde02
commit 6872dc293c
5 changed files with 144 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app.py
View File

@ -4,12 +4,18 @@ import bottle
from bottle import (
get,
run,
static_file,
template
)
import thesethreewords as these
@get('/static/<filename:path>')
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/<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)

11
static/css/style.css Normal file
View File

@ -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;
}

72
static/js/app.js Normal file
View File

@ -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
};
}());

6
views/index.html
View File

@ -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>
body {
padding-top: 40px;
}
</style>
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<div class="container">

56
views/map.html
View File

@ -3,33 +3,41 @@
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>These3Words Map</title>
<title>These3Words</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">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<div id="map-canvas"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
function initialize() {
var loc = {
lat: {{ lat }},
lng: {{ lng }}
};
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 src="https://maps.googleapis.com/maps/api/js"></script>
<script src="/static/js/app.js"></script>
<script>
(function() {
'use strict';
var map = new These3Words.Map({{lat}}, {{lng}}, '{{threewords}}');
//google.maps.event.addDomListener(window, 'load', map.init);
map.init();
}());
</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>