I’m a big fan of MapBox, I use it wherever I can when I need maps (CartCSS + TileMill is a ray of sunshine in the otherwise crappy world of custom maps).

One of the main reasons I love their service so much is the quality of their documentation, which rarely fails to present an answer to a question I’ve had, until this instance.

So in the interest in saving a few minutes of pissing about, below is my solution to using custom HTML markers when rendering GeoJSON layers with Mapbox.js

// Create your map is you normally would
L.mapbox.accessToken = 'YOUR_TOKEN';
var map = L.mapbox.map('map', 'YOUR_MAP').setView([YOUR_LAT, YOUR_LONG], YOUR_ZOOM);

// Add a layer with no data set as the first arg to featureLayer()
// This is done to prevent the default marker icons rendering
var layer = L.mapbox.featureLayer().addTo(map);

// When the 'layeradd' event is fired (when we add the geoJSON below)
layer.on('layeradd', function (e) {
    var marker = e.layer,
        feature = marker.feature;
	
	// This is where the magic happens...
    marker.setIcon(L.divIcon({
        className: YOUR_ICON_CLASS, // Make sure you set an icon class here, otherwise default styles will be set by Mapbox's CSS
        html: '<h1>Hello World</h1>', // The content of your HTML marker, you can build a string based on the marker properties by using 'feature.properties.your_property'
        iconSize: [60,60] // The bounds for your icon
    }));
});

// Now set your data and render the map
layer.setGeoJSON(YOUR_GEOJSON_DATA);

I can’t say for sure this is the best way to do it, but it works nicely and performantly for me.