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-25 06:22:13 +00:00
Remember a 3x3 m< sup > 2< / sup > location anywhere in the world with just four 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
2014-11-24 20:18:01 +00:00
finalising the word list, locations might not be
reproducible. So do not use it to mark your
2014-11-18 15:05:44 +00:00
antarctic resupply drop quite yet!< / p >
2014-11-21 08:55:09 +00:00
< p >
< ul class = "lead" >
2014-11-24 20:18:01 +00:00
< li > Type in an address to find out its four words (try < i > 1600 Pennsylvania avenue ...< / i > )< / li >
< li > To find the location referenced by a set of four words, type them in separated by a dash (try < i > {{ sydney }}< / i > )< / li >
2014-11-21 10:36:24 +00:00
< li > Go straight to exploring the map by clicking the < i > Find on Map< / i > button, it will take you to Sydney< / li >
2014-11-21 08:55:09 +00:00
< / ul >
< / p >
2014-11-17 10:44:55 +00:00
< p id = "input3wordsContainer" >
2014-11-21 21:52:17 +00:00
< input type = "text" class = "form-control" id = "input3words" placeholder = "1600 Pennsylvania .. OR {{ sydney }}" >
2014-11-17 10:44:55 +00:00
< / p >
< p >
< button id = "button3words" class = "btn btn-lg btn-primary" > Find on Map< / button >
< / p >
2014-11-21 21:35:23 +00:00
< p class = "lead" >
Some interesting locations to try out:
< ul class = "lead" >
2014-11-21 21:52:17 +00:00
< li > < a href = "{{ battery }}" > Battery Park, NYC< / a > < / li >
< li > < a href = "{{ san_fran }}" > Downtown San Francisco< / a > < / li >
< li > < a href = "{{ sydney }}" > Sydney, Australia< / a > < / li >
2014-11-21 21:35:23 +00:00
< / ul >
< / p >
2014-11-17 10:44:55 +00:00
< / 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-21 21:52:17 +00:00
var default3words = '{{ sydney }}';
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 >
