Commit 1261c53c70c5d1d9cf1f9eb56866f02aab0dc71c

  • avatar
  • arvind
  • Fri Sep 20 17:18:28 IST 2013
Adding images, css and js for 'red' markers
  
1/*
2Author: L. Voogdt
3License: MIT
4Version: 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
13L.AwesomeMarkers = {};
14
15L.AwesomeMarkers.version = '1.0';
16
17L.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
100L.AwesomeMarkers.icon = function (options) {
101 return new L.AwesomeMarkers.Icon(options);
102};
103
104}(this, document));