Numbered Markers in Leaflet (JS Mapping)
//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})
});
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;
}
});
.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;
}