USE CASE

Delivery zones that carry more than geometry.

Draw the polygon, set the SLA, specify the vehicle class, mark the zone active — all in one editor. Every zone comes out as standard GeoJSON with typed properties.

The problem

Your app has delivery zones. Each zone needs more than coordinates — a name, an SLA (pickup window, drop window), a vehicle class, an active/inactive flag, rates, and sometimes operating hours. Without typed data, you end up with an untyped properties bag and backend validation that duplicates the frontend's.

How Element Editor fits

Define a zone schema in code. Users draw the polygon and fill in the form that's generated from the schema. Validation runs at edit time. Output is standard GeoJSON with the schema attached as metadata.schemas — so your backend can trust the shape.

A typed zone schema + the generated form + the data table.

What matters most for this use case

  • Schema-backed properties — the zone's typed fields become the source of truth.
  • Data table — see every zone as a row; edit SLAs across zones without clicking each polygon.
  • Snapping — adjacent zones share a clean border. No topology gaps.
  • Boolean operations — merge two small zones into one; subtract an exclusion area.

A minimal setup

import { ElementEditor } from '@element-editor/react'
import type { Schema } from '@element-editor/react'
import '@element-editor/react/style.css'

const zoneSchema: Schema = {
  id: 'delivery-zone',
  name: 'Delivery zone',
  fields: [
    { key: 'zone_name', label: 'Zone', type: 'text', required: true },
    { key: 'sla_mins_pickup', label: 'Pickup SLA (mins)', type: 'number', required: true, min: 0 },
    { key: 'sla_mins_drop', label: 'Drop SLA (mins)', type: 'number', required: true, min: 0 },
    { key: 'vehicle_class', label: 'Vehicle', type: 'select', required: true,
      options: ['bike', 'car', 'van', 'truck'] },
    { key: 'active', label: 'Active', type: 'boolean', required: false },
    { key: 'notes', label: 'Notes', type: 'textarea', required: false },
  ],
}

export default function DeliveryZones() {
  return (
    <div style={{ height: 600 }}>
      <ElementEditor
        schema={zoneSchema}
        tools={['polygon', 'rectangle']}
        onChange={(data) => saveZones(data)}
      />
    </div>
  )
}

Restricting tools to polygon and rectangle keeps users from accidentally drawing points or lines — zones are areas.

What you ship out

{
  "type": "Feature",
  "schemaId": "delivery-zone",
  "geometry": { "type": "Polygon", "coordinates": [/* ... */] },
  "properties": {
    "zone_name": "Central City",
    "sla_mins_pickup": 15,
    "sla_mins_drop": 45,
    "vehicle_class": "bike",
    "active": true,
    "notes": "Bike-only during peak hours"
  }
}

Ready to try it?

Open in playground →

Read the schemas guide

See pricing