Dynamically drawing and rendering colored polygons.

[joekaram]

Hi,

I am trying to draw two polygons with two different colors based on a certain condition. I am able to do so but after closing the polygon, it disappears. Any idea how to keep the two polygons each with its color after drawing them?

<vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true">
    <vl-view :projection="projection"
        :zoom.sync="zoom" 
        :center.sync="center" 
        :rotation.sync="rotation" />
    <vl-layer-image id="xkcd">
    <vl-source-image-static :url="src"
        :size="size" 
        :extent="extent" 
        :projection="projection" />
    </vl-layer-image>

    <vl-layer-vector>
        <vl-source-vector ident="draw-target" :features.sync="drawnFeatures" />
    </vl-layer-vector>

    <vl-interaction-draw type="Polygon" source="draw-target" v-if="isDrawingRedPolygon">
        <vl-style-box>
            <vl-style-stroke color="red"></vl-style-stroke>
            <vl-style-fill color="rgba(255,255,255,0.5)"></vl-style-fill>
        </vl-style-box>
    </vl-interaction-draw>
    <vl-interaction-draw type="Polygon" source="draw-target" v-if="isDrawingBluePolygon">
        <vl-style-box>
            <vl-style-stroke color="blue"></vl-style-stroke>
            <vl-style-fill color="rgba(255,255,255,0.5)"></vl-style-fill>
        </vl-style-box>
    </vl-interaction-draw>

    <vl-interaction-modify source="draw-target" />
    <vl-interaction-snap source="draw-target" :priority="10" />
</vl-map>

I tried adding conditions inside the vl-layer-vector, as mentioned here, but it didn't work.

<!-- ... -->
<vl-layer-vector>
    <vl-source-vector ident="draw-target" :features.sync="drawnFeatures" />
    <vl-style-box :condition="isRedFeature">
        <vl-style-stroke color="red"></vl-style-stroke>
    </vl-style-box>
    <vl-style-box :condition="isBlueFeature">
        <vl-style-stroke color="red"></vl-style-stroke>
    </vl-style-box>
</vl-layer-vector>
<!-- ... -->

Thanks in advance!

[ghettovoice]

Hello @joekaram , such dynamic styling can be made more easy with style function. Take a look at this demo https://jsfiddle.net/ghettovoice/ud91komb/.
I append field to the newly drawing feature inside onDrawStart callback, then this flag is used to resolve feature style inside style function.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.