2014-11-17 10:44:55 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
<!-- Meta -->
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2014-11-17 16:11:28 +00:00
< title > These3Words Map< / title >
2014-11-17 10:44:55 +00:00
<!-- Style -->
< link rel = "stylesheet" href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" >
2014-11-18 09:10:18 +00:00
< link rel = "stylesheet" href = "/static/css/style.css" >
2014-11-18 13:37:48 +00:00
< script src = "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places" > < / script >
2014-11-18 14:40:05 +00:00
< script src = "/static/js/app.js" > < / script >
2014-11-17 10:44:55 +00:00
< / head >
2014-11-18 14:46:56 +00:00
< body >
2014-11-17 10:44:55 +00:00
< div class = "container" >
% if err:
< aside class = "alert alert-danger" role = "alert" > Error: {{ err }}< / aside >
% end
< main class = "jumbotron" >
< h1 > These3Words Map< / h1 >
< p class = "lead" >
2014-11-17 13:45:04 +00:00
Find a location anywhere in the world identified by three simple words.
2014-11-17 10:44:55 +00:00
< / p >
2014-11-18 15:05:44 +00:00
< p class = "text-warning" > This is hot off the press. We are still
finalising the word list so locations might not be
reproducible. So do not use it to mark the location of your
antarctic resupply drop quite yet!< / p >
2014-11-17 10:44:55 +00:00
< p id = "input3wordsContainer" >
2014-11-18 15:05:44 +00:00
< input type = "text" class = "form-control" id = "input3words" placeholder = "Your address OR opulent-crusade-zaar" >
2014-11-17 10:44:55 +00:00
< / p >
< p >
< button id = "button3words" class = "btn btn-lg btn-primary" > Find on Map< / button >
< / p >
< / main >
2014-11-17 16:11:28 +00:00
< 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 > .
< / footer >
2014-11-17 10:44:55 +00:00
< / div >
2014-11-18 14:40:05 +00:00
< script >
(function () {
var initialise = function () {
2014-11-18 15:47:47 +00:00
var default3words = 'opulent-crusade-zaar';
2014-11-18 14:40:05 +00:00
var searchbox = new google.maps.places.SearchBox(
(document.getElementById('input3words')));
2014-11-18 15:47:47 +00:00
2014-11-18 14:40:05 +00:00
google.maps.event.addListener(searchbox, 'places_changed', function() {
// Get the place details from the autocomplete object.
var places = searchbox.getPlaces();
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;
}
}
});
2014-11-18 15:47:47 +00:00
document.getElementById('button3words').addEventListener('click', function(evt) {
var threewords = document.getElementById('input3words').value;
if (threewords.length === 0) {
threewords = default3words;
}
if (/\w+-\w+-\w+/.test(threewords)) {
window.location = '/' + threewords;
} else {
document.getElementById('input3wordsContainer').classList.add('has-error');
}
});
2014-11-18 14:40:05 +00:00
};
window.addEventListener('load', initialise);
}());
< / script >
2014-11-17 10:44:55 +00:00
< / body >
< / html >
