<style>
#search {
position:absolute;
top:10px;
right:10px;
font-size:150%;
}
</style>
<script src="/mapbox.js/assets/csv2geojson.js"></script>
<div id='map'></div>
<input placeholder='state abbreviation' id='search' />
<script>
var map = L.mapbox.map('map', 'examples.map-9ijuk24y')
.setView([38, -102.0], 5),
markerLayer = L.mapbox.markerLayer().addTo(map);
$('#search').keyup(search);
// This example requires jQuery or you can modify it to work with a different
// AJAX library. See the Markers from CSV example for full details of the
// restrictions of loading CSV files and the requirement of the csv2geojson
// library.
$.ajax({
// you will need to replace this URL with the URL to your CSV file.
url: '/mapbox.js/assets/airports.csv',
success: csvLoaded
});
// Though these functions are below the places where they're used in this
// script, they'll still work due to JavaScript's function hoisting feature.
function csvLoaded(csv) {
markerLayer.setGeoJSON(csv2geojson.csv2geojson(csv));
}
function search() {
// get the value of the search input field
var searchString = $('#search').val().toLowerCase();
markerLayer.setFilter(showState);
// here we're simply comparing the 'state' property of each marker
// to the search string, seeing whether the former contains the latter.
function showState(feature) {
return feature.properties.state
.toLowerCase()
.indexOf(searchString) !== -1;
}
}
</script>