define(["leaflet"], function (L) {
  return L.CircleMarker.extend({
    outerCircle: {
      stroke: false,
      color: "#4285F4",
      opacity: 1,
      fillOpacity: 0.3,
      clickable: false,
      radius: 16
    },

    innerCircle: {
      stroke: true,
      color: "#ffffff",
      fillColor: "#4285F4",
      weight: 1.5,
      clickable: false,
      opacity: 1,
      fillOpacity: 1,
      radius: 7
    },

    accuracyCircle: {
      stroke: true,
      color: "#4285F4",
      weight: 1,
      clickable: false,
      opacity: 0.7,
      fillOpacity: 0.2
    },

    initialize: function(latlng) {
      this.accuracyCircle = L.circle(latlng, 0, this.accuracyCircle)
      this.outerCircle = L.circleMarker(latlng, this.outerCircle)
      L.CircleMarker.prototype.initialize.call(this, latlng, this.innerCircle)

      this.on("remove", function() {
        this._map.removeLayer(this.accuracyCircle)
        this._map.removeLayer(this.outerCircle)
      })
    },

    setLatLng: function(latlng) {
      this.accuracyCircle.setLatLng(latlng)
      this.outerCircle.setLatLng(latlng)
      L.CircleMarker.prototype.setLatLng.call(this, latlng)
    },

    setAccuracy: function(accuracy) {
      this.accuracyCircle.setRadius(accuracy)
    },

    onAdd: function(map) {
      this.accuracyCircle.addTo(map).bringToBack()
      this.outerCircle.addTo(map)
      L.CircleMarker.prototype.onAdd.call(this, map)
    }
  })
})