Search code examples
javascriptdictionaryleafletfont-awesomemarkers

Leaflet Awesome-Markers (Adding Numbers)

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!)

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.

Solution

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