Applying Individual StrokeColor and FillColor to Shapes in Azure Maps DrawingManager

Question

I’m working with Azure Maps and using the DrawingManager to allow users to draw shapes on the map. I want to assign a unique strokeColor and fillColor to each shape drawn, but I'm encountering an issue where changing the color values for a new shape affects all previously drawn shapes.

For example, in the code snippet below, I initially set the strokeColor and fillColor for a shape after it’s drawn, which works fine. However, when I update the strokeColor and fillColor variables for the next shape, the new colors are applied not only to the new shape but also retroactively to all the previously drawn shapes.

My goal is to apply unique strokeColor and fillColor to each shape independently. How can I achieve this behavior without affecting previously drawn shapes?

Code Snippet:

// Wait until the map resources are ready.
map.events.add("ready", function () {
    // Create an instance of the drawing manager and display the drawing toolbar.
    drawingManager = new atlas.drawing.DrawingManager(map, {});
  });
  
  /**
   * Function to draw freehand shape
   */
  function drawFreehandShape() {
    try {
      if (drawingManager) {
        drawingManager.setOptions({
          mode: "draw-polygon",
          interactionType: "freehand",
        });
        // Event listener for drawing completion
        map.events.add("drawingcomplete", drawingManager, function (shape) {
          addColorToShapeAfterDrawing(shape);
        });
      }
    } catch (error) {
      console.error("Error in drawFreehandShape: ", error);
    }
  }
  
  /**
   *  Function to add color to shape after drawing
    @param {} shape
   */
  function addColorToShapeAfterDrawing(shape) {
    try {
      //Get the rendering layers from the drawing manager and modify their options.
      let layers = drawingManager.getLayers();
      layers.lineLayer.setOptions({
        strokeColor: setStrokeColor,
        strokeWidth: 2,
      });
      layers.polygonLayer.setOptions({ fillColor: setFillColor });
    } catch (error) {
      console.error("Error updating shape color:", error);
    }
  }// Wait until the map resources are ready.

map.events.add("ready", function () {

    // Create an instance of the drawing manager and display the drawing toolbar.

    drawingManager = new atlas.drawing.DrawingManager(map, {});

});

/**

 * Function to draw freehand shape

 */

function drawFreehandShape() {

    try {

        if (drawingManager) {

            drawingManager.setOptions({

                mode: "draw-polygon",

                interactionType: "freehand",

            });

            // Event listener for drawing completion

            map.events.add("drawingcomplete", drawingManager, function (shape) {

                addColorToShapeAfterDrawing(shape);

            });

        }

    } catch (error) {

        console.error("Error in drawFreehandShape: ", error);

    }

}

/**

 * Function to add color to shape after drawing

  @param {} shape

 */

function addColorToShapeAfterDrawing(shape) {

    try {

        // Get the rendering layers from the drawing manager and modify their options.

        let layers = drawingManager.getLayers();

        layers.lineLayer.setOptions({

            strokeColor: setStrokeColor,

            strokeWidth: 2,

        });

        layers.polygonLayer.setOptions({ fillColor: setFillColor });

    } catch (error) {

        console.error("Error updating shape color:", error);

    }

}

The issue arises when I try to draw a second shape with different strokeColor and fillColor values. I update the variables setStrokeColor and setFillColor before drawing the new shape, but the newly set colors are applied not only to the new shape but also to all previously drawn shapes.

I believe this happens because I am modifying the layer properties directly in DrawingManager, which affects all shapes tied to those layers.

Objective:

I need to apply unique strokeColor and fillColor values to each shape individually, ensuring that previously drawn shapes retain their original colors.

Question:

How can I modify my approach so that each shape can have distinct stroke and fill colors without affecting previously drawn shapes?

Any guidance on how to apply colors to individual shapes would be greatly appreciated.

Answer 1

Add a property to your shapes that can be used to assign a style or color. For example, for each shape, add "myFillColor", and "myStrokeColor" properties, then set the layer styles with a data driven style expression that looks for and uses that property. Here is an example:

//Lets assume you have a shape since that's what the events in the drawing manager will pass to you.
//You can add your custom properties like this.
myShape.addProperty('myStrokeColor', 'red');
myShape.addProperty('myFillColor', 'purple');

//With this approach you only need to set the layer style once.
layers.lineLayer.setOptions({
	strokeColor: [
		'case',
		
		['has', 'myStrokeColor'], //Check to see if the shape has a "myStrokeColor" property.
		['get', 'myStrokeColor'], //Use it.
		
		'black' //Set a default color to use when the shape doesn't have the property.
	],

	strokeWidth: 2,
});

layers.polygonLayer.setOptions({ 
	fillColor: [
		'case',
		
		['has', 'myFillColor'], //Check to see if the shape has a "myFillColor" property.
		['get', 'myFillColor'], //Use it.
		
		'blue' //Set a default color to use when the shape doesn't have the property.
	] 
});