Commit 1261c53c70c5d1d9cf1f9eb56866f02aab0dc71c
- Diff rendering mode:
- inline
- side by side
Binary files differ
Binary files differ
Binary files differ
Binary files differ
Binary files differ
Binary files differ
Binary files differ
  | |||
1 | /* | ||
2 | Author: L. Voogdt | ||
3 | License: MIT | ||
4 | Version: 1.0 | ||
5 | */ | ||
6 | |||
7 | /* Marker setup */ | ||
8 | .awesome-marker { | ||
9 | background: url('images/markers-soft.png') no-repeat 0 0; | ||
10 | width: 35px; | ||
11 | height: 46px; | ||
12 | position:absolute; | ||
13 | left:0; | ||
14 | top:0; | ||
15 | display: block; | ||
16 | text-align: center; | ||
17 | } | ||
18 | |||
19 | .awesome-marker-shadow { | ||
20 | background: url('images/markers-shadow.png') no-repeat 0 0; | ||
21 | width: 36px; | ||
22 | height: 16px; | ||
23 | } | ||
24 | |||
25 | /* Retina displays */ | ||
26 | @media (min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2), | ||
27 | (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx) { | ||
28 | .awesome-marker { | ||
29 | background-image: url('images/markers-soft@2x.png'); | ||
30 | background-size: 360px 46px; | ||
31 | } | ||
32 | .awesome-marker-shadow { | ||
33 | background-image: url('images/markers-shadow@2x.png'); | ||
34 | background-size: 35px 16px; | ||
35 | } | ||
36 | } | ||
37 | |||
38 | .awesome-marker i { | ||
39 | color: #333; | ||
40 | margin-top: 10px; | ||
41 | display: inline-block; | ||
42 | font-size: 14px; | ||
43 | } | ||
44 | |||
45 | .awesome-marker .icon-white { | ||
46 | color: #fff; | ||
47 | } | ||
48 | |||
49 | /* Colors */ | ||
50 | .awesome-marker-icon-red { | ||
51 | background-position: 0 0; | ||
52 | } | ||
53 | |||
54 | .awesome-marker-icon-darkred { | ||
55 | background-position: -180px 0; | ||
56 | } | ||
57 | |||
58 | .awesome-marker-icon-orange { | ||
59 | background-position: -36px 0; | ||
60 | } | ||
61 | |||
62 | .awesome-marker-icon-green { | ||
63 | background-position: -72px 0; | ||
64 | } | ||
65 | |||
66 | .awesome-marker-icon-darkgreen { | ||
67 | background-position: -252px 0; | ||
68 | } | ||
69 | |||
70 | .awesome-marker-icon-blue { | ||
71 | background-position: -108px 0; | ||
72 | } | ||
73 | |||
74 | .awesome-marker-icon-darkblue { | ||
75 | background-position: -216px 0; | ||
76 | } | ||
77 | |||
78 | .awesome-marker-icon-purple { | ||
79 | background-position: -144px 0; | ||
80 | } | ||
81 | |||
82 | .awesome-marker-icon-darkpurple { | ||
83 | background-position: -288px 0; | ||
84 | } | ||
85 | |||
86 | .awesome-marker-icon-cadetblue { | ||
87 | background-position: -324px 0; | ||
88 | } |
  | |||
1 | /* | ||
2 | Leaflet.AwesomeMarkers, a plugin that adds colorful iconic markers for Leaflet, based on the Font Awesome icons | ||
3 | (c) 2012-2013, Lennard Voogdt | ||
4 | |||
5 | http://leafletjs.com | ||
6 | https://github.com/lvoogdt | ||
7 | */ | ||
8 | (function (window, document, undefined) { | ||
9 | /* | ||
10 | * Leaflet.AwesomeMarkers assumes that you have already included the Leaflet library. | ||
11 | */ | ||
12 | |||
13 | L.AwesomeMarkers = {}; | ||
14 | |||
15 | L.AwesomeMarkers.version = '1.0'; | ||
16 | |||
17 | L.AwesomeMarkers.Icon = L.Icon.extend({ | ||
18 | options: { | ||
19 | iconSize: [35, 45], | ||
20 | iconAnchor: [17, 42], | ||
21 | popupAnchor: [1, -32], | ||
22 | shadowAnchor: [10, 12], | ||
23 | shadowSize: [36, 16], | ||
24 | className: 'awesome-marker', | ||
25 | icon: 'home', | ||
26 | color: 'blue', | ||
27 | iconColor: 'white' | ||
28 | }, | ||
29 | |||
30 | initialize: function (options) { | ||
31 | options = L.setOptions(this, options); | ||
32 | }, | ||
33 | |||
34 | createIcon: function () { | ||
35 | var div = document.createElement('div'), | ||
36 | options = this.options; | ||
37 | |||
38 | if (options.icon) { | ||
39 | div.innerHTML = this._createInner(); | ||
40 | } | ||
41 | |||
42 | if (options.bgPos) { | ||
43 | div.style.backgroundPosition = | ||
44 | (-options.bgPos.x) + 'px ' + (-options.bgPos.y) + 'px'; | ||
45 | } | ||
46 | |||
47 | this._setIconStyles(div, 'icon-' + options.color); | ||
48 | return div; | ||
49 | }, | ||
50 | |||
51 | _createInner: function() { | ||
52 | var iconClass; | ||
53 | if(this.options.icon.slice(0,5)==="icon-"){ | ||
54 | iconClass=this.options.icon; | ||
55 | }else{ | ||
56 | iconClass="icon-"+this.options.icon; | ||
57 | } | ||
58 | return "<i class='" + iconClass | ||
59 | + (this.options.spin ? " icon-spin" :"") | ||
60 | + (this.options.iconColor ? " icon-" + this.options.iconColor :"") + "'></i>"; | ||
61 | }, | ||
62 | |||
63 | _setIconStyles: function (img, name) { | ||
64 | var options = this.options, | ||
65 | size = L.point(options[name == 'shadow' ? 'shadowSize' : 'iconSize']), | ||
66 | anchor; | ||
67 | |||
68 | if (name === 'shadow') { | ||
69 | anchor = L.point(options.shadowAnchor || options.iconAnchor); | ||
70 | } else { | ||
71 | anchor = L.point(options.iconAnchor); | ||
72 | } | ||
73 | |||
74 | if (!anchor && size) { | ||
75 | anchor = size.divideBy(2, true); | ||
76 | } | ||
77 | |||
78 | img.className = 'awesome-marker-' + name + ' ' + options.className; | ||
79 | |||
80 | if (anchor) { | ||
81 | img.style.marginLeft = (-anchor.x) + 'px'; | ||
82 | img.style.marginTop = (-anchor.y) + 'px'; | ||
83 | } | ||
84 | |||
85 | if (size) { | ||
86 | img.style.width = size.x + 'px'; | ||
87 | img.style.height = size.y + 'px'; | ||
88 | } | ||
89 | }, | ||
90 | |||
91 | createShadow: function () { | ||
92 | var div = document.createElement('div'), | ||
93 | options = this.options; | ||
94 | |||
95 | this._setIconStyles(div, 'shadow'); | ||
96 | return div; | ||
97 | } | ||
98 | }); | ||
99 | |||
100 | L.AwesomeMarkers.icon = function (options) { | ||
101 | return new L.AwesomeMarkers.Icon(options); | ||
102 | }; | ||
103 | |||
104 | }(this, document)); |