Exercise 3: TerraDrawSelectMode

Let's add TerraDrawSelectMode to allow selecting and modifying features.

Try it in the live editor

Add the select mode with feature and coordinate editing enabled, plus a Select button.

Live editor — open this page in the browser to run the code.

Walkthrough

First, import TerraDrawSelectMode:

import {
    TerraDraw,
    TerraDrawPointMode,
    TerraDrawLineStringMode,
    TerraDrawPolyLineMode,
    TerraDrawPolygonMode,
    TerraDrawSelectMode // add here
} from 'terra-draw';

Then add TerraDrawSelectMode to the modes array. The flags option controls what can be edited, per mode name:

new TerraDrawSelectMode({
    // Allow selecting a feature just by clicking it (added in v1.27)
    allowManualSelection: true,
    flags: {
        point: {
            feature: {
                draggable: true
            }
        },
        linestring: {
            feature: {
                draggable: true,
                rotateable: true,
                coordinates: {
                    midpoints: true,
                    draggable: true,
                    deletable: true
                }
            }
        },
        // Features drawn with polyline mode keep `mode: 'polyline'`,
        // so they need their own flags to be editable
        polyline: {
            feature: {
                draggable: true,
                rotateable: true,
                coordinates: {
                    midpoints: true,
                    draggable: true,
                    deletable: true
                }
            }
        },
        polygon: {
            feature: {
                draggable: true,
                rotateable: true,
                coordinates: {
                    midpoints: true,
                    draggable: true,
                    deletable: true
                }
            }
        }
    }
})

Finally add a Select button:

addButton('Select', () => handleModeClick('select'));

or in the SvelteKit sidebar:

<hr>
<button onclick={() => handleModeClick('select')}>Select</button>

Now you can select a feature after drawing, then drag or modify it.

Testing Your Implementation

1. Test select mode - click the Select button, then drag or modify features you have drawn
2. Test coordinate editing - drag the midpoints of a polygon to insert new coordinates
3. Adjust parameters of select mode - change the select mode parameters to see how they affect the behaviour

Extra challenge

The following options are available in the flags of TerraDrawSelectMode. Change or add options to see how they affect the Select mode behaviour:

polygon: {
    feature: {
        draggable: true, // you can drag a polygon
        rotateable: true, // you can rotate with ctrl+r (ctrl+command+r in mac)
        coordinates: {
            midpoints: true,
            // Can be moved
            draggable: true,
            // Can be deleted
            deletable: true,
            // Can snap to other coordinates from geometries _of the same mode_
            snappable: true,
            // Allow resizing of the geometry from a given origin.
            // center will allow resizing of the aspect ratio from the center
            // and opposite allows resizing from the opposite corner of the
            // bounding box of the geometry.
            resizable: 'center', // can also be 'opposite', 'center-fixed', 'opposite-fixed'
        }
    }
}

What's Next?

You now know the basics of Terra Draw. Time for a break — then we'll continue with the advanced features.

Continue to Advanced Features