Leaflet Map GeoJSON

Tips & examples

An interactive geographical map supporting standard drag, swipe, and zoom operations, layered with vector paths and reactive point markers.

When to use

Rendering dynamic geographic data, map vectors, spatial regions, or coordinate-bound markers.
Visualizing location-based query results using customized interactive polygon fills and custom emoji markers.

Examples

A dashboard map layer plotting regional sales territories via custom GeoJSON spatial properties and responsive polygon fill attributes.
An interactive transit tracker plotting coordinates utilizing custom features data arrays, map auto-updates, and hover info tooltips.

Avoid

Allocating small layouts (under 4x4 grid spacing) which forces immediate layout compression and hinders map navigation controls.
Configuring ‘Custom’ mode options while providing mismatched empty array syntax objects within the data expression field wrapper.

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.

Basic

Tile Layer URLoptionalNot set (null): The remote map layer imagery address layout. Left entirely empty by default to leverage standard OpenStreetMap tiles configurations.
Default: none

Data Source

View NameoptionalTextInside `dataSource`

Database view that supplies rows or form data.

Default: none

Response FormatoptionalOne of: json, geo, text, xml, bytea (or not set)Inside `dataSource`

Tells the decoding layout layout rules how to structure incoming data strings.

Choices

json — Standard structural text array payload format.
geo
text
xml — Extensible Markup Language block template.
bytea

Default: none

Update Map ViewoptionalYes / no

The manual variable script wrapper evaluated when Mode is toggled to CUSTOM. Initialized to null by default.

Default: none

Tooltip

Tooltip FunctionoptionalText or Custom expression: Boolean toggle command telling the view layer to auto-pan and snap coordinates back into focus whenever source records change.
Default: none

Selection

PropertyrequiredTextInside `selected`: Defines specific feature target filtering states. Initialized to null by default.
Default: none
Property ValuerequiredCustom expressionInside `selected`: Dynamic feature layout title evaluation block text line.
Example null
Default: none

Marker Styles

Marker Display Text FunctionoptionalText or Custom expression

Controls the visual tracking badge layout type assigned to coordinate nodes.

Default: none

Marker Label VariantoptionalOne of: icon, text

Chooses between icon and text marker label presentation.

Choices

icon
text

Default: none

Marker Background Color FunctionoptionalText or Custom expression

Sets the icon badge fill background color via expressions or standard system palette definitions.

Default: none

Path Styles

Style Functionoptionalcolor or Custom expression: Sets polygon outline and shape interior colors using script rules or standard system themes.
Default: none

Coordinates

LatitudeoptionalNumber

Floating decimal point input restricting baseline target coordinates.

Good to know

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

Default: none

LongitudeoptionalNumber

Floating decimal point input restricting baseline target coordinates.

Good to know

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

Default: none

ZoomoptionalNumber

An integer parameter setting the visual map magnification baseline layer scale footprint.

Default: none

Inside `styleFunction.option_1`: (option_1) ↕

ColoroptionalText: Configuration for color.
Default: none

Inside `selected.option_2`: (option_2) ↕

Marker ColoroptionalText: Configuration for marker Color.
Default: none
Marker LabeloptionalText: Configuration for marker Label.
Default: none
Path ColoroptionalSettings group: Configuration for path Color.
Default: none
TooltipoptionalText or Custom expression (text): Configuration for tooltip.
Default: none

Inside `selected.option_2.pathColor`: (pathColor) ↕

ColoroptionalText: Configuration for color.
Default: none

Sizing

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

Accessibility

Supports standard keyboard focus bindings, tracking pan inputs via standard arrow actions, and supplies screen readers structural coordinate metadata labels automatically.

Composition

Where you can place it

Drag this element into one of these containers:

Sample configuration

Minimal example — required fields only ↕

1
2
3
4
5
{
  "config": {
    "value": "@@expression:'value'"
  }
}

 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
29
30
31
{
  "config": {
    "dataSource": {
      "viewName": "contacts",
      "responseFormat": "json"
    },
    "tileLayerUrl": "tileLayerUrl",
    "updateMapView": false,
    "styleFunction": {
      "color": "color"
    },
    "tooltipFunction": "tooltipFunction",
    "markerDisplayTextFunction": "markerDisplayTextFunction",
    "markerBackgroundColorFunction": "markerBackgroundColorFunction",
    "latitude": 0,
    "longitude": 0,
    "zoom": 0,
    "selected": {
      "property": "property",
      "propertyValue": "@@expression:'value'",
      "pathColor": {
        "color": "color"
      },
      "markerColor": "markerColor",
      "markerLabel": "markerLabel",
      "tooltip": "tooltip"
    },
    "value": "@@expression:'value'",
    "markerLabelVariant": "icon"
  }
}

Ready-made setups

Interactive Regional Geospatial Map ↕

Configures a 4x4 map layout utilizing dynamic database query items, auto-updating frames, and colorful error boundary markers.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "config": {
    "basic": {
      "tileLayerUrl": ""
    },
    "data_source": {
      "dataSourceMode": "QUERY",
      "queryName": "getRegionalOffices",
      "builtinResponseFormat": "geo+json",
      "updateMapViewOnDataChange": true
    },
    "coordinates": {
      "latitude": 52.52,
      "longitude": 13.4,
      "zoom": 10
    },
    "marker_styles": {
      "markerDisplayMode": "Icon",
      "markerBackgroundColorExpression": "primary"
    }
  }
}