+ /**
+ * Compatible with L.Circle but a true marker instead of a path
+ */
+ var LocationMarker = L.Marker.extend({
+ initialize: function (latlng, options) {
+ L.Util.setOptions(this, options);
+ this._latlng = latlng;
+ this.createIcon();
+ },
+
+ /**
+ * Create a styled circle location marker
+ */
+ createIcon: function() {
+ var opt = this.options;
+
+ var style = '';
+
+ if (opt.color !== undefined) {
+ style += 'stroke:'+opt.color+';';
+ }
+ if (opt.weight !== undefined) {
+ style += 'stroke-width:'+opt.weight+';';
+ }
+ if (opt.fillColor !== undefined) {
+ style += 'fill:'+opt.fillColor+';';
+ }
+ if (opt.fillOpacity !== undefined) {
+ style += 'fill-opacity:'+opt.fillOpacity+';';
+ }
+ if (opt.opacity !== undefined) {
+ style += 'opacity:'+opt.opacity+';';
+ }
+
+ var icon = this._getIconSVG(opt, style);
+
+ this._locationIcon = L.divIcon({
+ className: icon.className,
+ html: icon.svg,
+ iconSize: [icon.w,icon.h],
+ });
+
+ this.setIcon(this._locationIcon);
+ },
+
+ /**
+ * Return the raw svg for the shape
+ *
+ * Split so can be easily overridden
+ */
+ _getIconSVG: function(options, style) {
+ var r = options.radius;
+ var w = options.weight;
+ var s = r + w;
+ var s2 = s * 2;
+ var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="'+s2+'" height="'+s2+'" version="1.1" viewBox="-'+s+' -'+s+' '+s2+' '+s2+'">' +
+ '<circle r="'+r+'" style="'+style+'" />' +
+ '</svg>';
+ return {
+ className: 'leaflet-control-locate-location',
+ svg: svg,
+ w: s2,
+ h: s2
+ };
+ },
+
+ setStyle: function(style) {
+ L.Util.setOptions(this, style);
+ this.createIcon();
+ }
+ });
+
+ var CompassMarker = LocationMarker.extend({
+ initialize: function (latlng, heading, options) {
+ L.Util.setOptions(this, options);
+ this._latlng = latlng;
+ this._heading = heading;
+ this.createIcon();
+ },
+
+ setHeading: function(heading) {
+ this._heading = heading;
+ },
+
+ /**
+ * Create a styled arrow compass marker
+ */
+ _getIconSVG: function(options, style) {
+ var r = options.radius;
+ var w = (options.width + options.weight);
+ var h = (r+options.depth + options.weight)*2;
+ var path = 'M0,0 l'+(options.width/2)+','+options.depth+' l-'+(w)+',0 z';
+ var svgstyle = 'transform: rotate('+this._heading+'deg)';
+ var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="'+(w)+'" height="'+h+'" version="1.1" viewBox="-'+(w/2)+' 0 '+w+' '+h+'" style="'+svgstyle+'">'+
+ '<path d="'+path+'" style="'+style+'" />'+
+ '</svg>';
+ return {
+ className: 'leafet-control-locate-heading',
+ svg: svg,
+ w: w,
+ h: h
+ };
+ },
+ });
+
+