Skip to content

Instantly share code, notes, and snippets.

Created April 2, 2012 23:51
  • Star 71 You must be signed in to star a gist
  • Fork 16 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
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


Copy link

Great and clean solution.
Thank you!

Copy link

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

Copy link

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

Copy link

jtarleton commented Dec 31, 2019

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?

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