Map

The Map widget shows the web map of an Item and draws the geometries that your page sends on top of it. The rest of the contract (credential, ready, error) is in Widgets.

URL and parameters

The URL is <site>/widgets/map.

Parameter	Meaning	Required
`item_id`	The id of the web map Item.	Yes

Long values are not in the URL. Your page sends them as the payload of post-widget-parameters, described next.

Messages

action	Direction	Payload
`ready`	widget to your page	None. Sent as soon as the widget loads, before the web map has loaded.
`post-widget-parameters`	your page to the widget	`{ options, features }`. Both fields are optional.
`error`	widget to your page	`{ statusCode }` when the web map cannot be read, or `{ statusCode: undefined, message }` when the map cannot be created, for example when the browser has no WebGL.

options turns parts of the screen on or off. A value you leave out takes the web map's own value, then the default.

Field of `options.components`	Default	Part it controls
`zoom`	`true`	The zoom buttons and the button back to the full extent.
`measurement`	`true`	The measuring tool.
`scale`	`true`	The scale bar.
`coordinates`	`true`	The coordinates under the pointer.
`featureInfoWindow`	`true`	The Record card when a Feature is clicked.
`details`	`{ expanded: false }`	The card with the name and the layers (`expanded` opens it from the start).

features is an array of GeoJSON geometries (Point, MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon) or of Features that hold one of them. The widget draws them over the web map with labels for coordinates, length and area, then fits the map to them.

Each post-widget-parameters message replaces both options and features of the one before. A field you leave out goes back to its default.

Example

Continuing the example in Widgets, send the geometries after ready.

if (e.data.action === 'ready') {
  frame.contentWindow.postMessage(
    {
      messageToken,
      action: 'post-widget-parameters',
      payload: {
        options: { components: { measurement: false } },
        features: [{ type: 'Point', coordinates: [100.5018, 13.7563] }],
      },
    },
    site
  )
}

Notes

An error with a statusCode comes from reading the Item: 401 means the credential does not work, 403 means no permission, 404 means no such id.
An error with a message and no statusCode means the map could not be created. Check that the browser has WebGL on.
A position in features is [longitude, latitude], as GeoJSON says.
To let the user draw or edit a geometry, use a Form that has a geometry editor field.

URL and parametersCopy Anchor Link

MessagesCopy Anchor Link

ExampleCopy Anchor Link

NotesCopy Anchor Link

On this page

URL and parameters

Messages

Example

Notes