# @luomus/leaflet.vector-markers

> Vector SVG markers for Leaflet, with an option for Font Awesome/Twitter Bootstrap icons.

Latest version **0.0.6** (published 2023-11-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @luomus/leaflet.vector-markers
pnpm add @luomus/leaflet.vector-markers
yarn add @luomus/leaflet.vector-markers
bun add @luomus/leaflet.vector-markers
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2023-11-02 |
| First published | 2023-11-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 30.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Mathias Maisberger |
| Maintainers | olzraiti, luomus-admin |
| Keywords | Leaflet, Markers, Map, SVG, Vector, Icon |

## Links

- npm: https://www.npmjs.com/package/@luomus/leaflet.vector-markers
- Repository: https://github.com/luomus/Leaflet.vector-markers
- Issues: https://github.com/luomus/Leaflet.vector-markers/issues
- npm.io page: https://npm.io/package/@luomus/leaflet.vector-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

- 0.0.6 (latest) — 2023-11-02

## README

Leaflet.vector-markers
======================

Vector SVG markers for Leaflet, with an option for Font Awesome/Twitter Bootstrap/Maki icons.

Thanks to https://github.com/lvoogdt for https://github.com/lvoogdt/Leaflet.awesome-markers.

Version 0.0.6 of Leaflet.vector-markers is tested with:
- Bootstrap 3
- Font Awesome 4.3
- Leaflet 0.7.7
- Maki icon 0.4.2

## Example

Please have a look at the examples or check out this example: http://codepen.io/anon/pen/Jdayb.

### 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://getbootstrap.com

For Maki icons:
- https://www.mapbox.com/maki/

## 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/


- 2) Next, copy the leaflet-vector-markers.css, and leaflet-vector-markers.js from dist/ to your project and include them:
````xml
<link rel="stylesheet" href="css/leaflet-vector-markers.css">
````
````xml
<script src="js/leaflet-vector-markers.js"></script>
````

- 3) Now use the plugin to create a marker like this:
````js
  // Creates a red marker with the coffee icon
  var redMarker = L.VectorMarkers.icon({
    icon: 'coffee',
    markerColor: 'red'
  });

  L.marker([48.15491,11.54183], {icon: redMarker}).addTo(map);
````

Or for Maki icons

````js
  // Creates a red marker with the bus icon
  var redMarker = L.VectorMarkers.icon({
    icon: 'bus',
    prefix: '',
    extraClasses: 'maki-icon',
    markerColor: 'red'
  });

  L.marker([48.15491,11.54183], {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 | 'fa'          | 'fa' for font-awesome or 'glyphicon' for bootstrap 3 |
| markerColor     | Color of the marker    | 'blue'        | Any HEX color you can find                           |
| iconColor       | Color of the icon      | 'white'       | 'white', 'black' or css code (hex, rgba etc)         |
| opacity         | Opacity of the marker  | 1             | Float between 0.0 and 1.0                            |
| spin            | Make the icon spin     | false         | true or false. Font-awesome required                 |
| extraClasses    | Additional classes in the created <i> 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

## Todo
- SVG shadows
- Adding more shapes
- Support for custom SVG

## License
- Leaflet.VectorMarkers 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
- Website: http://www.hiasinho.com

---
_Source: https://npm.io/package/@luomus/leaflet.vector-markers · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._