Numbered Markers in Leaflet (JS Mapping)

leaflet_numbered_markers.css

.leaflet-marker-pane .leaflet-clickable {
  position: absolute;
  top: -55px;  /* depends on icon graphic */
  left: -17px; /* depends on icon graphic */
}
.leaflet-marker-pane .leaflet-clickable .number {
  position: absolute;
  top: 10px;   /* depends on icon graphic */
  width: 34px; /* depends on icon graphic */
  text-align: center;
}

leaflet_numbered_markers.js

L.NumberedDivIcon = L.Icon.extend({
    options: {
        iconUrl: 'http://example.com/path/to/image.png',
        shadowUrl: null,
        iconSize: new L.Point(25, 41),  // depends on icon graphic
        iconAnchor: new L.Point(13, 41) // depends on icon graphic
    },
    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.iconUrl.number || '';
        div.appendChild ( img );
        div.appendChild ( numdiv );
        return div;
    },
    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})
});

In line 13 in leaflet_numbered_markers.js I think it should be
numdiv.innerHTML = this.options.number || '';

thanks