Package Exports

leaflet.awesome-markers
leaflet.awesome-markers/dist/leaflet.awesome-markers.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (leaflet.awesome-markers) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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
Ionicons 1.5.2
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:

http://twitter.github.com/bootstrap/

For Ionicons:

http://ionicons.com

Using the plugin

1. First, follow the steps for including Font-Awesome or Twitter bootstrap or Ionicons 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/

For Ionicons:

Add the ionicon stylesheet from a CDN or download ionicons.

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css">

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'	'white', 'red','darkred', 'lightred', 'orange', 'beige', 'green', 'darkgreen', 'lightgreen', 'blue', 'darkblue', 'lightblue', 'purple', 'darkpurple', 'pink', 'cadetblue', 'white', 'gray', 'lightgray', 'black'
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
extraClasses	Additional classes in the created tag	''	'fa-rotate90 myclass' eller other custom configuration

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
Or: http://ionicons.com

Tips & Tricks

Tweak size and positioning of the icons:

    .awesome-marker i {
        font-size: 18px;
        margin-top: 8px;
    }

Set default prefix to something other than glypicon

    L.AwesomeMarkers.Icon.prototype.options.prefix = 'ion';

See JSFIddle

Using Square Markers

Square Markers screenshot

  // Creates a red square marker with the coffee icon
  var squareRedMarker = L.AwesomeMarkers.icon({
    icon: 'coffee',
    markerColor: 'red'
    className: 'awesome-marker awesome-marker-square'
  });

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: atendimento@sigmageosistemas.com.br
Website: http://www.sigmageosistemas.com.br