CODEWITHSUNDEEP
azure-maps
duckmike
duckmike

Reputation: 1036

Azure Maps addIcon

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?

Upvotes: 0

Views: 566

Answers (2)

Michael Xu
Michael Xu

Reputation: 4432

When you want to add an icon to the map to use for pins, Map and image must be fully loaded before the icon can be added. Please use the addEventListener method with event type 'load'. You can refer to Darrin's code.

Upvotes: 1

Darrin Brandon
Darrin Brandon

Reputation: 16

//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';

Upvotes: 0

Related Questions