Question

96

Leaflet Awesome-Markers (Adding Numbers)

rated 0 times [ 100] [ 4] / answers: 1 / hits: 33968 / 10 Years ago, mon, march 24, 2014, 12:00:00

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.

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brynnleslis

Add To Favorites

Follow

Total Points: 425

Total Questions: 100

Total Answers: 115

Location: Wallis and Futuna

Member since Tue, Mar 30, 2021

3 Years ago

answered 10 Years ago byrondonavanc · Accepted Answer

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

});