Fork: 0
natto / leaflet_plugins
Download ZIP 28commits
Transfer to URL with SHA
leaflet_plugins / Leaflet.ExtraMarkers-master /
latest commit cc19968a38
@natto natto authored on 18 Dec 2018
..
build/ grunt-config add_Leaflet_ExtraMarkers 5 years ago
dist add_Leaflet_ExtraMarkers 5 years ago
src/ assets add_Leaflet_ExtraMarkers 5 years ago
.gitignore add_Leaflet_ExtraMarkers 5 years ago
Gruntfile.js add_Leaflet_ExtraMarkers 5 years ago
LICENSE add_Leaflet_ExtraMarkers 5 years ago
README.md add_Leaflet_ExtraMarkers 5 years ago
bower.json add_Leaflet_ExtraMarkers 5 years ago
package-lock.json add_Leaflet_ExtraMarkers 5 years ago
package.json add_Leaflet_ExtraMarkers 5 years ago
screenshot.png add_Leaflet_ExtraMarkers 5 years ago
test.html add_Leaflet_ExtraMarkers 5 years ago
README.md

Leaflet.extra-markers

Big Thanks to lvoogdt of Leaflet.awesome-markers

ExtraMarkers screenshot

Demo

Icons

Version 1.0 of 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)
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', or 'white'
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'

License