CODEWITHSUNDEEP
cssimageimage-processingazure-maps
user8599269
user8599269

Reputation: 239

How to load a local image to WebGL context

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.

Upvotes: 1

Views: 569

Answers (2)

rbrundritt
rbrundritt

Reputation: 17954

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'
                ]
            }
        }));
    });

Upvotes: 1

Anton
Anton

Reputation: 2703

Can you provide us your code?

I've tried to add local file as image to Azure Maps symbol layer. See examples here: click.

Local file file:///D:/showers.png failed with error: URL scheme must be "http" or "https" for CORS request., but same file on localhost server worked well: enter image description here

P.S. Maybe I do not clearly understand the problem?

Upvotes: 0

Related Questions