<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>

<div id='map'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map')
  .setView([38, -95], 4)
  .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

// Omnivore will AJAX-request this file behind the scenes and parse it:
// note that there are considerations:
// - The CSV file must contain latitude and longitude values, in column
//   named roughly latitude and longitude
// - The file must either be on the same domain as the page that requests it,
//   or both the server it is requested from and the user's browser must
//   support CORS.
omnivore.csv('/mapbox.js/assets/data/airports.csv')
    .on('ready', function(layer) {
        // An example of customizing marker styles based on an attribute.
        // In this case, the data, a CSV file, has a column called 'state'
        // with values referring to states. Your data might have different
        // values, so adjust to fit.
        this.eachLayer(function(marker) {
            if (marker.toGeoJSON().properties.state === 'CA') {
                // The argument to L.mapbox.marker.icon is based on the
                // simplestyle-spec: see that specification for a full
                // description of options.
                marker.setIcon(L.mapbox.marker.icon({
                    'marker-color': '#ff8888',
                    'marker-size': 'large'
                }));
            } else {
                marker.setIcon(L.mapbox.marker.icon({}));
            }
            // Bind a popup to each icon based on the same properties
            marker.bindPopup(marker.toGeoJSON().properties.city + ', ' +
                marker.toGeoJSON().properties.state);
        });
    })
    .addTo(map);
</script>