Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

stevevance commented Jul 28, 2017

This works great!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.