Skip to content

Instantly share code, notes, and snippets.

Created April 2, 2012 23:51
Show Gist options
  • Save comp615/2288108 to your computer and use it in GitHub Desktop.
Save comp615/2288108 to your computer and use it in GitHub Desktop.
Numbered Markers in Leaflet (JS Mapping)
.leaflet-div-icon {
background: transparent;
border: none;
.leaflet-marker-icon .number{
position: relative;
top: -37px;
font-size: 12px;
width: 25px;
text-align: center;
L.NumberedDivIcon = L.Icon.extend({
options: {
// EDIT THIS TO POINT TO THE FILE AT (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;
//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'})
Copy link

excellent and thank you for sharing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment