L.Icon.FontAwesome=L.Icon.extend({
markerContainer: null,
markerSvg: null,
iconContainer: null,
icon: null,
options: {
popupAnchor: [0, -50]
},
createIcon: function (){
const div=document.createElement("div");
const options=this.options;
if(options.iconClasses){
div.appendChild(this._createIcon());
}
return div;
},
setStyle: function (style){
Object.assign(this.options, style);
const path=this.markerSvg.getElementsByTagName("path")[0];
const icon=this.markerContainer.getElementsByTagName("i")[0];
if(style.hasOwnProperty("markerColor"))
path.setAttribute("fill", style.markerColor);
if(style.hasOwnProperty("markerFillOpacity"))
path.setAttribute("fill-opacity", style.markerFillOpacity);
if(style.hasOwnProperty("markerStrokeColor"))
path.setAttribute("stroke", style.markerStrokeColor);
if(style.hasOwnProperty("markerStrokeWidth"))
path.setAttribute("stroke-width", style.markerStrokeWidth);
if(style.hasOwnProperty("iconXOffset"))
icon.style.marginLeft=`${style.iconXOffset}px`;
if(style.hasOwnProperty("iconYOffset"))
icon.style.marginTop=`${style.iconYOffset}px`;
if(style.hasOwnProperty("iconColor"))
icon.style.color=style.iconColor;
if(style.hasOwnProperty("iconSize"))
icon.style.fontSize=`${style.iconSize}px`;
},
_createIcon: function (){
const options=this.options;
this.markerContainer=L.DomUtil.create("div", "leaflet-fa-markers");
this.iconContainer=L.DomUtil.create("div", 'icon-container');
this.icon=L.DomUtil.create("i",
options.iconClasses + " feature-icon"
);
this.icon.style.color=options.iconColor;
this.icon.style.textAlign="center";
if(options.iconYOffset&&options.iconYOffset!=0)
this.icon.style.marginTop=options.iconYOffset + "px";
if(options.iconXOffset&&options.iconXOffset!=0)
this.icon.style.marginLeft=options.iconXOffset + "px";
if(options.iconSize&&options.iconSize!==0)
this.icon.style.fontSize=`${options.iconSize}px`;
const fillOpacity=options.markerFillOpacity||1;
const strokeColor=options.markerStrokeColor||options.markerColor;
const strokeWidth=options.markerStrokeWidth||1;
this.markerSvg=document.createElement("div");
this.markerSvg.className="marker-icon-svg";
this.markerSvg.innerHTML =
"<svg " +
'width="32px" ' +
'height="52px" ' +
'viewBox="0 0 32 52" ' +
'version="1.1" ' +
'xmlns="http://www.w3.org/2000/svg" ' +
'xmlns:xlink="http://www.w3.org/1999/xlink">' +
`<path d="${options.markerPath}"` +
`fill-opacity="${fillOpacity}"` +
`fill="${options.markerColor}"` +
`stroke="${strokeColor}"` +
`stroke-width="${strokeWidth}"` +
"></path></svg>";
this.iconContainer.appendChild(this.icon)
this.markerContainer.appendChild(this.markerSvg);
this.markerContainer.appendChild(this.iconContainer);
return this.markerContainer;
}});
L.icon.fontAwesome=function (options){
return new L.Icon.FontAwesome(options);
};
L.Icon.FontAwesome.prototype.options.markerPath =
"M16,1 C7.7146,1 1,7.65636364 1,15.8648485 C1,24.0760606 16,51 16,51 C16,51 31,24.0760606 31,15.8648485 C31,7.65636364 24.2815,1 16,1 L16,1 Z";