# leaflet.awesome-markers
> Leaflet Awesome Markers - allows you to display custom icons easily using Leaflet
Latest version **2.0.5** (published 2018-12-05) · ISC license · 0 weekly downloads
## Install
```sh
npm install leaflet.awesome-markers
pnpm add leaflet.awesome-markers
yarn add leaflet.awesome-markers
bun add leaflet.awesome-markers
```
## Health
**Score 23/100 (F)** — status: abandoned.
Positive: has types package; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.0.5 |
| Published | 2018-12-05 |
| First published | 2017-01-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | separate (@types/leaflet.awesome-markers) |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 40 |
| Author | Lennard Voogdt and Sigma Geosistemas |
| Maintainers | george-silva |
| Keywords | leaflet, map, icons |
## Links
- npm: https://www.npmjs.com/package/leaflet.awesome-markers
- Repository: https://github.com/sigma-geosistemas/Leaflet.awesome-markers
- Homepage: https://github.com/sigma-geosistemas/Leaflet.awesome-markers#readme
- Issues: https://github.com/sigma-geosistemas/Leaflet.awesome-markers/issues
- npm.io page: https://npm.io/package/leaflet.awesome-markers
## Alternatives
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads
## Recent versions
- 2.0.5 (latest) — 2018-12-05
- 2.0.4 — 2017-01-23
- 2.0.0 — 2017-01-23
- 1.0.0 — 2017-01-19
## 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
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
- http://fortawesome.github.com/Font-Awesome/
- http://fortawesome.github.com/Font-Awesome/#integration
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](http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css) or [download ionicons](http://ionicons.com).
````xml
````
- 2) Next, copy the dist/images directory, awesome-markers.css, and awesome-markers.js to your project and include them:
````xml
````
````xml
````
- 3) Now use the plugin to create a marker like this:
````js
// 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:
````css
.awesome-marker i {
font-size: 18px;
margin-top: 8px;
}
````
Set default prefix to something other than `glypicon`
````js
L.AwesomeMarkers.Icon.prototype.options.prefix = 'ion';
````
See [JSFIddle](http://jsfiddle.net/markmarijnissen/VPzu4/286/)
### Using Square Markers
````js
// 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
---
_Source: https://npm.io/package/leaflet.awesome-markers · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._