Leaflet Awesome-Markers (Adding Numbers)

Instead of using the Awesome-Markers plugin, you could follow this article on creating numbered markers in Leaflet:

http://blog.charliecroom.com/index.php/web/numbered-markers-in-leaflet

The associated Gist is here:

https://gist.github.com/comp615/2288108

An simple example of how this would work is as follows:

// 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'})
});

Another strategy is to use the Leaflet.ExtraMarkers plugin

Code the numeric marker with these options:

var numMarker = L.ExtraMarkers.icon({
icon: 'fa-number',
number: 12,
markerColor: 'blue'
});
L.marker([41.77, -72.69], {icon: numMarker}).addTo(map);

I have tried Numbered Markers plugin, but it icon is not pretty as other Awesome Markers, and make page layout style inconsistent, so I made small changes in Awesome-Markers plugin to make it support numbers. It is very simple.

1. this is Numbered Markers plugin effect, if you like it please skip my answer.

2. change leaflet.awesome-markers.js line 2, add html:""

   L.AwesomeMarkers.Icon = L.Icon.extend({
   options: {
       iconSize: [35, 45],
       iconAnchor:   [17, 42],
       popupAnchor: [1, -32],
       shadowAnchor: [10, 12],
       shadowSize: [36, 16],
       className: 'awesome-marker',
       prefix: 'glyphicon',
       spinClass: 'fa-spin',
       extraClasses: '',
       icon: 'home',
       markerColor: 'blue',
       iconColor: 'white',
       html : ""
   },
   

3. change leaflet.awesome-markers.js line 80,

   return "<i " + iconColorStyle + "class='" + options.extraClasses + " " 
   + options.prefix + " " + iconClass + " " + iconSpinClass + " " 
   + iconColorClass + "'>" + options.html + "</i>";
   

4. when creating icon, call like before

   var jobMarkerIcon = L.AwesomeMarkers.icon({
   icon: '',
   markerColor: 'darkblue',
   prefix: 'fa',
   html: (i+1)
   });
   

5. comment out line 45 and 47.

6. the result is like below screenshot.

7. code changes diff shows below.