Number the markers
it sould be nice if we ware abble to number the markers, for a search around a point for exemple.

Agreed that’s a very useful feature, planned for one of the future versions.
4 comments
-
Anonymous commented
Thanks Ricozor, this is what I need!
-
efc commented
FYI, I voted for this more general request instead http://leaflet.uservoice.com/forums/150880-ideas-and-suggestions-for-leaflet/suggestions/2615455-labels-for-markers and also shared the workaround code there.
-
efc commented
Ricozor, that was super helpful! I've been able to simplify the code quite a bit and eliminate some of the extra styling that was being added on for icons. I also made it clear that this marker can be used for any text, not just numbers. I needed to show other values, and any HTML can be stuffed inside these text markers. I do hope that a generic text marker could become part of Leaflet in the future.
==================
var LeafMarkerText = L.Icon.extend({
markerText: '', //
initialize: function (markerText) { // use number has parameter instead of iconUrl
if (markerText) {
this.markerText = markerText;
}
},
_createIcon: function () {// override Icon creation to replace
var t = document.createElement('div');
t.className = "leaflet-marker-icon leaflet-marker-text";
t.innerHTML = this.markerText;
return t;
},
});
==================Just create these with...
==================
marker = new L.Marker(markerLocation, {icon : myText});
==================...add CSS for the leaflet-marker-text class and you are good to go.
-
Ricozor commented
Finally I succed to add different number for each marker.
to do this I've overrided L.Icon like this :
==================
var LeafIconNumber = L.Icon.extend({
number: '', //
initialize: function (number) { // use number has parameter instead of iconUrl
if (number) {
this.number = number;
}
},
iconUrl: 'path/to/marker.png',
shadowUrl: 'path/to/marker_shadow.png',
iconSize: new L.Point(22, 34), //
shadowSize: new L.Point(37, 34),
iconAnchor: new L.Point(11, 34),
popupAnchor: new L.Point(-97, -31),
createIcon: function () {// override Icon creation to add
var img = this._createIcon('icon');
img.innerHTML = this.number;
return img;
},
_createImg: function (src) { // override img creation to replace the img by a div with backgroundImage
var el;
if (!L.Browser.ie6) {
//el = document.createElement('img');
//el.src = src;
el = document.createElement('div');
el.style.backgroundImage = 'url('+src+')';
} else {
el = document.createElement('div');
el.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '")';
}
return el;
}
});
==================then in the loop where I've created my markers, I call LeafIcon like this
==================
for (i=0; i<numberOfMarkers ; i++ ){
var myIconNumber = new LeafIconNumber(i+1),
markerLocation = new L.LatLng(latData, lngData);,
var marker = new L.Marker(markerLocation, {icon : myIconNumber});
}
==================and at least I've added css properties to div.leaflet-marker-icon{ text-align:center; color:#f00; line-height22px; font-size:9px;} to align numbers