> ## Documentation Index
> Fetch the complete documentation index at: https://docs.camo.ag/llms.txt
> Use this file to discover all available pages before exploring further.

# Events

> Send and receive events with the CamoAg Embedded Map

JavaScript events are emitted using JavaScript's [Window: postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) method.

## Receiving Events

```javascript theme={null}
window.addEventListener('message', event => {
  // Restrict the event listener to only respond to intended sources.
  if (event.origin !== 'https://<YOUR_EMBED_DOMAIN>/embedded/map') return;

  console.log(event.data);
});
```

## Available Incoming Events

### `parcel:viewed`

Emitted for any parcel details selected from the Parcels map layer.

```typescript theme={null}
{
  "event_type": string,
  "payload": GeoJSON Feature<MultiPolygon | Polygon>
}
```

Example:

```json theme={null}
{
  "event_type": "parcel:viewed",
  "payload": {
    "type": "Feature",
    "id": "15009bee-5713-4338-9d8a-600b7b598ff1",
    "properties": {
      "acres": 40.0,
      "assessor_parcel_number": "1106400003",
      "county": "DeKalb",
      "county_geoid": "17037",
      "county_long_name": "DeKalb County",
      "id": "15009bee-5713-4338-9d8a-600b7b598ff1",
      "path": "us/il/dekalb/1106400003",
      "state": "IL"
    },
    "geometry": {
      "coordinates": [
        [
          [-88.812051, 41.8852985],
          [-88.81603249999999, 41.8852845],
          [-88.82182399999999, 41.8852645],
          [-88.821843, 41.8816315],
          [-88.8218615, 41.878105999999995],
          [-88.820219, 41.878108],
          [-88.81206499999999, 41.878118],
          [-88.812051, 41.8852985]
        ]
      ],
      "type": "Polygon"
    }
  }
}
```

### `parcel:collection_changed`

Emitted for any change in the selected parcels.

```typescript theme={null}
{
  "event_type": string,
  "payload": GeoJSON FeatureCollection<Polygon | MultiPolygon, ParcelViewedProperties>
}
```

Example:

```json theme={null}
{
  "event_type": "parcel:collection_changed",
  "payload": {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "id": "e57c840b-3bf6-4a6e-b6c6-9a3222eb4b9f",
        "properties": {
          "acres": 157.19,
          "assessor_parcel_number": "121209300002",
          "county": "Livingston",
          "county_geoid": "17105",
          "county_long_name": "Livingston County",
          "id": "e57c840b-3bf6-4a6e-b6c6-9a3222eb4b9f",
          "path": "us/il/livingston/121209300002",
          "state": "IL"
        },
        "geometry": {
          "coordinates": [
            [
              [-88.314281, 40.9991505],
              [-88.314353, 41.000961],
              [-88.3239505, 41.0007995],
              [-88.32368149999999, 40.993614],
              [-88.31693399999999, 40.993708999999996],
              [-88.3169585, 40.9947105],
              [-88.31574499999999, 40.994727499999996],
              [-88.3157205, 40.993725999999995],
              [-88.3140675, 40.9937495],
              [-88.314281, 40.9991505]
            ]
          ],
          "type": "Polygon"
        }
      }
    ]
  }
}
```

### `farm_sale:viewed`

Emitted for any farm sale selected from the Farm Sales map layer.

```typescript theme={null}
{
  "event_type": string,
  "payload": GeoJSON Feature<Point>
}
```

Example:

```json theme={null}
{
  "event_type": "farm_sale:viewed",
  "payload": {
    "type": "Feature",
    "id": 4389254,
    "properties": {
      "id": 4389254,
      "gross_acres": 200,
      "county": "Livingston",
      "state": "Illinois",
      "county_geoid": "17105",
      "sale_type": "auction"
    },
    "geometry": {
      "coordinates": [-88.708, 41.0451],
      "type": "Point"
    }
  }
}
```

## Sending Events

The embedded map will react to events that you post into its `contentWindow`. Always
pass your CamoAg embed origin as the `targetOrigin` so the message can only be received
by the intended iframe.

```javascript theme={null}
const embeddedMap = document.getElementById('embeddedMap');

embeddedMap.contentWindow.postMessage(
  {
    event_type: 'parcel:collection_remove_by_id',
    payload: { id: '15009bee-5713-4338-9d8a-600b7b598ff1' },
  },
  'https://<YOUR_EMBED_DOMAIN>',
);
```

## Available Outgoing Events

### `parcel:collection_remove_by_id`

Removes a single parcel from the selected collection. The `id` matches the
`properties.id` of a parcel feature previously returned by
[`parcel:collection_changed`](#parcelcollection_changed).

```typescript theme={null}
{
  "event_type": string,
  "payload": { "id": string }
}
```

Example:

```json theme={null}
{
  "event_type": "parcel:collection_remove_by_id",
  "payload": {
    "id": "15009bee-5713-4338-9d8a-600b7b598ff1"
  }
}
```

After the parcel is removed, the embedded map emits an updated
[`parcel:collection_changed`](#parcelcollection_changed) event reflecting the new
selection.

### `parcel:collection_remove_all`

Clears every parcel from the selected collection.

```typescript theme={null}
{
  "event_type": string
}
```

Example:

```json theme={null}
{
  "event_type": "parcel:collection_remove_all"
}
```

After the collection is cleared, the embedded map emits an updated
[`parcel:collection_changed`](#parcelcollection_changed) event with an empty
`features` array.