Can't create more than one overlay in Seadragon

Question

Hi everyone,

I am trying to add overlays to a seadragon map I am making but for some reason that I can not figure our seadragon ignores all my overlays except the first one. Any help with this is much appreciated.

var viewer = null;

function init() {
    Seadragon.Config.autoHideControls = false;

    viewer = new Seadragon.Viewer("container");

    viewer.addEventListener("open", addOverlays);

    viewer.addControl(makeControl(), Seadragon.ControlAnchor.TOP_RIGHT);

    $(viewer.getNavControl()).parent().parent().css({ 'top': 10, 'right': 10 });
    viewer.openDzi("_assets/Mapdata/dzc_output.xml");

}

function makeControl() {
    var control = document.createElement("a");
    var controlText = document.createTextNode("");

    control.href = "#"; // so browser shows it as link
    control.className = "control";
    control.appendChild(controlText);

    Seadragon.Utils.addEvent(control, "click",
                    onControlClick);

    return control;
}

function onControlClick(event) {
    Seadragon.Utils.cancelEvent(event); // don't process link

    if (!viewer.isOpen()) {
        return;
    }

    // These are the coordinates of europe on this map
    var x = 0.5398693914203284;
    var y = 0.21155952391206562;
    var z = 5;

    viewer.viewport.panTo(new Seadragon.Point(x, y));
    viewer.viewport.zoomTo(z);
    viewer.viewport.ensureVisible();
}

function addOverlays(viewer) {
    drawer = viewer.drawer;
    var img = document.createElement("img");
    img.src = "_assets/Images/pushpin.png";

    $(img).addClass('pushPin');

    var overlays = [
        { elmt: img, point: new Seadragon.Point(0.51, 0.22) },
        { elmt: img, point: new Seadragon.Point(0.20, 0.13) }
    ];

    for (var i = 0; i < overlays.length; i++) {
        drawer.addOverlay(overlays[i].elmt, overlays[i].point);
    }


}

Seadragon.Utils.addEvent(window, "load", init);

Answer 1

I should have created a function that returns the img and call that inside the object array

function newpushPin() {
    var img = document.createElement("img");
    img.src = "_assets/Images/pushpin.png";
    return img
}

var overlays = [
    { elmt: newpushPin(), point: new Seadragon.Point(0.51, 0.22) },
    { elmt: newpushPin(), point: new Seadragon.Point(0.53, 0.22) },
    { elmt: newpushPin(), point: new Seadragon.Point(0.53, 0.23) },
    { elmt: newpushPin(), point: new Seadragon.Point(0.50, 0.20) }
];