« My Latest ProjectThe Android Experience (Day 3) »

Numbered Markers in Leaflet

04/02/12 | by Comp615 [mail] | Categories: Web, Technology

UPDATE: A Gist with the code is available here. You will still need to download the image I mention below.

One of the projects I'm currently working on deals heavily with mapping locations. Although Google Maps is great, I decided to go with a newer and more flexible solution, Leaflet. This little utility allows you to hook into CloudMade's huge database of tilesets to completely change how the maps look, in addition, Leaflet is just generally a super solid and fast mapping library.

After playing around with Leaflet, I really needed a way to label markers 1,2,3,etc. and wasn't able to find any easy way of doing this. So here's a quick little trick that should get anyone else looking for this functionality started.

First, make sure you are using the 4.0+ version of Leaflet, that's what I modeled this after, although you could probably use a similar approach for 3.0 as well.

The default marker wasn't quite the right size for fitting text inside, so I took it and distorted it a bit in photoshop. It's by no means perfect, but should do in a pinch. Download my custom marker here.

Next, we need to create our own icon class. Add the following code to a javascript file in your project, editing the path to the image as appropriate (Mine is ERB js):

L.NumberedDivIcon = L.Icon.extend({
options: {
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;

Now we need to unstyle the disgusting default div, and a little bit of styling will line up our number nicely. This goes in your CSS somewhere:

.leaflet-div-icon {
background: transparent;
border: none;
.leaflet-marker-icon .number{
position: relative;
top: -37px;
font-size: 12px;
width: 25px;
text-align: center;

And that's it! Now we have a nice new class we can use to number things, for instance:

var marker = new L.Marker(new L.LatLng(0, 0), {
icon: new L.NumberedDivIcon({number: '1'})

Hopefully someone finds this useful! I'd love to see a better implementation of this make it into Leaflet master, but till then this should do nicely. Enjoy and happy mapping!


No feedback yet

Form is loading...

A collection of musings from my time at Yale along with some thoughts about my "Freshman year of life" in San Francisco.


  XML Feeds

Blog software