Skip to content

coryasilva/Leaflet.ExtraMarkers

Repository files navigation

Leaflet.extra-markers

Big Thanks to lvoogdt of Leaflet.awesome-markers

ExtraMarkers screenshot

Demo

Icons

Leaflet.extra-markers is designed for:

Using the plugin

1. Requirements

Follow the getting started guide for the desired font library and make sure its included in your project.

2. Installing Leaflet.extra-markers

Next, copy the dist/img directory, /dist/css/leaflet.extra-markers.min.css, and /dist/js/leaflet.extra-markers.min.js to your project and include them:

<link rel="stylesheet" href="css/leaflet.extra-markers.min.css">

or

@import 'bower_components/src/assets/less/Leaflet.extra-markers.less

and

<script src="js/leaflet.extra-markers.min.js"></script>

3. Creating a Marker

Now use the plugin to create a marker like this:

  // Creates a red marker with the coffee icon
  var redMarker = L.ExtraMarkers.icon({
    icon: 'fa-coffee',
    markerColor: 'red',
    shape: 'square',
    prefix: 'fa'
  });

  L.marker([51.941196,4.512291], {icon: redMarker}).addTo(map);

Properties

Property Description Default Value Possible values
extraClasses Additional classes in the created <i> tag '' fa-rotate90 myclass; space delimited classes to add
icon Name of the icon with prefix '' fa-coffee (see icon library's documentation)
iconColor Color of the icon 'white' 'white', 'black' or css code (hex, rgba etc)
iconRotate Rotates the icon with css transformations 0 numeric degrees
innerHTML Custom HTML code '' <svg>, images, or other HTML; a truthy assignment will override the default html icon creation behavior
markerColor Color of the marker (css class) 'blue' 'red', 'orange-dark', 'orange', 'yellow', 'blue-dark', 'cyan', 'purple', 'violet', 'pink', 'green-dark', 'green', 'green-light', 'black', 'white', or color hex code if svg is true
number Instead of an icon, define a plain text '' '1' or 'A', must set icon: 'fa-number'
prefix The icon library's base class 'glyphicon' fa (see icon library's documentation)
shape Shape of the marker (css class) 'circle' 'circle', 'square', 'star', or 'penta'
svg Use SVG version false true or false
svgBorderColor (DEPRECATED has not effect) '#fff' any valid hex color
svgOpacity (DEPRECATED has not effect) 1 decimal range from 0 to 1

License