Trouble w/ popup when extending leaflet Marker

leaflet

Solution

Got it. I had to override the popup methods to only handle the locationMarker.

bindPopup: function (content, options) {
this._locationMarker.bindPopup(content, options);
    return this;
},

setPopupContent: function (content) {
this._locationMarker.setPopupContent(content);
    return this;
},

unbindPopup: function () {
this._locationMarker.unbindPopup();
    return this;
},

_movePopup: function (e) {
this._locationMarker.setLatLng(e.latlng);
}

Plunker: http://plnkr.co/edit/5tz538?p=preview

Problem

I am trying to extend the leaflet Marker class to create a location marker. My location marker consists of an inner circle that represents the users location and an outer circle that represents the accuracy of the user location. I am extending the class as I want to show a lot of users locations and I do not want to have to create 2 markers for each user. I am having problems getting the popup to work though. Two things: - the popup does not work, i.e. never shows up. - can I bind the popup to only the inner circle (users location), and not the outer circle (accuracy) Here is a plunk, blue marker is standard circle with popup, green is my extended marker, popup does not work. http://plnkr.co/edit/5tz538?p=preview code: ``` L.LocationMarker = L.Marker.extend({ initialize: function (latlng, options) { L.Marker.prototype.initialize.call(this, latlng); this._accuracyCircle = L.circle(latlng, 0, { color: options.color, fillColor: options.color, fillOpacity: 0.15, weight: 2, opacity: 0.5 }); this._locationMarker = L.circleMarker(latlng, { color: options.color, fillColor: options.color, fillOpacity: 0.7, weight: 2, opacity: 0.9, radius: 5 }); this._location = L.layerGroup([this._accuracyCircle, this._locationMarker]); }, addTo: function (map) { map.addLayer(this._location); return this; }, onAdd: function (map) { this._map = map; map.addLayer(this._location); }, onRemove: function (map) { map.removeLayer(this._location); }, getLatLng: function() { return this._locationMarker.getLatLng(); }, setLatLng: function (latlng) { this._accuracyCircle.setLatLng(latlng); this._locationMarker.setLatLng(latlng); return this; }, setAccuracy: function (accuracy) { this._accuracyCircle.setRadius(accuracy ? accuracy : 0); return this; } }); L.locationMarker = function (latlng, options) { return new L.LocationMarker(latlng, options); }; ```

Original source