Colorful iconic & retina-proof markers for Leaflet, based on the Glyphicons / Font-Awesome icons
Version 2.0 of Leaflet.awesome-markers is tested with:
For bootstrap 2.x & Fontawesome 3.x use Leaflet.awesome-markers v1.0
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:
For Ionicons:
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">
2) Next, copy the dist/images directory, awesome-markers.css, and awesome-markers.js to your project and include them:
<link rel="stylesheet" href="https://github.com/lennardv2/Leaflet.awesome-markers/blob/2.0/develop/css/leaflet.awesome-markers.css">
<script src="https://github.com/lennardv2/Leaflet.awesome-markers/raw/2.0/develop/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',
markerColor: 'red'
});
L.marker([51.941196,4.512291], {icon: redMarker}).addTo(map);
Property | Description | Default Value | Possible values |
---|---|---|---|
icon | Name of the icon | 'home' | See glyphicons or font-awesome |
prefix | Select the 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', 'darkpurple', '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 |
extraClasses | Additional classes in the created tag | '' | 'fa-rotate90 myclass' eller other custom configuration |
The 'icon' property supports these strings:
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
Check out Color Gradient, a tool for creating CSS Gradients.