# Code coverage report for src/layer/marker/Icon.js

## Statements: 72.97% (27 / 37) Branches: 45.45% (10 / 22) Functions: 75% (6 / 8) Lines: 72.97% (27 / 37)

All files » src/layer/marker/ » Icon.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102

    1

    1

    2

    2

    4

    4

    4
    4

    4

    4

    4
    2

    2

    4

    4

    4
    4
    4

    4
    4
    4

    4

    4
    4
    4

    4

    1

     /*
     * L.Icon is an image-based icon class that you can use with L.Marker for custom markers.
     */

    L.Icon = L.Class.extend({
    	options: {
    		/*
    		iconUrl: (String) (required)
    		iconRetinaUrl: (String) (optional, used for retina devices if detected)
    		iconSize: (Point) (can be set through CSS)
    		iconAnchor: (Point) (centered by default, can be set in CSS with negative margins)
    		popupAnchor: (Point) (if not specified, popup opens in the anchor point)
    		shadowUrl: (Point) (no shadow by default)
    		shadowRetinaUrl: (String) (optional, used for retina devices if detected)
    		shadowSize: (Point)
    		shadowAnchor: (Point)
    		*/
    		className: ''
    	},

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

    	createIcon: function () {
    		return this._createIcon('icon');
    	},

    	createShadow: function () {
    		return this._createIcon('shadow');
    	},

    	_createIcon: function (name) {
    		var src = this._getIconUrl(name);

    		Iif (!src) {
    			if (name === 'icon') {
    				throw new Error("iconUrl not set in Icon options (see the docs).");
    			}
    			return null;
    		}

    		var img = this._createImg(src);
    		this._setIconStyles(img, name);

    		return img;
    	},

    	_setIconStyles: function (img, name) {
    		var options = this.options,
    		    size = L.point(options[name + 'Size']),
    		    anchor;

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

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

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

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

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

    	_createImg: function (src) {
    		var el;

    		Eif (!L.Browser.ie6) {
    			el = document.createElement('img');
    			el.src = src;
    		} else {
    			el = document.createElement('div');
    			el.style.filter =
    			        'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '")';
    		}
    		return el;
    	},

    	_getIconUrl: function (name) {
    		if (L.Browser.retina && this.options[name + 'RetinaUrl']) {
    			return this.options[name + 'RetinaUrl'];
    		}
    		return this.options[name + 'Url'];
    	}
    });

    L.icon = function (options) {
    	return new L.Icon(options);
    };