How to load a local image to WebGL context

Issue

I was trying Azure maps Symbol feature. I wanted to add a custom image as symbol.

When i used path of local image, it was not working.

"All resources, such as icon images, must be loaded into the WebGL context."

Please help me how to make local image to be loaded as webGL context.

Solution

You must add your image to the maps image sprite before you the symbol layer can use it. You would pass the URL and a unique name for the image into the map.imageSprite.add function. This is a Promise that you have to wait for as the image is loaded asynchronously. Once loaded, you can then set the image option of the symbol layers iconOptions to the unique name of the image.

Some additional code samples can be found here: https://samples.azuremaps.com/?sample=custom-symbol-image-icon

Update:

Here is a code block show how to add an image to the maps image sprite (WebGL context).

//Wait until the map resources are ready.
map.events.add('ready', function () {
    //Create a data source and add it to the map.
    datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    //Load the custom image icon into the map resources.
    map.imageSprite.add('my-custom-icon', '/images/icons/showers.png').then(function () {
    
        //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: 'my-custom-icon'
            }
        }));
    }); 
});

If you have multiple images you want to use, you can create an array of the imade add promises, then use Promise.all. Here is a good code sample: https://samples.azuremaps.com/?sample=data-driven-symbol-icons And here is a simply code block example:

//Wait until the map resources are ready.
map.events.add('ready', function () {

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

    //Create an array of custom icon promises to load into the map. 
    var iconPromises = [
        map.imageSprite.add('gas_station_icon', '/images/icons/gas_station_pin.png'),
        map.imageSprite.add('grocery_store_icon', '/images/icons/grocery_cart_pin.png'),
        map.imageSprite.add('restaurant_icon', '/images/icons/restaurant_pin.png'),
        map.imageSprite.add('school_icon', '/images/icons/school_pin.png'),
    ];

    //Load all the custom image icons into the map resources.
    Promise.all(iconPromises).then(function () {

        //Add a layer for rendering point data as symbols.
        map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
            iconOptions: {
                //Use a data driven expression based on properties in the features to determine which image to use for each feature.
                image: [
                    'match',

                    //In this example each feature has a "EntityType" property that we use to select the appropriate icon.
                    ['get', 'EntityType'],  

                    //For each entity type, specify the icon name to use.
                    'Gas Station', 'gas_station_icon',
                    'Grocery Store', 'grocery_store_icon',
                    'Restaurant', 'restaurant_icon',
                    'School', 'school_icon',

                    //Default fallback icon.
                    'marker-blue'
                ]
            }
        }));
    });

Answered By – rbrundritt

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published