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

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:

http://twitter.github.com/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);

Supported icons

The 'icon' property supports these strings:

'home'
'glass'
'flag'
'star'
'bookmark'
.... and many more, see: http://fortawesome.github.io/Font-Awesome/icons/
Or: http://getbootstrap.com/components/#glyphicons

License

Leaflet.AwesomeMarkers and colored markers are licensed under the MIT License - http://opensource.org/licenses/mit-license.html.
Font Awesome: http://fortawesome.github.io/Font-Awesome/license/
Twitter Bootstrap: http://getbootstrap.com/

Contact

Email: [email protected]
Website: http://lennardvoogdt.nl

2.3 KiB Raw Blame History