diff --git a/dist/Leaflet.vector-markers.js b/dist/Leaflet.vector-markers.js index d7f512b..46ecdc4 100644 --- a/dist/Leaflet.vector-markers.js +++ b/dist/Leaflet.vector-markers.js @@ -4,6 +4,7 @@ L.VectorMarkers = {}; L.VectorMarkers.version = "1.0.0"; L.VectorMarkers.MAP_PIN = 'M24 0c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z'; + L.VectorMarkers.SQUARE_ROUNDED = 'M24-8c0 4.4-3.6 8-8 8h-32c-4.4 0-8-3.6-8-8v-32c0-4.4 3.6-8 8-8h32c4.4 0 8 3.6 8 8v32z'; L.VectorMarkers.Icon = L.Icon.extend({ options: { iconSize: [48, 48], @@ -19,16 +20,27 @@ icon: "home", markerColor: "blue", iconColor: "white", - viewBox: '0 0 48 48' + viewBox: '0 0 48 48', + path: L.VectorMarkers.MAP_PIN //default to map_pin path }, initialize: function(options) { return options = L.Util.setOptions(this, options); }, - createIcon: function(oldIcon) { + createIcon: function(oldIcon) { var div, options, pin_path; div = (oldIcon && oldIcon.tagName === "DIV" ? oldIcon : document.createElement("div")); options = this.options; - pin_path = options.map_pin || L.VectorMarkers.MAP_PIN; + pin_path = options.path || L.VectorMarkers.MAP_PIN; + if (options.path == L.VectorMarkers.MAP_PIN){ + options.viewBox = '0 0 48 48'; + } + else if (options.path == L.VectorMarkers.SQUARE_ROUNDED){ //custom options for the square_rounded vector path + options.viewBox = '-24 -48 48 48'; + options.iconSize = [40, 36]; + options.iconAnchor = [28,36]; + options.shadowSize = [50,30]; + options.shadowAnchor = [15,30]; + } div.innerHTML = '' + '' + ''; if (options.icon) { div.appendChild(this._createInner()); diff --git a/dist/Leaflet.vector-markers.min.js b/dist/Leaflet.vector-markers.min.js index f1f3900..cd91ba8 100644 --- a/dist/Leaflet.vector-markers.min.js +++ b/dist/Leaflet.vector-markers.min.js @@ -1 +1 @@ -/*! Leaflet.vector-markers - v0.0.3 - 2016-04-29 */(function(){!function(a,b,c){"use strict";return L.VectorMarkers={},L.VectorMarkers.version="1.0.0",L.VectorMarkers.MAP_PIN="M24 0c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z",L.VectorMarkers.Icon=L.Icon.extend({options:{iconSize:[48,48],iconAnchor:[28,48],popupAnchor:[2,-40],shadowAnchor:[7,45],shadowSize:[54,51],className:"vector-marker",prefix:"fa",spinClass:"fa-spin",extraIconClasses:"",extraDivClasses:"",icon:"home",markerColor:"blue",iconColor:"white",viewBox:"0 0 48 48"},initialize:function(a){return a=L.Util.setOptions(this,a)},createIcon:function(a){var c,d,e;return c=a&&"DIV"===a.tagName?a:b.createElement("div"),d=this.options,e=d.map_pin||L.VectorMarkers.MAP_PIN,c.innerHTML='',d.icon&&c.appendChild(this._createInner()),d.className+=d.className.length>0?" "+d.extraDivClasses:d.extraDivClasses,this._setIconStyles(c,"icon"),this._setIconStyles(c,"icon-"+d.markerColor),c},_createInner:function(){var a,c,d,e,f,g,h,i;return a=b.createElement("i"),c=void 0,f="",d="",e=void 0,h=void 0,g="style='",i=this.options,a.classList.add(i.prefix),i.extraClasses&&a.classList.add(i.extraClasses),i.icon.slice(0,i.prefix.length+1)===i.prefix+"-"?a.classList.add(i.icon):a.classList.add(i.prefix+"-"+i.icon),i.spin&&"string"==typeof i.spinClass&&a.classList.add(i.spinClass),i.iconColor&&("white"===i.iconColor||"black"===i.iconColor?a.classList.add("icon-"+i.iconColor):a.style.color=i.iconColor),i.iconSize&&(a.style.width=i.iconSize[0]+"px"),a},_setIconStyles:function(a,b){var c,d,e;return d=this.options,e=L.point(d["shadow"===b?"shadowSize":"iconSize"]),c=void 0,c="shadow"===b?L.point(d.shadowAnchor||d.iconAnchor):L.point(d.iconAnchor),!c&&e&&(c=e.divideBy(2,!0)),a.className="vector-marker-"+b+" "+d.className,c&&(a.style.marginLeft=-c.x+"px",a.style.marginTop=-c.y+"px"),e?(a.style.width=e.x+"px",a.style.height=e.y+"px"):void 0},createShadow:function(){var a;return a=b.createElement("div"),this._setIconStyles(a,"shadow"),a}}),L.VectorMarkers.icon=function(a){return new L.VectorMarkers.Icon(a)}}(this,document)}).call(this); \ No newline at end of file +(function(){!function(e,o,i){"use strict";return L.VectorMarkers={},L.VectorMarkers.version="1.0.0",L.VectorMarkers.MAP_PIN="M24 0c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z",L.VectorMarkers.SQUARE_ROUNDED="M24-8c0 4.4-3.6 8-8 8h-32c-4.4 0-8-3.6-8-8v-32c0-4.4 3.6-8 8-8h32c4.4 0 8 3.6 8 8v32z",L.VectorMarkers.Icon=L.Icon.extend({options:{iconSize:[48,48],iconAnchor:[28,48],popupAnchor:[2,-40],shadowAnchor:[7,45],shadowSize:[54,51],className:"vector-marker",prefix:"fa",spinClass:"fa-spin",extraIconClasses:"",extraDivClasses:"",icon:"home",markerColor:"blue",iconColor:"white",viewBox:"0 0 48 48",path:"M24 0c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z"},initialize:function(e){return e=L.Util.setOptions(this,e)},createIcon:function(e){var i,s,t;return i=e&&"DIV"===e.tagName?e:o.createElement("div"),s=this.options,t=s.path||L.VectorMarkers.MAP_PIN,s.path==L.VectorMarkers.MAP_PIN?s.viewBox="0 0 48 48":s.path==L.VectorMarkers.SQUARE_ROUNDED&&(s.viewBox="-24 -48 48 48",s.iconSize=[40,36],s.iconAnchor=[28,36],s.shadowSize=[50,30],s.shadowAnchor=[15,30]),i.innerHTML='',s.icon&&i.appendChild(this._createInner()),s.className+=s.className.length>0?" "+s.extraDivClasses:s.extraDivClasses,this._setIconStyles(i,"icon"),this._setIconStyles(i,"icon-"+s.markerColor),i},_createInner:function(){var e,i,s,t,r,n,c,a;return e=o.createElement("i"),i=void 0,r="",s="",t=void 0,c=void 0,n="style='",a=this.options,e.classList.add(a.prefix),a.extraClasses&&e.classList.add(a.extraClasses),a.icon.slice(0,a.prefix.length+1)===a.prefix+"-"?e.classList.add(a.icon):e.classList.add(a.prefix+"-"+a.icon),a.spin&&"string"==typeof a.spinClass&&e.classList.add(a.spinClass),a.iconColor&&("white"===a.iconColor||"black"===a.iconColor?e.classList.add("icon-"+a.iconColor):e.style.color=a.iconColor),a.iconSize&&(e.style.width=a.iconSize[0]+"px"),e},_setIconStyles:function(e,o){var i,s,t;return s=this.options,t=L.point(s["shadow"===o?"shadowSize":"iconSize"]),i=void 0,i="shadow"===o?L.point(s.shadowAnchor||s.iconAnchor):L.point(s.iconAnchor),!i&&t&&(i=t.divideBy(2,!0)),e.className="vector-marker-"+o+" "+s.className,i&&(e.style.marginLeft=-i.x+"px",e.style.marginTop=-i.y+"px"),t?(e.style.width=t.x+"px",e.style.height=t.y+"px"):void 0},createShadow:function(){var e;return e=o.createElement("div"),this._setIconStyles(e,"shadow"),e}}),L.VectorMarkers.icon=function(e){return new L.VectorMarkers.Icon(e)}}(this,document)}).call(this); \ No newline at end of file diff --git a/examples/basic.html b/examples/basic.html index 85c42a8..1489e68 100644 --- a/examples/basic.html +++ b/examples/basic.html @@ -25,7 +25,16 @@ attribution: '© OpenStreetMap contributors', detectRetina: true }).addTo(map); + + var customMarker = L.VectorMarkers.icon({ + icon: "question", + markerColor: "purple", + iconColor: "yellow", + path: 'M24-8c0 4.4-3.6 8-8 8h-32c-4.4 0-8-3.6-8-8v-32c0-4.4 3.6-8 8-8h32c4.4 0 8 3.6 8 8v32z', + spin: true + }); + L.marker([48.15491,11.55183], {icon: customMarker}).addTo(map); L.marker([48.15491,11.54183], {icon: L.VectorMarkers.icon({icon: 'spinner', prefix: 'fa', markerColor: '#cb4b16', spin: true}) }).addTo(map); L.marker([48.15391,11.53283], {icon: L.VectorMarkers.icon({icon: 'rocket', prefix: 'fa', markerColor: '#002b36', iconColor: '#eee8d5'}) }).addTo(map); L.marker([48.15391,11.52283], {icon: L.VectorMarkers.icon({icon: 'rocket', prefix: 'fa', markerColor: '#eee8d5', iconColor: '#002b36'}) }).addTo(map);