Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use google material design icon ? #64

Open
LucaMoiana opened this issue Aug 26, 2015 · 4 comments
Open

Use google material design icon ? #64

LucaMoiana opened this issue Aug 26, 2015 · 4 comments

Comments

@LucaMoiana
Copy link

Any plan on supporting new google material design icons?
https://www.google.com/design/icons/

@MRokas
Copy link

MRokas commented Sep 18, 2015

You pretty much can use any icon font, easiest method would be just changing classnames in .css

@ronnievsmith
Copy link

Keep the css as is but use this js instead and the material-icons will render properly.

/*
Leaflet.AwesomeMarkers, a plugin that adds colorful iconic markers for Leaflet, based on the Font Awesome icons
(c) 2012-2013, Lennard Voogdt

http://leafletjs.com
https://github.com/lvoogdt
*/

/global L/

(function (window, document, undefined) {
"use strict";
/*
* Leaflet.AwesomeMarkers assumes that you have already included the Leaflet library.
*/

L.AwesomeMarkers = {};

L.AwesomeMarkers.version = '2.0.1';

L.AwesomeMarkers.Icon = L.Icon.extend({
    options: {
        iconSize: [35, 45],
        iconAnchor:   [17, 42],
        popupAnchor: [1, -32],
        shadowAnchor: [10, 12],
        shadowSize: [36, 16],
        className: 'awesome-marker',
        prefix: '',
        spinClass: 'fa-spin',
        extraClasses: '',
        icon: 'home',
        markerColor: 'blue',
        iconColor: 'white'
    },

    initialize: function (options) {
        options = L.Util.setOptions(this, options);
    },

    createIcon: function () {
        var div = document.createElement('div'),
            options = this.options;

        if (options.icon) {
            div.innerHTML = this._createInner();
        }

        if (options.bgPos) {
            div.style.backgroundPosition =
                (-options.bgPos.x) + 'px ' + (-options.bgPos.y) + 'px';
        }

        this._setIconStyles(div, 'icon-' + options.markerColor);
        return div;
    },

    _createInner: function() {
        var iconClass, iconSpinClass = "", iconColorClass = "", iconColorStyle = "", options = this.options;

        if(options.icon.slice(0,options.prefix.length+1) === options.prefix + "-") {
            iconClass = options.icon;
        } else {
            iconClass = options.icon;
        }

        if(options.spin && typeof options.spinClass === "string") {
            iconSpinClass = options.spinClass;
        }

        if(options.iconColor) {
            if(options.iconColor === 'white' || options.iconColor === 'black') {
                iconColorClass = "icon-" + options.iconColor;
            } else {
                iconColorStyle = "style='color: " + options.iconColor + "' ";
            }
        }  
    return  "<i " + iconColorStyle + "class='material-icons " + iconColorClass + "'>" + iconClass + "</i>";
    },

    _setIconStyles: function (img, name) {
        var options = this.options,
            size = L.point(options[name === 'shadow' ? 'shadowSize' : 'iconSize']),
            anchor;

        if (name === 'shadow') {
            anchor = L.point(options.shadowAnchor || options.iconAnchor);
        } else {
            anchor = L.point(options.iconAnchor);
        }

        if (!anchor && size) {
            anchor = size.divideBy(2, true);
        }

        img.className = 'awesome-marker-' + name + ' ' + options.className;

        if (anchor) {
            img.style.marginLeft = (-anchor.x) + 'px';
            img.style.marginTop  = (-anchor.y) + 'px';
        }

        if (size) {
            img.style.width  = size.x + 'px';
            img.style.height = size.y + 'px';
        }
    },

    createShadow: function () {
        var div = document.createElement('div');

        this._setIconStyles(div, 'shadow');
        return div;
  }
});

L.AwesomeMarkers.icon = function (options) {
    return new L.AwesomeMarkers.Icon(options);
};}(this, document));

// end //

@chriszrc
Copy link

chriszrc commented May 4, 2017

This certainly works, but it would be great to not have to override the source code to make it work, maybe a "html" option or something could be added for these more low level changes-

@clopezpro
Copy link

not working draggable

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants