Control Color and Transparency of Icon Chart

Since R2024b

Icon charts created by the geoiconchart function define the icon symbol by specifying a color and a transparency for each pixel in the icon. This topic shows how to control the appearance of an icon chart by changing the color and transparency of the pixels.

In general, you change the colors of the pixels by specifying the IconColorData property of the IconChart object, and you change the transparencies of the pixels by specifying the IconAlphaData property of the IconChart object.

Remove Background from Custom Icon

When you create an icon chart by specifying the name of a custom icon file, the geoiconchart function sets the IconColorData and IconAlphaData properties using information that is stored in the file. If the icon file does not include transparency information, then the function displays the icon using opaque pixels. You can hide the background by changing the transparency of the corresponding pixels.

The steps in this example assume that the background color is distinct from the other icon colors.

Create Icon Chart

Create an icon chart by specifying the name of a custom icon file. Prepare to change the transparency of the icon by returning the IconChart object in ic.

figure
ic = geoiconchart(42,-67,"matlabicon.gif",SizeData=30);

Find Background Pixels

Get the icon colors by querying the IconColorData property of the IconChart object. The IconColorData property stores the colors using an RGB image. An RGB image is an array of RGB triplets, where each triplet defines the red, green, and blue components of one pixel.

iconColors = ic.IconColorData;

Prepare to get a colormap from the RGB image by approximating the number of colors in the icon. You can approximate the number of colors by visually inspecting the icon. This icon appears to contain six colors: white, black, orange, light orange, blue, and light blue.

numColors = 6;

Convert the RGB image to an indexed image and a colormap. Each element of the indexed image maps to a row of the colormap, and each row of the colormap is an RGB triplet that specifies the red, green, and blue components of a color. For example, the value 0 in the indexed image maps to the first color in the colormap.

[X,cmap] = rgb2ind(iconColors,numColors);

Determine which row of the colormap corresponds to the white icon background. Because the rgb2ind function outputs cmap using values of data type double, the red, green, and blue components of white colors are generally greater than 0.9. Find the row of the colormap that corresponds to white.

whiteRowTF = cmap(:,1) > 0.9 & cmap(:,2) > 0.9 & cmap(:,3) > 0.9;
whiteRow = find(whiteRowTF)

whiteRow = 
2

The result indicates that the second row of the colormap corresponds to white. Find the pixels in the indexed image that map to the second row of the colormap. Note that the value 1 in the indexed image maps to the second row in the colormap.

whitePixelTF = X == (whiteRow - 1);
whitePixels = find(whitePixelTF);

Change Transparency of Background Pixels

Specify the transparency of each pixel in the icon. Use 1 for opaque pixels, and use 0 for transparent pixels.

Create a matrix of 1s. Specify the size of the matrix using the height and width of the icon, so that each element of the matrix corresponds to one pixel of the icon.

iconSize = size(X);
iconAlphas = ones(iconSize);

Set the elements of the matrix that correspond to background pixels to 0. Then, set the IconAlphaData property of the icon chart to the matrix. The updated icon chart does not display the white background.

iconAlphas(whitePixels) = 0;
ic.IconAlphaData = iconAlphas;

Change Color of Pushpin Icon

By default, the geoiconchart function uses a pushpin icon with a dark red accent color and a light red primary color. This example shows how to change the color of the default pushpin icon. You can use a similar process to change the colors of custom icons, provided the custom icon uses a small number of colors.

Create Icon Chart

Create an icon chart using the default pushpin icon.

figure
ic = geoiconchart(42.3,-71.3,SizeData=40);

Get Icon Colors

Get the icon colors by querying the IconColorData property of the IconChart object. The IconColorData property stores the colors using an RGB image. An RGB image is an array of RGB triplets, where each triplet defines the red, green, and blue components for one pixel of the icon.

iconColors = ic.IconColorData;

Convert the RGB image to an indexed image and a colormap with two colors. Each element of the indexed image maps to a row of the colormap, and each row of the colormap is an RGB triplet that specifies the red, green, and blue components of a color. For example, the value 0 in the indexed image maps to the first color in the colormap.

[X,cmap] = rgb2ind(iconColors,2);

Determine the RGB triplets that correspond to the dark red accent color and the light red primary color.

• If you have Image Processing Toolbox™, you can interactively find the RGB triplets that correspond to pixels in the image by using the impixel function. The impixel function displays the icon in a figure window and waits for you to select pixels in the image. Select a pixel that uses the dark red accent color, then select a pixel that uses the light red primary color, and then press Enter. To use this option, specify interactivelySelectColors as true.

• If you do not have Image Processing Toolbox, or if you already know the colors that correspond to the colormap rows, you can specify the RGB triplets for each color by indexing into the colormap. The first row of the colormap corresponds to the dark red accent color, and the second row of the colormap corresponds to the light red primary color. To use this option, specify interactivelySelectColors as false.

interactivelySelectColors = false;
if interactivelySelectColors 
    figure
    colors = impixel(X,cmap);
    accent = colors(1,:);
    primary = colors(2,:);
else
    accent = cmap(1,:);
    primary = cmap(2,:);
end

Specify New Colors

Specify new accent and primary colors using RGB triplets. Use black for the accent color and blue for the primary color.

newAccent = [0 0 0];
newPrimary = [0.3010 0.7450 0.9330];

Replace the colors in the colormap with the new accent and primary colors.

idxA = ismember(cmap,accent,"rows");
cmap(idxA,:) = newAccent;

idxP = ismember(cmap,primary,"rows");
cmap(idxP,:) = newPrimary;

Change Icon Color

Convert the indexed image and the new colormap to an RGB image.

newIconColors = ind2rgb(X,cmap);

Update the icon color data to use the new icon colors.

ic.IconColorData = newIconColors;