Needless Patchouli Manufacture

    leaflet-extra-markers
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1 • Public • Published

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

    Keywords

    none

    Install

    npm i leaflet-extra-markers

    DownloadsWeekly Downloads

    3,326

    Version

    1.2.1

    License

    none

    Unpacked Size

    1.54 MB

    Total Files

    34

    Last publish

    Collaborators

    • coryasilva
    • danwild