Numbered Markers in Leaflet (JS Mapping)

leaflet_numbered_markers.css

.leaflet-div-icon {
	background: transparent;
	border: none;
}

.leaflet-marker-icon .number{
	position: relative;
	top: -37px;
	font-size: 12px;
	width: 25px;
	text-align: center;
}

leaflet_numbered_markers.js

L.NumberedDivIcon = L.Icon.extend({
	options: {
    // EDIT THIS TO POINT TO THE FILE AT http://www.charliecroom.com/marker_hole.png (or your own marker)
    iconUrl: '<%= image_path("leaflet/marker_hole.png") %>',
    number: '',
    shadowUrl: null,
    iconSize: new L.Point(25, 41),
		iconAnchor: new L.Point(13, 41),
		popupAnchor: new L.Point(0, -33),
		/*
		iconAnchor: (Point)
		popupAnchor: (Point)
		*/
		className: 'leaflet-div-icon'
	},

	createIcon: function () {
		var div = document.createElement('div');
		var img = this._createImg(this.options['iconUrl']);
		var numdiv = document.createElement('div');
		numdiv.setAttribute ( "class", "number" );
		numdiv.innerHTML = this.options['number'] || '';
		div.appendChild ( img );
		div.appendChild ( numdiv );
		this._setIconStyles(div, 'icon');
		return div;
	},

	//you could change this to add a shadow like in the normal marker if you really wanted
	createShadow: function () {
		return null;
	}
});

usage.js

//Make sure you downloaded the image file in numbered_markers.js

//Note that the text could also be letters instead of numbers if that's more appropriate
var marker = new L.Marker(new L.LatLng(0, 0), {
    icon:	new L.NumberedDivIcon({number: '1'})
});

Thank you very much for this!

css class 'leaflet-div-icon' is in conflict with one with the same name in Leaflet.draw

I'm having trouble figuring out how to load this with mapbox.js. Possible because I'm bringing in marker data through an external GeoJSON file. Here's my code, maybe you can take a look at it and offer a suggestion on how to get your div floating on top.

var map = L.mapbox.map('map', 'map.link');

map.markerLayer.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;

var popupContent =  '<strong>' + feature.properties.title + '</strong><br>' +
                        '' + feature.properties.description + '<br>' +
                    'Employees: ' + feature.properties.employees + '<br>' +
                    '<a href="flight-data.php?' + feature.properties.url + '">View Details</a>';

marker.bindPopup(popupContent,{
    closeButton: false,
    //minWidth: 320
});

});

map.markerLayer.loadURL('flight-data.json.php');

map.setView([39.8282, -98.5795], 4);

I have done a gem for Ruby on Rails with this code : https://github.com/frodrigo/leaflet_numbered_markers-rails

FYI, this line prevents you from numbering a marker as "0", which was a valid use case for us.

numdiv.innerHTML = this.options['number'] || '';

excellent

Great and clean solution.
Thank you!

Thank you for sharing your code, I have adapted it to use text intead of numbers, available here.

Thanks for sharing... helped to save a lot of time 👍

Thanks. FYI, I'm finding the .number div element for the number text introduces an issue meeting WCAG 2.0 success criteria:

Ensure that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text.

The "background behind the text" in this case is transparent, and only the loaded icon image provides contrast for the text.

Do you have any suggestion?

excellent and thank you for sharing