https://github.com/danwild/leaflet-fa-markers

Simple svg map markers with FontAwesome icons.
https://github.com/danwild/leaflet-fa-markers

fontawesome leaflet leaflet-plugins markers

Last synced: 5 months ago
JSON representation

Simple svg map markers with FontAwesome icons.

• Host: GitHub
• URL: https://github.com/danwild/leaflet-fa-markers
• Owner: danwild
• License: other
• Created: 2017-02-02T02:12:19.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-03-20T06:13:00.000Z (over 5 years ago)
• Last Synced: 2025-04-13T21:40:39.452Z (6 months ago)
• Topics: fontawesome, leaflet, leaflet-plugins, markers
• Language: JavaScript
• Homepage: https://danwild.github.io/leaflet-fa-markers/
• Size: 49.8 KB
• Stars: 22
• Watchers: 2
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# leaflet-fa-markers [![NPM version][npm-image]][npm-url] [![NPM Downloads][npm-downloads-image]][npm-url]

Very simple vector markers with FontAwesome icons, compatible with Leaflet v1.

![Screenshot](/screenshots/markers.png?raw=true)

## Use:

```javascript

var blueMarker = L.marker([lat, lon], {

  icon: L.icon.fontAwesome({

    iconClasses: "fa fa-info-circle", // you _could_ add other icon classes, not tested.

    // marker/background style

    markerColor: "#00a9ce",

    markerFillOpacity: 0.2,

    markerStrokeWidth: 1,

    markerStrokeColor: "grey",

    // icon style

    iconColor: "#FFF"

  })

}).addTo(map);

var spinningMarker = L.marker([lat, lon], {

  icon: L.icon.fontAwesome({

    iconClasses: "fa fa-circle-o-notch fa-spin",

    markerColor: "#ff89b5",

    iconColor: "#FFF",

    // use XY offsets to nudge positioning of icons, negative accepted

    iconXOffset: -2,

    iconYOffset: 0

  })

}).addTo(map);

// update existing

blueMarker.options.icon.setStyle({ markerColor: "#F00" });

```

## Public methods

| method     | params     | description                           |

| ---------- | ---------- | ------------------------------------- |

| `setStyle` | `{Object}` | update the icon with new style config |

[npm-image]: https://badge.fury.io/js/leaflet-fa-markers.svg

[npm-url]: https://www.npmjs.com/package/leaflet-fa-markers

[npm-downloads-image]: https://img.shields.io/npm/dt/leaflet-fa-markers.svg