6.EVENTS.md

Events

Terra Draw has a number of ways to interact with it, including:

• Responding to native mouse/pointer Events
• Responding to Terra Draw Events

Native Events

Getting Features From A Mouse/Pointer Event

Getting features at a given mouse event can be done like so:

document.addEventListener("mousemove", (event) => {
  const featuresAtMouseEvent = draw.getFeaturesAtPointerEvent(event, {
    // The number pixels to search around input point
    pointerDistance: 40,

    // Ignore features that have been selected
    ignoreSelectFeatures: true,
  });

  // Do something with the features...
  console.log({ featuresAtMouseEvent });
});

Getting Features At A Given Longitude/Latitude

Getting features at a given longitude and latitude can be done like so:

map.on("mousemove", (event) => {
  const { lng, lat } = event.lngLat;
  const featuresAtLngLat = draw.getFeaturesAtLngLat(
    { lng, lat },
    {
      // The number pixels to search around input point
      pointerDistance: 40,

      // Ignore features that have been selected
      ignoreSelectFeatures: true,
    },
  );
  console.log({ featuresAtLngLat });
});

Note

The second argument is optional for both getFeaturesAtPointerEvent and getFeaturesAtLngLat, with defaults set to ignoreSelectFeatures: false and pointerDistance: 30.

Terra Draw Events

There are a number of Terra Draw events that you can listen to. For example, you can add a callback function that is invoked when Terra Draw has completed editing a Feature:

draw.on("change", (ids, type) => {
  //Done editing
  if (type === "delete") {
    // Get the Store snapshot
    const snapshot = draw.getSnapshot();

    // Do something
    //...
  }
});

The other Terra Draw events are:

draw.on("finish", (id: string, context: { action: string, mode: string }) => {
  if (action === 'draw') {
    // Do something for draw finish event
  } else if (action === 'dragFeature') {
    // Do something for a drag finish event
  } else if (action === 'dragCoordinate') {
    //
  }else if (action === 'dragCoordinateResize') {
    //
  }
});

draw.on("change", (ids: string[], type: string) => {
  // Possible type values:
  // 'create'
  // 'update'
  // 'delete'
  // 'styling'
  // Do something
  //...
});

draw.on("select", (id: string) => {
  // Do something
  //...
});

draw.on("deselect", () => {
  // Do something
  //...
});

---

Guides

1. Getting Started
2. Store
3. Adapters
4. Modes
5. Styling
6. Events
7. Development
8. Examples