Skip to content

Event Handling

Terra Draw provides comprehensive event handling following the official events documentation.

Basic Events

// Listen for drawing events
draw.on('draw', (event) => {
    console.log('Feature drawn:', event);
    const { feature, mode } = event;
    console.log(`Created a ${feature.geometry.type} using ${mode} mode`);
});

draw.on('change', (event) => {
    console.log('Drawing state changed:', event);
    // Triggered on any change (draw, edit, delete)
    updateFeatureCount();
});

draw.on('select', (event) => {
    console.log('Feature selected:', event);
    const { selectedFeatures } = event;
    console.log(`Selected ${selectedFeatures.length} feature(s)`);
});

draw.on('deselect', (event) => {
    console.log('Feature deselected:', event);
});

// Mode-specific events
draw.on('mode', (event) => {
    console.log('Mode changed to:', event.mode);
    updateActiveButton(event.mode);
});

Practical Event Handling Example

Let's create an application that responds to drawing events:

// Feature statistics tracker
interface Stats {
    points: number;
    lines: number;
    polygons: number;
    rectangles: number;
}

let stats: Stats = {
    points: 0,
    lines: 0,
    polygons: 0,
    rectangles: 0
};

function updateStats() {
    const features = draw.getSnapshot();

    stats = {
        points: features.filter(f => f.geometry.type === 'Point').length,
        lines: features.filter(f => f.geometry.type === 'LineString').length,
        polygons: features.filter(f => f.geometry.type === 'Polygon' && f.properties.mode === 'polygon').length,
        rectangles: features.filter(f => f.geometry.type === 'Polygon' && f.properties.mode === 'rectangle').length
    };

    displayStats();
}

function displayStats() {
    const statsElement = document.getElementById('stats');
    if (statsElement) {
        statsElement.innerHTML = `
            <h3>Statistics</h3>
            <div>Points: ${stats.points}</div>
            <div>Lines: ${stats.lines}</div>
            <div>Polygons: ${stats.polygons}</div>
            <div>Rectangles: ${stats.rectangles}</div>
        `;
    }
}

// Connect events to update stats
draw.on('change', updateStats);

Add this to your HTML:

<div id="stats"></div>

What's Next?

Now that you understand events, let's explore Terra Draw's data management capabilities.

Next: Data Management