Can't get custom images to display in Azure Maps as Symbols

Question

I really can't find any good documentation or any good samples on how to do this.

Here is my code. This is running in an Asp.net Core View.

var imageMarker = "https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png";

for (var i = 0; i < locationData; i++) {

                let imageName = 'image' + i;

                map.imageSprite.add(imageName, imageMarker).then(function () {

                    //Create a data source and add it to the map.
                    datasource = new atlas.source.DataSource();
                    map.sources.add(datasource);

                    //Create a point feature and add it to the data source.
                    datasource.add(new atlas.data.Feature(new atlas.data.Point(i.longitude, i.latitude), {
                        name: i.name
                    }));

                    //Add a layer for rendering point data as symbols.
                    map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
                        iconOptions: {
                            //Pass in the id of the custom icon that was loaded into the map resources.
                            image: imageName,
                            //Optionally scale the size of the icon.
                            size: 0.5
                        },
                        textOptions: {
                            //Add some text
                            textField: name,
                            //Offset the text so that it appears on top of the icon.
                            offset: [0, -2]
                        }
                    }));
                });

            }

I'm not getting any errors. The Symbols just don't appear on the map.

The sample linked below works in my map.events.add ready function.

Image Sprite sample

Any help is much appreciated! Thanks!

Answer 1

Here is what ended up working for me. I worked with Microsoft Support on this. locationData contains the image, longitude and latitude. The min and max of both longitude and latitude is passed in as well to set the camera boundry. The biggest issue with my original code was setting iconOptions size to 0.5. The plugin did not like that. It's now set to 1.

function addMarkerSymbols(locationData, min_long, min_lat, max_long, max_lat)
    {

        map.setCamera({
            bounds: [min_long, min_lat, max_long, max_lat],
            padding: 50
        });

        $.each(locationData, function (i, item)
        {

            map.imageSprite.add('default-icon' + i, item.locationImage);
            //Create a data source and add it to the map.
            var datasource = new atlas.source.DataSource();
            map.sources.add(datasource);

            //Add a data set to the data source.
            datasource.add(new atlas.data.Feature(new atlas.data.Point([item.longitude, item.latitude]), null));

            //Create a symbol layer to render the points.
            layer = new atlas.layer.SymbolLayer(datasource, null, {
                iconOptions: {
                    //The map control has built in icons for bar, coffee and restaurant that we can use.
                    image: 'default-icon' + i,
                    anchor: 'center',
                    allowOverlap: true,
                    size: 1
                }
            });
            map.layers.add(layer);

        });

    }