Colorful, iconic & retina-proof markers for Leaflet, based on the Font Awesome/Twitter Bootstrap icons.
Pull request Compare This branch is 1 commit behind lvoogdt:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
examples
screenshots
.gitignore
LICENSE
README.md

README.md

Leaflet.awesome-markers plugin

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

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

<link rel="stylesheet" href="css/leaflet.awesome-markers.css">
<script src="js/leaflet.awesome-markers.js"></script>
  • 3) 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', 
  color: 'red'
})


    L.marker([51.941196,4.512291], {icon: redMarker}).addTo(map);

Supported colors:

The following colors are supported

The 'color' property currently supports these strings:

  • 'red'
  • 'darkred'
  • 'orange'
  • 'green'
  • 'darkgreen'
  • 'blue'
  • 'darkblue'
  • 'purple'
  • 'darkpurple'
  • 'cadetblue'

Supported icons

The 'icon' property supports these strings:

Spinning icons (only Font-Awesome)

You can make any icon spin by setting the spin option to true:

// Creates a red marker with the coffee icon
var redMarker = L.AwesomeMarkers.icon({
  icon: 'spinner', 
  color: 'red',
  spin: true
})

L.marker([51.941196,4.512291], {icon: redMarker}).addTo(map);

License

Contact