leaflet.awesome-markers.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  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. http://leafletjs.com
  5. https://github.com/lvoogdt
  6. */
  7. /*global L*/
  8. (function (window, document, undefined) {
  9. "use strict";
  10. /*
  11. * Leaflet.AwesomeMarkers assumes that you have already included the Leaflet library.
  12. */
  13. L.AwesomeMarkers = {};
  14. L.AwesomeMarkers.version = '2.0.1';
  15. L.AwesomeMarkers.Icon = L.Icon.extend({
  16. options: {
  17. iconSize: [35, 45],
  18. iconAnchor: [17, 42],
  19. popupAnchor: [1, -32],
  20. shadowAnchor: [10, 12],
  21. shadowSize: [36, 16],
  22. className: 'awesome-marker',
  23. prefix: 'glyphicon',
  24. spinClass: 'fa-spin',
  25. extraClasses: '',
  26. icon: 'home',
  27. markerColor: 'blue',
  28. iconColor: 'white'
  29. },
  30. initialize: function (options) {
  31. options = L.Util.setOptions(this, options);
  32. },
  33. createIcon: function () {
  34. var div = document.createElement('div'),
  35. options = this.options;
  36. if (options.icon) {
  37. div.innerHTML = this._createInner();
  38. }
  39. if (options.bgPos) {
  40. div.style.backgroundPosition =
  41. (-options.bgPos.x) + 'px ' + (-options.bgPos.y) + 'px';
  42. }
  43. this._setIconStyles(div, 'icon-' + options.markerColor);
  44. return div;
  45. },
  46. _createInner: function() {
  47. var iconClass, iconSpinClass = "", iconColorClass = "", iconColorStyle = "", options = this.options;
  48. if(options.icon.slice(0,options.prefix.length+1) === options.prefix + "-") {
  49. iconClass = options.icon;
  50. } else {
  51. iconClass = options.prefix + "-" + options.icon;
  52. }
  53. if(options.spin && typeof options.spinClass === "string") {
  54. iconSpinClass = options.spinClass;
  55. }
  56. if(options.iconColor) {
  57. if(options.iconColor === 'white' || options.iconColor === 'black') {
  58. iconColorClass = "icon-" + options.iconColor;
  59. } else {
  60. iconColorStyle = "style='color: " + options.iconColor + "' ";
  61. }
  62. }
  63. return "<i " + iconColorStyle + "class='" + options.extraClasses + " " + options.prefix + " " + iconClass + " " + iconSpinClass + " " + iconColorClass + "'></i>";
  64. },
  65. _setIconStyles: function (img, name) {
  66. var options = this.options,
  67. size = L.point(options[name === 'shadow' ? 'shadowSize' : 'iconSize']),
  68. anchor;
  69. if (name === 'shadow') {
  70. anchor = L.point(options.shadowAnchor || options.iconAnchor);
  71. } else {
  72. anchor = L.point(options.iconAnchor);
  73. }
  74. if (!anchor && size) {
  75. anchor = size.divideBy(2, true);
  76. }
  77. img.className = 'awesome-marker-' + name + ' ' + options.className;
  78. if (anchor) {
  79. img.style.marginLeft = (-anchor.x) + 'px';
  80. img.style.marginTop = (-anchor.y) + 'px';
  81. }
  82. if (size) {
  83. img.style.width = size.x + 'px';
  84. img.style.height = size.y + 'px';
  85. }
  86. },
  87. createShadow: function () {
  88. var div = document.createElement('div');
  89. this._setIconStyles(div, 'shadow');
  90. return div;
  91. }
  92. });
  93. L.AwesomeMarkers.icon = function (options) {
  94. return new L.AwesomeMarkers.Icon(options);
  95. };
  96. }(this, document));