Nietzsche's Preposterous Moustache

    leaflet.awesome-markers
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/leaflet.awesome-markers package

    2.0.5 • Public • Published

    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:

    For Ionicons:

    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:

    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

    Contact

    Install

    npm i leaflet.awesome-markers

    DownloadsWeekly Downloads

    8,797

    Version

    2.0.5

    License

    ISC

    Unpacked Size

    1.06 MB

    Total Files

    27

    Last publish

    Collaborators

    • george-silva