Leaflet Map GeoJSON Input

Tips & examples

An interactive, grid-based Geographic Information System. workspace dashboard featuring zooming dials, layers drag handles, polyline/polygon drawing anchors, and interactive element deletion triggers.

When to use

Allowing users to draw, edit, and capture spatial map structures (points, lines, regions) within form views.
Binding geographic coordinates or feature vectors directly into database records via standard GeoJSON structures.

What you need

Locked by default until paired inside a form frame context. Connection opens when clicking the ‘+’ data trigger to establish Element ID and Field Path references.

Examples

An internal delivery form where warehouse teams sketch distribution route tracks or drop pins on fulfillment hubs.
A real estate platform page forcing managers to explicitly draw property boundary perimeters using dynamic drawing tools.

Avoid

Squeezing the map into compact boundaries below 7 rows or 7 columns, which heavily breaks spatial workspace tools and edit flows.
Attempting to map or establish data context properties before a parent default_form element is drop-placed on the page canvas.

Pairs well with

Form — Acts as the parent data engine tracking field spatial mutations and managing global submission states.

Properties

Editor properties

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

Value

Default ValueoptionalNot set (null): The GeoJSON value payload rendered and edited by the map control.
Example { "type": "FeatureCollection", "features": [] }
Default: none

Input

DisabledoptionalYes / no or Custom expression (yes/no): When true, the control cannot be edited.
Example false
Default: none

Map Settings

Tile Layer URLoptionalNot set (null): The layout path for custom visual map layers (e.g. .png tilesets). Leave completely empty to leverage OpenStreetMaps protocols automatically.
Default: none

Coordinates

LatitudeoptionalNumber

Floating point string pinpointing map centering configurations.

Good to know

Must comply with geographic latitude regex configurations: \d{2}.\d{2}

Default: none

LongitudeoptionalNumber

Floating point string pinpointing map centering configurations.

Good to know

Must comply with geographic longitude regex configurations: \d{2}.\d{2}

Default: none

ZoomoptionalNumber

An integer scaling baseline parameter defining the initial layout focus size level.

Default: none

Inside dataSource: (dataSource)

Element IDrequiredNumber or Text: Another element on the page whose data backs this field.
Default: none
Field PathrequiredList of Text or Number: Path into the source element’s data (property segments).
Default: none

Sizing

Minimum size: 2 × 2 grid cells (width × height).
Default size when dropped on a page: 4 × 4.

Translatable labels

label — Main screen header text framing the drawing area canvas task.

Accessibility

Workspace tool headers provide readable alt contexts, mapping operations yield dynamic screen announcements as text payloads mutate live.

Expressions

Values you can read in expressions

Other parts of your app can read live values from this element in custom expressions:

elements.myGeojsonInput.<property>

value any Current input value of this control. elements.myGeojsonInput.value

When The drawn geometry as a GeoJSON object. Feed it to a map display or a spatial query parameter; it is empty until the user draws something.

errors any The data validation errors. elements.myGeojsonInput.errors

touched boolean Indicates whether the user has typed anything in the input. elements.myGeojsonInput.touched

disabled boolean True while the control is locked and cannot be edited. elements.myGeojsonInput.disabled

To use one of these, open the property you want to drive on the other element, switch it to expression mode in the Expression Editor, and enter:

1
elements.myGeojsonInput.value

Replace myGeojsonInput with this element’s unique id. Select the element in Application Designer and copy the id chip at the top of the right-hand property panel.

Composition

Where you can place it

Drag this element into one of these containers:

Sample configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
  "config": {
    "dataSource": {
      "elementId": "myElement",
      "fieldPath": [
        "fieldPath"
      ]
    },
    "defaultValue": {
      "exampleKey": {}
    },
    "disabled": false,
    "nullable": false,
    "allowDelete": false,
    "allowLine": false,
    "allowPolygon": false,
    "allowRectangle": false,
    "allowDrag": false,
    "allowMarker": false,
    "allowText": false,
    "tileLayerUrl": "tileLayerUrl",
    "maximumFeatures": 0,
    "geoJSONdefaultValue": "geoJSONdefaultValue",
    "latitude": 0,
    "longitude": 0,
    "zoom": 0
  }
}

Ready-made setups

Comprehensive Territory Boundary Sketcher ↕

Configuring a spacious 7x7 spatial input workspace restricting point additions via clean limits, customized coordinate initializations, and focused polygon rules.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
  "config": {
    "value": {
      "type": "FeatureCollection",
      "features": []
    },
    "dataSource": {
      "viewName": "getDeliveryZones",
      "responseFormat": "geo+json"
    },
    "coordinates": {
      "latitude": 59.43,
      "longitude": 24.75,
      "zoom": 12
    },
    "selection": {
      "property": "id",
      "propertyValue": "@@expression: null"
    },
    "map_settings": {
      "tileLayerUrl": "",
      "updateMapView": true
    }
  }
}

When to use

What you need

Examples

Avoid

Related elements

Editor properties

Sizing

Translatable labels

Accessibility

Values you can read in expressions

Where you can place it

Ready-made setups