Skip to content

Instantly share code, notes, and snippets.

Embed
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 http://www.charliecroom.com/marker_hole.png (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'})
});
@usmany

This comment has been minimized.

Copy link

commented Apr 2, 2013

Thank you very much for this!

@frodrigo

This comment has been minimized.

Copy link

commented Oct 12, 2013

css class 'leaflet-div-icon' is in conflict with one with the same name in Leaflet.draw

@trmchenry

This comment has been minimized.

Copy link

commented Oct 15, 2013

I'm having trouble figuring out how to load this with mapbox.js. Possible because I'm bringing in marker data through an external GeoJSON file. Here's my code, maybe you can take a look at it and offer a suggestion on how to get your div floating on top.

var map = L.mapbox.map('map', 'map.link');

map.markerLayer.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;

var popupContent =  '<strong>' + feature.properties.title + '</strong><br>' +
                        '' + feature.properties.description + '<br>' +
                    'Employees: ' + feature.properties.employees + '<br>' +
                    '<a href="flight-data.php?' + feature.properties.url + '">View Details</a>';

marker.bindPopup(popupContent,{
    closeButton: false,
    //minWidth: 320
});

});

map.markerLayer.loadURL('flight-data.json.php');

map.setView([39.8282, -98.5795], 4);

@frodrigo

This comment has been minimized.

Copy link

commented Nov 7, 2013

I have done a gem for Ruby on Rails with this code : https://github.com/frodrigo/leaflet_numbered_markers-rails

@fatica

This comment has been minimized.

Copy link

commented Jun 18, 2015

FYI, this line prevents you from numbering a marker as "0", which was a valid use case for us.

numdiv.innerHTML = this.options['number'] || '';

@aliEbrahimi

This comment has been minimized.

Copy link

commented Jul 28, 2015

excellent

@rbizarra

This comment has been minimized.

Copy link

commented Nov 11, 2015

Great and clean solution.
Thank you!

@moravcik

This comment has been minimized.

Copy link

commented May 12, 2016

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

@nikolauskrismer

This comment has been minimized.

Copy link

commented Mar 16, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.