Skip to content

Colorful, iconic & retina-proof markers for Leaflet, based on the Font Awesome/Twitter Bootstrap icons.

License

Notifications You must be signed in to change notification settings

apollolm/Leaflet.awesome-markers

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

71 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Leaflet.awesome-markers plugin v2.0

Colorful iconic & retina-proof markers for Leaflet, based on the Glyphicons / Font-Awesome icons

Version 2.0 of Leaflet.awesome-markers is tested with:

  • Bootstrap 3
  • Font Awesome 4.0
  • Leaflet 0.5-Latest

For bootstrap 2.x & Fontawesome 3.x use Leaflet.awesome-markers v1.0

Screenshots

AwesomeMarkers screenshot

JSfiddle demo

Twitter Bootstrap/Font-Awesome icons

This plugin depends on either Bootstrap or Font-Awesome for the rendering of the icons. See these urls for more information:

For Font-Awesome

For Twitter bootstrap:

Using the plugin

    1. First, follow the steps for including Font-Awesome or Twitter bootstrap into your application.

For Font-Awesome, steps are located here:

http://fortawesome.github.io/Font-Awesome/get-started/

For Twitter bootstrap, steps are here:

http://getbootstrap.com/getting-started/

    1. Next, copy the dist/images directory, awesome-markers.css, and awesome-markers.js to your project and include them:
<link rel="stylesheet" href="css/leaflet.awesome-markers.css">
<script src="js/leaflet.awesome-markers.js"></script>
    1. Now use the plugin to create a marker like this:
  // Creates a red marker with the coffee icon
  var redMarker = L.AwesomeMarkers.icon({
    icon: 'coffee',
    markerColor: 'red'
  });
      
  L.marker([51.941196,4.512291], {icon: redMarker}).addTo(map);

Properties

Property Description Default Value Possible values
icon Name of the icon 'home' See glyphicons or font-awesome
prefix Select de icon library 'glyphicon' 'fa' for font-awesome or 'glyphicon' for bootstrap 3
markerColor Color of the marker 'blue' 'red', 'darkred', 'orange', 'green', 'darkgreen', 'blue', 'purple', 'darkpuple', 'cadetblue'
iconColor Color of the icon 'white' 'white', 'black' or css code (hex, rgba etc)
spin Make the icon spin false true or false. Font-awesome required

Supported icons

The 'icon' property supports these strings:

License

Contact

Bitdeli Badge

About

Colorful, iconic & retina-proof markers for Leaflet, based on the Font Awesome/Twitter Bootstrap icons.

Resources

License

Stars

Watchers

Forks

Packages

No packages published