Plugins - Awesome Markers

Leaflet's default markers can get pretty boring after awhile. Besides just wanting a different look, you may have point data that should be represented differently depending on a specific data attribute (restaurants vs gas stations on your phone's map for example). A handy plugin that allows you to tweak Leaflet's markers is Awesome Markers.

Awesome Markers allows you to change the icon and color of each marker. It does this by using an icon font such as Font Awesome or the Glyphicon set bundled with Bootstrap.

index.html

Remember, to use a plugin, we must include the files we need in the head section of our html file. Since we're using both FontAwesome and Awesome Markers for this example, we'll need to include both of them. 




            
map.js

            

                This is our Skyline map from before. The changes for using Awesome Markers
                start on line 55.
            

            



            
Result

            

                Let's take a look at the
                result here.
            




            
Further Reading

            

            

                Previous
                Next