Y-SLD/assets/plugins/leaflet
AcuGIS 15bbd3d15b commit 2024-03-01 13:23:55 +02:00
..
dist commit 2024-03-01 13:23:55 +02:00
examples commit 2024-03-01 13:23:55 +02:00
fonts commit 2024-03-01 13:23:55 +02:00
images commit 2024-03-01 13:23:55 +02:00
leaflet-awesome commit 2024-03-01 13:23:55 +02:00
leaflet-canvasicon commit 2024-03-01 13:23:55 +02:00
leaflet-measure commit 2024-03-01 13:23:55 +02:00
markercluster commit 2024-03-01 13:23:55 +02:00
print-master commit 2024-03-01 13:23:55 +02:00
screenshots commit 2024-03-01 13:23:55 +02:00
sidebar commit 2024-03-01 13:23:55 +02:00
.gitignore commit 2024-03-01 13:23:55 +02:00
LICENSE commit 2024-03-01 13:23:55 +02:00
Leaflet.awesome-markers-2.0-develop.zip commit 2024-03-01 13:23:55 +02:00
README.md commit 2024-03-01 13:23:55 +02:00
all.css commit 2024-03-01 13:23:55 +02:00
all.css.gz commit 2024-03-01 13:23:55 +02:00
all.js commit 2024-03-01 13:23:55 +02:00
all.js.gz commit 2024-03-01 13:23:55 +02:00
bower.json commit 2024-03-01 13:23:55 +02:00
font-awesome.css commit 2024-03-01 13:23:55 +02:00
fullscreen.png commit 2024-03-01 13:23:55 +02:00
fullscreen@2x.png commit 2024-03-01 13:23:55 +02:00
leaflet.awesome-markers.css commit 2024-03-01 13:23:55 +02:00
leaflet.js commit 2024-03-01 13:23:55 +02:00

README.md

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' 'red', 'darkred', 'orange', 'green', 'darkgreen', 'blue', 'purple', 'darkpuple', '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:

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

Contact

Bitdeli Badge