Azure Maps addIcon

Question

In trying to add a custom icon to Azure Maps, this doesn't seem to work. Given a list of venues with longitudes and latitudes.

for (var i = venues.length - 1; i > 0; i--) {
    if (i === 0) {
        map.setCamera({
            center: [
                venues[i].Longitude,
                venues[i].Latitude
            ]
        });
    }

    var img = new Image();
    img.id = "id_gmap_icon";
    img.src = "images/marker1.png";
    img.setAttribute("width", "100px");
    img.setAttribute("height", "100px");
    img.setAttribute('crossOrigin', null);

    map.addIcon("gmap-icon", img);

    var currPt = new atlas.data.Point([venues[i].Longitude, venues[i].Latitude]);
    var currPin = new atlas.data.Feature(currPt, {
        title: String(i + 1),
        fieldId: venues[i].FieldID,
        icon: 'gmap-icon'
    });

    map.addPins([currPin], {
        fontColor: "#000",
        fontSize: 14,
        iconSize: 1,
        cluster: false,
        name: searchLayerName + (i + 1),
        textFont: "SegoeUi-Bold",
        textOffset: [0, 0]
    });
}

The image seems to load as a correct HTMLImageElement, but doesn't load into the map. If I change the icon to "pin-red" it loads with Azure's red pin.

What am I missing?

Answer 1

//Pre-load the custom pin image.
        var pinImg = new Image();
        pinImg.onload = function () {
            //Add the pin image to the map resources. Give it a unique id.
            map.addIcon('my-custom-icon', pinImg);
            //Add a pin to the map and use the custom pin image.
            var pin = new atlas.data.Feature(new atlas.data.Point(mapCenterPosition));
            //Add the pin to the map.
            map.addPins([pin], {
                name: 'default-pin-layer',
                icon: 'my-custom-icon',
                iconSize: 0.5
            });
        };
        pinImg.src = './Common/images/pins/showers.png';