L.Icon.Pulse.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. /*!
  2. * Copyright© 2015, Filip Zavadil
  3. *
  4. * L.Icon.Pulse.js
  5. * github: https://github.com/mapshakers/leaflet-icon-pulse
  6. * license: MIT License
  7. *
  8. */
  9. (function(window) {
  10. L.Icon.Pulse = L.DivIcon.extend({
  11. options: {
  12. className: '',
  13. iconSize: [12,12],
  14. color: 'red',
  15. animate: true,
  16. heartbeat: 1,
  17. },
  18. initialize: function (options) {
  19. L.setOptions(this,options);
  20. // css
  21. var uniqueClassName = 'lpi-'+ new Date().getTime()+'-'+Math.round(Math.random()*100000);
  22. var before = ['background-color: '+this.options.color];
  23. var after = [
  24. 'box-shadow: 0 0 6px 2px '+this.options.color,
  25. 'animation: pulsate ' + this.options.heartbeat + 's ease-out',
  26. 'animation-iteration-count: infinite',
  27. 'animation-delay: '+ (this.options.heartbeat + .1) + 's',
  28. ];
  29. if (!this.options.animate){
  30. after.push('animation: none');
  31. after.push('box-shadow:none');
  32. }
  33. var css = [
  34. '.'+uniqueClassName+'{'+before.join(';')+';}',
  35. '.'+uniqueClassName+':after{'+after.join(';')+';}',
  36. ].join('');
  37. var el = document.createElement('style');
  38. if (el.styleSheet){
  39. el.styleSheet.cssText = css;
  40. } else {
  41. el.appendChild(document.createTextNode(css));
  42. }
  43. document.getElementsByTagName('head')[0].appendChild(el);
  44. // apply css class
  45. this.options.className = this.options.className+' leaflet-pulsing-icon '+uniqueClassName;
  46. // initialize icon
  47. L.DivIcon.prototype.initialize.call(this, options);
  48. }
  49. });
  50. L.icon.pulse = function (options) {
  51. return new L.Icon.Pulse(options);
  52. };
  53. L.Marker.Pulse = L.Marker.extend({
  54. initialize: function (latlng,options) {
  55. options.icon = L.icon.pulse(options);
  56. L.Marker.prototype.initialize.call(this, latlng, options);
  57. }
  58. });
  59. L.marker.pulse = function (latlng,options) {
  60. return new L.Marker.Pulse(latlng,options);
  61. };
  62. })(window);