docs/leaflet-awesome-markers/README.md

In benubah/r-community-explorer: A way to run R scripts automatically

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 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="css/leaflet.awesome-markers.css">

<script src="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);

Properties

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

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:

    .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

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: [e-mail]
• Website: http://lennardvoogdt.nl

benubah/r-community-explorer documentation built on Feb. 3, 2022, 6:46 a.m.