mapbox

HTML

<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css">
<div id="map"></div>

CSS

body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }

.leaflet-marker-icon .number{
	position: relative;
	font-size: 14px;
	text-align: center;
	background-color: #3399ff;
	color: white;
	border-radius: 100%;
  padding: 10px;
}

JavaScript

var map = L.mapbox.map('map', 'examples.map-20v6611k')
    .setView([37.9, -77], 2);

// GeoJSON marker
L.mapbox.markerLayer({
    // this feature is in the GeoJSON format: see geojson.org
    // for the full specification
    type: 'Feature',
    geometry: {
        type: 'Point',
        // coordinates here are in longitude, latitude order because
        // x, y is the standard for GeoJSON and many formats
        coordinates: [-99, 36.9]
    },
    properties: {
        title: 'A Single Marker',
        description: 'Just one of me',
        // one can customize markers by adding simplestyle properties
        // http://mapbox.com/developers/simplestyle/
        'marker-size': 'large',
        'marker-color': '#775556',
        'marker-symbol': 'square'
    }
}).addTo(map);

// Leaflet Marker
L.NumberedDivIcon = L.Icon.extend({
	options: {
    number: ''
	},
	createIcon: function () {
		var div = document.createElement('div');
		var numdiv = document.createElement('div');
		numdiv.setAttribute ( "class", "number" );
		numdiv.innerHTML = this.options['number'] || '';
		div.appendChild ( numdiv );
		this._setIconStyles(div, 'icon');
		return div;
	}
});

var marker = new L.Marker(new L.LatLng(40, -78), {
    icon:	new L.NumberedDivIcon({number: 'dot'})
});
marker.addTo(map);