Unable to set Preview colors to the drawing layers in Azure Maps

Question

I am working with Azure Maps Drawing Manager in React App,

while working i am setting the default fillcolor and strokecolor to PolygonLayer and polygonOutlineLayer at the initialization step of drawing manager like this

drawingManager.drawingLayers.polygonLayer.setOptions({
                fillColor: [
                    "case",
                    ["has", "fillColor"],
                    ["get", "fillColor"],
                     "green",
                ],
                fillOpacity: 0.5,
            });

for dynamic colors i have wrote the code which will change the color according to user selection on the color picker,

function setFillColor(inputElement) {
  try {
    fillColor = inputElement.value;
      
	drawingManager.drawingLayers.polygonLayer.setOptions(
      {
        fillColor:[
          'case',
        ['has', 'fillColor'], ['get', "fillColor"], fillColor
        ],
        fillOpacity: 0.5,
      }
    );
  
    // update polygon shape's fill color if selected here
  } catch (error) {
    
  }
}

this code is working in my Sample HTML code.

But in the React Application component code when I initialize drawing manager with this below code then in the preview I can see the green and blue color.

 initializeDrawingManager(map: any) {
        try {
            this.drawingManager = new drawingTool.drawing.DrawingManager(map, {
                mode: drawingTool.drawing.DrawingMode.idle,
            });
 
            this.drawingManager.drawingLayers.polygonLayer.setOptions({
                fillColor: [
                    "case",
                    ["has", "fillColor"],
                    ["get", "fillColor"],
                    "green",
                ],
                fillOpacity: 0.5,
            });

            this.drawingManager.drawingLayers.polygonOutlineLayer.setOptions({
                strokeColor: [
                    "case",
                    ["has", "strokeColor"],
                    ["get", "strokeColor"],
                    "blue",
                ],
                strokeWidth: 1.5,
            });
   
        } catch (error: any) {
 
        }
    }

and the same way like i mentioned in the above setFillColor function I'm changing the trying to change the preview color for my next drawing shape is not working, and the green and blue color shown in the preview which I have given for at the time of initialization.

am I doing something wrong here ?

Thanks in advance!

Answer

A couple of issues;

You should be accessing the layers on the drawing managers using getLayers() and getPreviewLayers(), the drawingLayers property is not documented.
It looks like you are only setting the main layers and not the preview layer styles.
Check the console, there is likely an error related to the number of items in the style. E.g. need odd or even number. I suspect the trailing commas in the case expressions of your last example may be causing an error.
Unless you added a property to your shapes, there are no fillColor or strokeColor properties on them, so these expressions will always go to the default values.

Also take a look at this sample: https://samples.azuremaps.com/?search=drawing&sample=change-drawing-rendering-style

Share via

Unable to set Preview colors to the drawing layers in Azure Maps

1 answer

Your answer