4 comments

Add a comment…

Sign in

prestine

Your name

Your email address

Check!

invalid email

(thinking…)

Reset

or sign in with

• 
• 

UserVoice password

Forgot password?

Create a password

I agree to the terms of service

Signed in as (Sign out)

Close

Close

Post comment Submitting...

• Anonymous commented  ·  May 28, 2012 4:47 AM  ·  Delete…

  Thanks Ricozor, this is what I need!

• efc commented  ·  May 14, 2012 11:45 AM  ·  Delete…

  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  ·  May 14, 2012 11:39 AM  ·  Delete…

  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  ·  March 28, 2012 6:41 AM  ·  Delete…

  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