define([
    'streamhub-map/point',
    'streamhub-map/views/marker-view',
    'text!streamhub-map/views/svg/content-marker.svg',
    'inherits',
    'streamhub-sdk/jquery'
],
function (Point, MarkerView, ContentMarkerSvg, inherits, $) {

    var MARKER_SVG = null;

    var ContentMarkerView = function (point, opts) {
        opts = opts || {};

        this._fillColor = opts.fill;
        this._avatar = opts.avatar;

        if (!MARKER_SVG) {
            MARKER_SVG = $('body').append($(ContentMarkerSvg));
        }

        MarkerView.apply(this, arguments);
    };
    inherits(ContentMarkerView, MarkerView);

    ContentMarkerView.prototype.render = function () {
        //this.notifierEl = this._svg.append("path")
        //    .datum({ type: 'Point', 'coordinates': this._point.getCoordinates() })
        //    .attr("d", this._path)
        //    .attr("class", "hub-place-notifier")
        //    .attr('fill', 'red');

        // Marker
        var self = this;
        this.el = this._svg.append('g')
           .datum({ type: 'Point', 'coordinates': this._point.getCoordinates() })
           .attr("transform", function (d) {
               //TODO(ryanc): Remove magic number 44
               var translation = self._projection(d.coordinates);
               translation[0] = translation[0] - 44/2;
               translation[1] = translation[1] - 44;
               return "translate(" + translation + ")";
           })
           .append('use')
           .attr('xlink:href', '#hub-map-content-marker');

        this.notify();

        var self = this;
        this.el.on('click', function (datum, index) {
            self.notify();
            $(self.el[0][0]).trigger('focusDataPoint.hub', self._point);
        });

        MarkerView.prototype.render.call(this);
    };

    ContentMarkerView.prototype.notify = function () {
        return;
    };

    return ContentMarkerView;
}); 

@@ -345,82 +345,8 @@
 %7D;%0A%0A
-        this._fillColor = opts.fill;%0A        this._avatar = opts.avatar;%0A%0A
     
@@ -443,16 +443,339 @@
      %7D%0A%0A
+        this._fillColor = opts.fill;%0A        this._avatar = opts.avatar;%0A        this._point = point;%0A        this._notifyStream = opts.notifyStream;%0A        var self = this;%0A        if (this._notifyStream) %7B%0A            this._notifyStream.on('data', function () %7B%0A                self.notify();%0A            %7D);%0A        %7D%0A%0A
         
@@ -1686,16 +1686,17 @@
       %7D)
+;
 %0A       
@@ -1696,19 +1696,23 @@
         
-   
+this.el
 .append(
@@ -1717,28 +1717,16 @@
 d('use')
-%0A           
 .attr('x
@@ -1778,262 +1778,992 @@
     
-this.notify();%0A%0A        var self = this;%0A        this.el.on('click', function (datum, index) %7B%0A            self.notify();%0A            $(self.el%5B0%5D%5B0%5D).trigger('focusDataPoint.hub', self._point);%0A        %7D);%0A%0A        MarkerView.prototype.render.call(this)
+// Update marker image%0A        //TODO(ryanc): Remove magic number 36%0A        var markerImage = this._getMarkerImageFromContent();%0A        if (markerImage) %7B%0A            this.el.append('image')%0A                .attr('xlink:href', markerImage)%0A                .attr('width', '36')%0A                .attr('height', '36')%0A                .attr('transform', 'translate(4,4)');%0A        %7D%0A%0A        this.notify();%0A%0A        var self = this;%0A        this.el.on('click', function (datum, index) %7B%0A            self.notify();%0A            $(self.el%5B0%5D%5B0%5D).trigger('focusDataPoint.hub', self._point);%0A        %7D);%0A%0A        MarkerView.prototype.render.call(this);%0A    %7D;%0A%0A    ContentMarkerView.prototype._getMarkerImageFromContent = function () %7B%0A        var imageUrl;%0A%0A        if (this._point._content.attachments) %7B%0A            imageUrl = this._point._content.attachments%5B0%5D.thumbnail_url;%0A        %7D else %7B%0A            imageUrl = this._point._content.author.avatar;%0A        %7D%0A%0A        return imageUrl
 ;%0A  

Use attachment thumbnail or avatar for marker image