# leaflet-map/2.16.2/scripts/leaflet-svg-icon.js

Leaflet Map, version 2.16.2. 91 lines.

- Page: https://pluginprobe.com/plugins/leaflet-map/2.16.2/code/scripts/leaflet-svg-icon.js
- Raw: https://pluginprobe.com/plugins/leaflet-map/2.16.2/raw/scripts/leaflet-svg-icon.js
- Modified: 2018-11-26T04:15:02+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/leaflet-map/2.16.2/code/scripts/leaflet-svg-icon.js#L10-L20`.

```javascript
L.SVGIcon = L.Icon.extend({
  options: {
    iconSize: [26, 42],
    popupAnchor: [1, -42],
    tooltipAnchor: [16, -28],
    iconClass: '',
    background: '#2b82cb',
    color: 'white'
  },
  createIcon: function(oldIcon) {
    var div =
      oldIcon && oldIcon.tagName === 'DIV'
        ? oldIcon
        : document.createElement('div')
    var options = this.options
    var size = options.iconSize
    var x = size[0]
    var y = size[1]

    var svgCreate = function svgCreate(tag, attrs) {
      var el = document.createElementNS('http://www.w3.org/2000/svg', tag)
      for (var k in attrs) {
        el.setAttribute(k, attrs[k])
      }
      return el
    }

    var svg = svgCreate('svg', {
      viewBox: '0 0 365 560'
    })

    var path = svgCreate('path', {
      fill: this.options.background,
      d:
        'M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,' +
        '283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9' +
        'C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,' +
        '175.3,357.4S182.9,551.7,182.9,551.7z'
    })

    svg.appendChild(path)
    div.appendChild(svg)

    div.setAttribute(
      'style',
      'margin-left: ' +
        -x / 2 +
        'px;' +
        'margin-top: ' +
        -y +
        'px;' +
        'width: ' +
        x +
        'px;' +
        'height: ' +
        y +
        'px;'
    )

    // add icon
    var i = document.createElement('i')
    i.className = this.options.iconClass
    i.setAttribute(
      'style',
      'position:absolute;' +
        'top: 20%;' +
        'left: 50%;' +
        'transform: translate3d(-50%, -20%, 0);' +
        'color: ' +
        this.options.color +
        ';' +
        'line-height: 0;' +
        'display: flex;' +
        'justify-content: center;' +
        'align-items: center;'
    )
    div.appendChild(i)

    return div
  }
})

L.SVGMarker = L.Marker.extend({
  initialize: function(latlng, options) {
    options = options || {}
    var svg_options = L.extend({}, L.SVGIcon.prototype.options, options)
    options.icon = new L.SVGIcon(svg_options)
    L.Marker.prototype.initialize.call(this, latlng, options)
  }
})

```