How to use <vl-interaction-snap>

[iboates]

I have tried to make a snap interaction like this:

      <vl-layer-vector
        id="guideLineLayer"
      >
        <vl-source-vector
          :features="guideLineCollection.features"
          ident="guideLineSource"
        >
          <vl-style>
            <vl-style-stroke
              color="hotpink"
              :width="3"
            >
            </vl-style-stroke>
          </vl-style>
        </vl-source-vector>
      </vl-layer-vector>
      <vl-interaction-snap
        source="guideLineSource"
      >
      </vl-interaction-snap>

I also have a "drawing layer" which I use to contain all drawn features before I route them to the correct layers:

      <vl-layer-vector
        ref="drawLayerRef"
        id="drawLayer"
        v-show="false"
      >
        <vl-source-vector
          ref="drawLayerSourceRef"
          :features="[]"
          ident="drawSource"
        >
        </vl-source-vector>

      </vl-layer-vector>

      <vl-interaction-draw
        :source="draw.mode + 'Source'"
        :type="featureDrawType"
        :active="draw.active"
        @drawend="handleDrawFeature"
      >
      </vl-interaction-draw>

But when I begin drawing, it does not snap to the guideLineSource layer. How can I make new drawings snap to this layer?

[ghettovoice]

Hello @iboates , try to move snap interaction after draw, so it will be appended to the map last. Then it will be the first during pointer event handling and should make snapping.

Something like this should work:

<vl-layer-vector
        id="guideLineLayer"
      >
        <vl-source-vector
          :features="guideLineCollection.features"
          ident="guideLineSource"
        >
          <vl-style>
            <vl-style-stroke
              color="hotpink"
              :width="3"
            >
            </vl-style-stroke>
          </vl-style>
        </vl-source-vector>
      </vl-layer-vector>
      <vl-layer-vector
        ref="drawLayerRef"
        id="drawLayer"
        v-show="false"
      >
        <vl-source-vector
          ref="drawLayerSourceRef"
          :features="[]"
          ident="drawSource"
        >
        </vl-source-vector>

      </vl-layer-vector>

      <vl-interaction-draw
        :source="draw.mode + 'Source'"
        :type="featureDrawType"
        :active="draw.active"
        @drawend="handleDrawFeature"
      >
      </vl-interaction-draw>

      <vl-interaction-snap
        source="guideLineSource"
      >
      </vl-interaction-snap>