examples/locationTypeahead.html
<!DOCTYPE html>
<html>
<head>
<title>Location Typeahead Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' type='text/css' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src='../dist/ui.js'></script>
</head>
<body>
<div class='location-search'></div>
<div class='b0rken-search'></div>
<script>
var db = [
{
displayName: 'Boston, MA',
lng: 74.134134,
lat: 45.432433
},
{
displayName: 'New York, NY',
lng: 13.131442,
lat: -45.854975
},
{
displayName: 'Paris, TX',
lng: 14.5264,
lat: 1.425255
},
{
displayName: 'Tokyo, Japan',
lng: -74.43133,
lat: 94.44466
},
{
displayName: 'Houston, TX',
lng: 4.083,
lat: -45.133
},
{
displayName: 'San Diego, CA',
lng: 79.134134,
lat: 98.432433
},
{
displayName: 'Portland, ME',
lng: 74.134134,
lat: 45.432433
},
{
displayName: 'Franklin, Tennesse',
lng: 67.245245,
lat: 26.677454
},
{
displayName: 'Vancouver, BC',
lng: 38.234443,
lat: 39.341444
},
{
displayName: 'Tel Aviv, Israel',
lng: 63.97697,
lat: 39.76766
},
{
displayName: 'Portland, OR',
lng: 13.578578,
lat: 84.664646
}
];
var fetch = function (term, cb) {
//We only want to fetch if it's not current location, so check for lat
if (!term.lat) {
var matches = db.filter(function (item) {
return (item.displayName + '').toLowerCase().indexOf(term.toLowerCase()) !== -1;
});
// mimic ajax
setTimeout(function () {
cb(matches);
}, 50);
}
};
var locationSearch = new UI.LocationTypeahead('.location-search', fetch, {
currentLocationText: 'Use my location',
geolocationAPI: window.navigator.geolocation,
textInputOpts: {
placeholder: 'Try "New York"'
}
});
locationSearch.subscribe(function (choice) {
if (choice.isLocation) {
console.log('location chosen', choice);
} else {
console.log(choice); // misc message
}
});
locationSearch.render();
</script>
</body>
</html>