Leaflet Awesome-Markers (Adding Numbers)

Question

I am using the Leaflet.Awesome-Markers plugin with LeafletJS.

I have implemented it correctly, however now I'd like to be able to use numbers from 0 - 9 to represent markers.

Here's a JS Fiddle implementation to show how the plugin behaves.

http://jsfiddle.net/fulvio/VPzu4/200/

The plugin allows the use of font-awesome icons and glyph icons (both of course, do not offer any 0 - 9 numbers as icons. argh!)

• http://getbootstrap.com/components/#glyphicons
• http://fortawesome.github.io/Font-Awesome/cheatsheet/

The documentation mentions the ability to use extraClasses and I was wondering whether anyone could point me in the right direction as to how to leverage from this in order to display numbers rather than icons or whether there is simply another way to achieve this.

Thanks in advance for your help.

UPDATE:

Thanks for the comment @Can.

The author of awesome-markers got another tree where he added exactly what you are looking for awesome-markers with numbers/letters be sure to grab the unminified JS.

Answer 1

I have tried Numbered Markers plugin, but it icon is not pretty as other Awesome Markers, and make page layout style inconsistent, so I made small changes in Awesome-Markers plugin to make it support numbers. It is very simple.

1. this is Numbered Markers plugin effect, if you like it please skip my answer.

2. change leaflet.awesome-markers.js line 2, add html:""

   L.AwesomeMarkers.Icon = L.Icon.extend({
   options: {
       iconSize: [35, 45],
       iconAnchor:   [17, 42],
       popupAnchor: [1, -32],
       shadowAnchor: [10, 12],
       shadowSize: [36, 16],
       className: 'awesome-marker',
       prefix: 'glyphicon',
       spinClass: 'fa-spin',
       extraClasses: '',
       icon: 'home',
       markerColor: 'blue',
       iconColor: 'white',
       html : ""
   },
   

3. change leaflet.awesome-markers.js line 80,

   return "<i " + iconColorStyle + "class='" + options.extraClasses + " " 
   + options.prefix + " " + iconClass + " " + iconSpinClass + " " 
   + iconColorClass + "'>" + options.html + "</i>";
   

4. when creating icon, call like before

   var jobMarkerIcon = L.AwesomeMarkers.icon({
   icon: '',
   markerColor: 'darkblue',
   prefix: 'fa',
   html: (i+1)
   });
   

5. comment out line 45 and 47.

6. the result is like below screenshot.

7. code changes diff shows below.

Answer 2

Instead of using the Awesome-Markers plugin, you could follow this article on creating numbered markers in Leaflet:

http://blog.charliecroom.com/index.php/web/numbered-markers-in-leaflet

The associated Gist is here:

https://gist.github.com/comp615/2288108

An simple example of how this would work is as follows:

// 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'})
});

Answer 3

Another strategy is to use the Leaflet.ExtraMarkers plugin

Code the numeric marker with these options:

var numMarker = L.ExtraMarkers.icon({
icon: 'fa-number',
number: 12,
markerColor: 'blue'
});
L.marker([41.77, -72.69], {icon: numMarker}).addTo(map);

Answer 4

If you don't want to use the font-awesome, a fairly simple solution presented here: Simple Numbered Markers it doesn't need any extra library. It's already in leaflet. Just create a CSS class with icon image like this:

.number-icon
{
    background-image: url("images/number-marker-icon.png");
    background-size: 40px 40px;
    background-repeat: no-repeat;
    margin: 0 auto;
    text-align:center;
    color:white;
    font-weight: bold;   
}

Then create icon like this:

var numberIcon = L.divIcon({
      className: "number-icon",
      shadowSize: [20, 30], // size of the shadow
      iconAnchor: [20, 40], 
      shadowAnchor: [4, 30],  // the same for the shadow
      popupAnchor: [0, -30],
      html: variable_containing_the_number        
});

var marker = new L.marker([lat, long],
{                               
    icon: numberIcon                               
});