Merge pull request #6 from betatim/landing
Rudimentary smart box on the landing page
This commit is contained in:
commit
1a445cdc0c
10
app.py
10
app.py
|
@ -31,6 +31,16 @@ def showMap(threewords):
|
||||||
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>')
|
||||||
def latLngToHash(lat, lng):
|
def latLngToHash(lat, lng):
|
||||||
|
|
|
@ -134,6 +134,8 @@ var These3Words = (function () {
|
||||||
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
Map: Map
|
Map: Map,
|
||||||
|
apiGet: apiGet,
|
||||||
|
apiGetFromLatLng: apiGetFromLatLng
|
||||||
};
|
};
|
||||||
}());
|
}());
|
||||||
|
|
|
@ -8,6 +8,8 @@
|
||||||
<!-- 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 src="/static/js/app.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
@ -30,23 +32,38 @@
|
||||||
<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>
|
||||||
|
</div>
|
||||||
<script>
|
<script>
|
||||||
(function () {
|
(function () {
|
||||||
var default3words = 'spitting-ripple-fontanel';
|
var initialise = function () {
|
||||||
var threewordsField = document.getElementById('input3words');
|
// Create the autocomplete object, restricting the search
|
||||||
document.getElementById('button3words').addEventListener('click', function(evt) {
|
// to geographical location types.
|
||||||
var threewords = threewordsField.value;
|
var searchbox = new google.maps.places.SearchBox(
|
||||||
if (threewords.length === 0) {
|
(document.getElementById('input3words')));
|
||||||
threewords = default3words;
|
// When the user selects an address from the dropdown,
|
||||||
}
|
// populate the address fields in the form.
|
||||||
if (/\w+-\w+-\w+/.test(threewords)) {
|
google.maps.event.addListener(searchbox, 'places_changed', function() {
|
||||||
window.location = '/' + threewords;
|
// Get the place details from the autocomplete object.
|
||||||
} else {
|
var places = searchbox.getPlaces();
|
||||||
document.getElementById('input3wordsContainer').classList.add('has-error');
|
console.log("HEllo");
|
||||||
|
if (places.length > 0) {
|
||||||
|
place = places[0];
|
||||||
|
These3Words.apiGetFromLatLng(place.geometry.location,
|
||||||
|
function(status, data) {
|
||||||
|
if (status >= 200 && status < 400) {
|
||||||
|
window.location = "/" + data.three;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
})();
|
} else {
|
||||||
|
var words = document.getElementById('input3words').value;
|
||||||
|
if (/\w+-\w+-\w+/.test(words)) {
|
||||||
|
window.location = '/' + words;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
window.addEventListener('load', initialise);
|
||||||
|
}());
|
||||||
</script>
|
</script>
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue