Rudimentary smart box on the landing page

This commit is contained in:
Tim Head 2014-11-18 14:37:48 +01:00
parent d72e9eb10b
commit fa44970fd1
2 changed files with 37 additions and 3 deletions

9
app.py
View File

@ -30,6 +30,15 @@ def showMap(threewords):
return template('index', return template('index',
err="Could not find location {}".format(threewords)) err="Could not find location {}".format(threewords))
@get('/latlng/<lat:float>,<lng:float>')
def showMapFromLatLng(lat, lng):
try:
threewords = these.three_words((lat, lng))
return template('map', lat=lat, lng=lng, threewords=threewords)
except:
return template('index',
err="Could not find location {}".format(threewords))
# API # API
@get('/api/<lat:float>,<lng:float>') @get('/api/<lat:float>,<lng:float>')

View File

@ -8,8 +8,33 @@
<!-- Style --> <!-- Style -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/style.css"> <link rel="stylesheet" href="/static/css/style.css">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
var searchbox = new google.maps.places.SearchBox(
(document.getElementById('input3words')));
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(searchbox, 'places_changed', function() {
// Get the place details from the autocomplete object.
var places = searchbox.getPlaces();
if (places.length == 0) {
return;
}
place = places[0];
lat = place.geometry.location.lat();
lng = place.geometry.location.lng();
window.location = '/latlng/' + lat +","+lng;
console.log("lat:" + lat + " lng:" + lng);
});
}
</script>
</head> </head>
<body> <body onload="initialize()">
<div class="container"> <div class="container">
% if err: % if err:
<aside class="alert alert-danger" role="alert">Error: {{ err }}</aside> <aside class="alert alert-danger" role="alert">Error: {{ err }}</aside>
@ -30,7 +55,7 @@
<footer> <footer>
<p class="text-center text-muted">Made with ♥ by <a href="https://betatim.github.io/">Tim</a> and <a href="https://dun.gs">Kevin</a>. <a href="https://github.com/betatim/these-3-words">Fork it on GitHub</a>. <p class="text-center text-muted">Made with ♥ by <a href="https://betatim.github.io/">Tim</a> and <a href="https://dun.gs">Kevin</a>. <a href="https://github.com/betatim/these-3-words">Fork it on GitHub</a>.
</footer> </footer>
<script> <!--<script>
(function() { (function() {
var default3words = 'spitting-ripple-fontanel'; var default3words = 'spitting-ripple-fontanel';
var threewordsField = document.getElementById('input3words'); var threewordsField = document.getElementById('input3words');
@ -46,7 +71,7 @@
} }
}); });
})(); })();
</script> </script> -->
</div> </div>
</body> </body>
</html> </html>