Skip to content

Instantly share code, notes, and snippets.

@pjsier
Last active October 31, 2017 23:09
Show Gist options
  • Save pjsier/a6ee0e5506c2da9f302e to your computer and use it in GitHub Desktop.
Save pjsier/a6ee0e5506c2da9f302e to your computer and use it in GitHub Desktop.
Using typeahead.js with Mapzen Search autocomplete and displaying selected locations in Leaflet
<!DOCTYPE html>
<html>
<head>
<title>Mapzen Autocomplete Gist</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
</head>
<body>
<style>
#map {
width: 500px;
height: 500px;
float: right;
}
.tt-suggestion {
background-color: white;
}
.tt-cursor {
background-color: yellow;
}
</style>
<input class="typeahead" type="text">
<div id="map" style="width:500px;height:500px;"></div>
</body>
<script>
var map = L.map('map').setView([41.907477, -87.685913], 10);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var inputElement = document.getElementsByTagName("input")[0];
var mapzen_key = "search-XXXXXXX";
var auto_url = 'https://search.mapzen.com/v1/autocomplete';
var search_url = 'https://search.mapzen.com/v1/search';
var full_auto_url = auto_url + "?api_key=" + mapzen_key + "&focus.point.lon=-87.63&focus.point.lat=41.88&text=";
var addr_matches = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace("label"),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: full_auto_url,
rateLimitBy: "throttle",
rateLimitWait: 1000,
replace: function() {
var val = inputElement.value;
var processed_url = full_auto_url + encodeURIComponent(val);
return processed_url;
},
transform: function(response) {
response.features.map(function(addr) {
addr.label = addr.properties.label;
return addr;
});
return response.features;
}
}
});
addr_matches.initialize();
$('.typeahead').typeahead({
highlight: true,
minLength: 3
},
{
name: 'addresses',
display: 'label',
source: addr_matches
});
function searchMapzen() {
$.ajax({
url: search_url,
data: {
api_key: mapzen_key,
"focus.point.lon": -87.63,
"focus.point.lat": 41.88,
text: inputElement.value
},
dataType: "json",
success: function(data) {
if (data && data.features) {
map.setView([data.features[0].geometry.coordinates[1], data.features[0].geometry.coordinates[0]], 14);
}
},
error: function(e) {
console.log(e);
}
});
}
$('.typeahead').bind('typeahead:select', function(e, data) {
map.setView([data.geometry.coordinates[1], data.geometry.coordinates[0]], 14);
});
inputElement.addEventListener('keyup', function (e) {
if (e.keyCode == 13) {
searchMapzen();
}
});
</script>
</html>
@stevevance
Copy link

This works great!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment